Table of contents

• Getting started
  • Installation
  • Create config file
    • Custom config file
• Configuration Options
• Full configuration example
• Important Information

Getting started

Installation

npm install rantail

Create config file

rantail requires a basic config file (rantail.config.js) under your project root

/** @type {import('rantail').IConfig} */
const config = {
    content: [
        './pages/**/*.{js,jsx,ts,tsx}',
        './components/**/*.{js,jsx,ts,tsx}',
        './app/**/*.{js,jsx,ts,tsx}',
        './src/**/*.{js,jsx,ts,tsx}',
    ],
    cssFilePath:'src/index.css',
    // ...other options
}
export default config

Configuring Rantail

Add rantail as your prebuild script

{
    "prebuild": "rantail",
    "build": "next build"
}

Custom config file

You can also use a custom config file instead of rantail.config.js. Just pass --config <your-config-file>.js to build command (Example: custom-config-file)

{
  "prebuild": "rantail --config awesome.config.js",
  "build": "next build"
}

Configuration Options

| property | description | type | | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | | content | The files for which conversion is required. Default ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}', './app/**/*.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'] | array of glob patterns | cssFilePath|Path from root where main CSS file is located. | string | | cuidLength (optional) | Length of the cuid's generated. Default 12. Visit cuid2's docs for collision rate calculation. | number | | suffix (optional) | Suffix to generated cuid's. | string | | prefix (optional) | Prefix to generated cuid's | string | | ignore (optional) | classNames starting with variable to be ignored when converting tailwind functions to cuid's | string|

Full configuration example

Here's an example rantail.config.js configuration with all options

/** @type {import('rantail').IConfig} */

const config = {
    content: [
        './pages/**/*.{js,jsx,ts,tsx}',
        './components/**/*.{js,jsx,ts,tsx}',
        './app/**/*.{js,jsx,ts,tsx}',
        './src/**/*.{js,jsx,ts,tsx}',
    ],
    cssFilePath:'src/index.css',
    cuidLength: 5,
    suffix: '_',
    prefix: '_',
    ignore: '_'
}

export default config

Above configuration will convert the below .jsx file

import { useState } from "react";

function App() {
  const [number, setNumber] = useState(0)

  return (
    <div>
      <p className="text-3xl font-black _doNotConvert">test2</p>
      <div className={`text-sm font-black`}>test-3</div>
      <button onClick={() => setNumber(number + 1)} className={`border-[5px] border-yellow-500 rounded-lg ${number % 2 === 0 ? 'bg-orange-500 font-bold' : 'bg-blue-500 font-black'} `}>Press Me</button>
    </div>
  )
}

export default App;

into .jsx which will look like

import { useState } from "react";

function App() {
  const [number, setNumber] = useState(0)

  return (
    <div>
      <p className="_wat19_ _yvrrd_ _doNotConvert">test2</p>
      <div className={`_s28yg_ _yvrrd_`}>test-3</div>
      <button onClick={() => setNumber(number + 1)} className={`_txcx1_ _l9g84_ _z5uso_ ${number % 2 === 0 ? '_mebu4_ _pv8la_' : '_l9hdm_ _yvrrd_'} `}>Press Me</button>
    </div>
  )
}

export default App;

along with appending those values to the .css file to make it look like

@tailwind base;
@tailwind components;
@tailwind utilities;
._wat19_ { @apply text-3xl; }
._yvrrd_ { @apply font-black; }
._s28yg_ { @apply text-sm; }
._txcx1_ { @apply border-[5px]; }
._l9g84_ { @apply border-yellow-500; }
._z5uso_ { @apply rounded-lg; }
._mebu4_ { @apply bg-orange-500; }
._pv8la_ { @apply font-bold; }
._l9hdm_ { @apply bg-blue-500; }
._tpvzj_ { @apply flex; }
._ek8mx_ { @apply w-[500px]; }

Important Information

Rantil is a pre-build feature that performs the conversion in your development code before the build process. When using it, exercise caution if you attempt to build it without a code copy. It is advisable to utilize hosting providers such as Vercel, Netlify, or Cloudflare Pages, etc, which build a copy of your code.

Contribution

All PRs are welcome :)