{"repo":"ui-layouts/Obfuscated-tailwindcss","free":true,"listed":false,"github":"https://github.com/ui-layouts/Obfuscated-tailwindcss","clone":"git clone https://github.com/ui-layouts/Obfuscated-tailwindcss.git","description":"Hide Your TailwindCSS 👀","language":"TypeScript","stars":42,"topics":["buildinpublic","coding","developer-tools","devtools","frontend","indiehackers","nextjs","performance","react","reactjs"],"license":null,"category":"dev-tools","readme_excerpt":"Obfustail Obfustail is a build-time approach for Next.js projects that rewrites readable Tailwind utility strings into short generated class names, then emits a stylesheet that maps those generated selectors back to the original Tailwind rules. This repository demonstrates the full flow, including the token setup required for semantic Tailwind utilities such as bg-primary , text-primary-foreground , and bg-background . How it works 1. The build script scans your project for className=\"...\" and class=\"...\" strings. 2. Each full utility string is assigned a generated class name. 3. The script replaces the original class string in your source files. 4. It generates app/obfuscated-styles.css with @apply rules for every generated selector. 5. It saves .obfuscation-map.json so you can inspect the mapping. Install the dependencies Alternative package managers: Add the build step Create scripts/obfuscate-tailwind.js in your project, then run it before next build : Import the generated stylesheet Import the generated CSS file from app/layout.tsx : Important: create a separate token.css If your project uses semantic Tailwind utilities such as bg-primary , bg-background , text-foreground , border-border , or similar token-backed classes, create a dedicated token.css file and keep your design tokens there. 1. Create app/token.css Move your shared theme variables and @theme inline mappings into this file: 2. Import token.css in app/globals.css 3. Uncomment the token reference in the gener","default_branch":null,"files":null,"tree":[],"storefront":"/r/ui-layouts","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/ui-layouts/Obfuscated-tailwindcss/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}