{"id":29704506,"url":"https://github.com/igoyalsamarth/rantail","last_synced_at":"2025-07-23T14:11:31.645Z","repository":{"id":221709205,"uuid":"755002498","full_name":"igoyalsamarth/rantail","owner":"igoyalsamarth","description":"The ultimate companion for Tailwind CSS. Write clean and secure code effortlessly. Protect your work from theft with Rantail. Encode your Tailwind classes with unique and customizable cuid's. Enjoy smooth, encoded, and theft-proof coding.","archived":false,"fork":false,"pushed_at":"2024-09-29T14:53:00.000Z","size":578,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-15T03:12:31.686Z","etag":null,"topics":["cuid2","encode","library","tailwindcss","theft-protection"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/rantail","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/igoyalsamarth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-09T08:14:56.000Z","updated_at":"2024-10-10T00:20:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"140d0e19-f4af-437d-ab2e-cc2b2d95877e","html_url":"https://github.com/igoyalsamarth/rantail","commit_stats":null,"previous_names":["igoyalsamarth/rantail"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/igoyalsamarth/rantail","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igoyalsamarth%2Frantail","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igoyalsamarth%2Frantail/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igoyalsamarth%2Frantail/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igoyalsamarth%2Frantail/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/igoyalsamarth","download_url":"https://codeload.github.com/igoyalsamarth/rantail/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igoyalsamarth%2Frantail/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266691598,"owners_count":23969189,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cuid2","encode","library","tailwindcss","theft-protection"],"created_at":"2025-07-23T14:11:23.260Z","updated_at":"2025-07-23T14:11:31.614Z","avatar_url":"https://github.com/igoyalsamarth.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![BANNER](./assets/banner.svg)](rantail.goyalsamarth.com)\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm version](https://badge.fury.io/js/rantail.svg)](https://badge.fury.io/js/rantail) \n[![PRs - Welcome](https://img.shields.io/badge/PRs-Welcome-2ea44f)](https://github.com/igoyalsamarth/rantail/pulls)\n\u003ca href=\"https://twitter.com/intent/follow?screen_name=igoyalsamarth\"\u003e\n\u003cimg src=\"https://img.shields.io/twitter/follow/igoyalsamarth?style=social\u0026logo=twitter\" alt=\"follow on Twitter\"\u003e\n\u003c/a\u003e\n\n\u003c/div\u003e\n\n## Table of contents\n\n- [Getting started](#getting-started)\n  - [Installation](#installation)\n  - [Create config file](#create-config-file)\n    - [Custom config file](#custom-config-file)\n- [Configuration Options](#configuration-options)\n- [Full configuration example](#full-configuration-example)\n- [Important Information](#important-information)\n\n## Getting started\n\n### Installation\n\n```shell\nnpm install rantail\n```\n\n### Create config file\n\n`rantail` requires a basic config file (`rantail.config.js`) under your project root\n\n```js\n/** @type {import('rantail').IConfig} */\nconst config = {\n    content: [\n        './pages/**/*.{js,jsx,ts,tsx}',\n        './components/**/*.{js,jsx,ts,tsx}',\n        './app/**/*.{js,jsx,ts,tsx}',\n        './src/**/*.{js,jsx,ts,tsx}',\n    ],\n    cssFilePath:'src/index.css',\n    // ...other options\n}\nexport default config\n```\n### Configuring Rantail\n\nAdd `rantail` as your prebuild script\n\n```json\n{\n    \"prebuild\": \"rantail\",\n    \"build\": \"next build\"\n}\n```\n\n#### Custom config file\n\nYou can also use a custom config file instead of `rantail.config.js`. Just pass `--config \u003cyour-config-file\u003e.js` to build command (Example: [custom-config-file](https://github.com/igoyalsamarth/rantail/tree/master/examples/custom-config-file))\n\n```json\n{\n  \"prebuild\": \"rantail --config awesome.config.js\",\n  \"build\": \"next build\"\n}\n```\n\n## Configuration Options\n\n| property                                            | description                                                                                                                                                                                                                                                                                                                                                                                                                          | type                                                                                                                     |\n| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |\n| 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                                                                                                                   |\ncssFilePath|Path from root where main CSS file is located.                                    | string                                                                                                                                                                                                                                                                                                                                                                                                                      |\n| cuidLength (optional)                               | Length of the cuid's generated. Default `12`. Visit [cuid2's docs](https://github.com/paralleldrive/cuid2) for collision rate calculation.                                                                                                                                                                                                                                                                                                                                                                                                   | number                                                                                                                   |\n| suffix (optional)                                 | Suffix to generated cuid's.                                                                                                                                                                                                                                                                                                                                                                                                              | string                                                                                                                   |\n| prefix (optional)                      | Prefix to generated cuid's                                                                                                                                                                                                                                                                                                                                                | string                                                                                                                   |\n| ignore (optional)                            | classNames starting with variable to be ignored when converting tailwind functions to cuid's                                                                                                                                                                                                                                                                                                                                                                       |       string|\n\n## Full configuration example\n\nHere's an example `rantail.config.js` configuration with all options\n\n```js\n/** @type {import('rantail').IConfig} */\n\nconst config = {\n    content: [\n        './pages/**/*.{js,jsx,ts,tsx}',\n        './components/**/*.{js,jsx,ts,tsx}',\n        './app/**/*.{js,jsx,ts,tsx}',\n        './src/**/*.{js,jsx,ts,tsx}',\n    ],\n    cssFilePath:'src/index.css',\n    cuidLength: 5,\n    suffix: '_',\n    prefix: '_',\n    ignore: '_'\n}\n\nexport default config\n```\n\nAbove configuration will convert the below `.jsx` file\n\n```js\nimport { useState } from \"react\";\n\nfunction App() {\n  const [number, setNumber] = useState(0)\n\n  return (\n    \u003cdiv\u003e\n      \u003cp className=\"text-3xl font-black _doNotConvert\"\u003etest2\u003c/p\u003e\n      \u003cdiv className={`text-sm font-black`}\u003etest-3\u003c/div\u003e\n      \u003cbutton onClick={() =\u003e setNumber(number + 1)} className={`border-[5px] border-yellow-500 rounded-lg ${number % 2 === 0 ? 'bg-orange-500 font-bold' : 'bg-blue-500 font-black'} `}\u003ePress Me\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App;\n```\ninto `.jsx` which will look like\n\n```js\nimport { useState } from \"react\";\n\nfunction App() {\n  const [number, setNumber] = useState(0)\n\n  return (\n    \u003cdiv\u003e\n      \u003cp className=\"_wat19_ _yvrrd_ _doNotConvert\"\u003etest2\u003c/p\u003e\n      \u003cdiv className={`_s28yg_ _yvrrd_`}\u003etest-3\u003c/div\u003e\n      \u003cbutton onClick={() =\u003e setNumber(number + 1)} className={`_txcx1_ _l9g84_ _z5uso_ ${number % 2 === 0 ? '_mebu4_ _pv8la_' : '_l9hdm_ _yvrrd_'} `}\u003ePress Me\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App;\n```\n\nalong with appending those values to the `.css` file to make it look like \n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n._wat19_ { @apply text-3xl; }\n._yvrrd_ { @apply font-black; }\n._s28yg_ { @apply text-sm; }\n._txcx1_ { @apply border-[5px]; }\n._l9g84_ { @apply border-yellow-500; }\n._z5uso_ { @apply rounded-lg; }\n._mebu4_ { @apply bg-orange-500; }\n._pv8la_ { @apply font-bold; }\n._l9hdm_ { @apply bg-blue-500; }\n._tpvzj_ { @apply flex; }\n._ek8mx_ { @apply w-[500px]; }\n```\n\n## Important Information\n\nRantil 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.\n\n\n## Contribution\n\nAll PRs are welcome :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figoyalsamarth%2Frantail","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Figoyalsamarth%2Frantail","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figoyalsamarth%2Frantail/lists"}