{"id":50975388,"url":"https://github.com/ui-layouts/obfuscated-tailwindcss","last_synced_at":"2026-06-19T07:02:32.391Z","repository":{"id":346027943,"uuid":"1186295157","full_name":"ui-layouts/Obfuscated-tailwindcss","owner":"ui-layouts","description":"Hide Your TailwindCSS 👀","archived":false,"fork":false,"pushed_at":"2026-03-29T17:45:36.000Z","size":2645,"stargazers_count":22,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-29T19:36:18.837Z","etag":null,"topics":["buildinpublic","coding","developer-tools","devtools","frontend","indiehackers","nextjs","performance","react","reactjs","security","tailwindcss","uidev","webdev"],"latest_commit_sha":null,"homepage":"https://obfustail.ui-layouts.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ui-layouts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-03-19T13:29:37.000Z","updated_at":"2026-03-29T17:57:54.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ui-layouts/Obfuscated-tailwindcss","commit_stats":null,"previous_names":["ui-layouts/obfuscated-tailwindcss"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ui-layouts/Obfuscated-tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-layouts%2FObfuscated-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-layouts%2FObfuscated-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-layouts%2FObfuscated-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-layouts%2FObfuscated-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ui-layouts","download_url":"https://codeload.github.com/ui-layouts/Obfuscated-tailwindcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-layouts%2FObfuscated-tailwindcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34520433,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":["buildinpublic","coding","developer-tools","devtools","frontend","indiehackers","nextjs","performance","react","reactjs","security","tailwindcss","uidev","webdev"],"created_at":"2026-06-19T07:02:28.122Z","updated_at":"2026-06-19T07:02:32.381Z","avatar_url":"https://github.com/ui-layouts.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Obfustail\n\nObfustail 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.\n\nThis repository demonstrates the full flow, including the token setup required for semantic Tailwind utilities such as `bg-primary`, `text-primary-foreground`, and `bg-background`.\n\n## How it works\n\n1. The build script scans your project for `className=\"...\"` and `class=\"...\"` strings.\n2. Each full utility string is assigned a generated class name.\n3. The script replaces the original class string in your source files.\n4. It generates `app/obfuscated-styles.css` with `@apply` rules for every generated selector.\n5. It saves `.obfuscation-map.json` so you can inspect the mapping.\n\n## Install the dependencies\n\n```bash\nnpm install uuid\nnpm install -D glob @types/uuid\n```\n\nAlternative package managers:\n\n```bash\nbun add uuid\nbun add -d glob @types/uuid\n```\n\n```bash\nyarn add uuid\nyarn add --dev glob @types/uuid\n```\n\n## Add the build step\n\nCreate `scripts/obfuscate-tailwind.js` in your project, then run it before `next build`:\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"node scripts/obfuscate-tailwind.js \u0026\u0026 next build\",\n    \"start\": \"next start\",\n    \"lint\": \"eslint\"\n  }\n}\n```\n\n## Import the generated stylesheet\n\nImport the generated CSS file from `app/layout.tsx`:\n\n```tsx\nimport \"./obfuscated-styles.css\";\nimport \"./globals.css\";\n```\n\n## Important: create a separate `token.css`\n\nIf 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.\n\n### 1. Create `app/token.css`\n\nMove your shared theme variables and `@theme inline` mappings into this file:\n\n```css\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-border: var(--border);\n}\n\n:root {\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --border: oklch(0.922 0 0);\n}\n```\n\n### 2. Import `token.css` in `app/globals.css`\n\n```css\n@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@import \"shadcn/tailwind.css\";\n@import \"./token.css\";\n```\n\n### 3. Uncomment the token reference in the generator\n\nInside `scripts/obfuscate-tailwind.js`, make sure the generated CSS includes both references:\n\n```js\ncss += '@reference \"tailwindcss\";\\n';\ncss += '@reference \"./token.css\";\\n\\n';\n```\n\nThat separate `token.css` file fixes the main issue with generated token utilities. Without it, classes like `bg-primary` and `bg-background` may not resolve correctly inside `app/obfuscated-styles.css`.\n\n## Example\n\n### Source component\n\n```tsx\n\u003cdiv className=\"flex items-center justify-center p-4 bg-primary text-primary-foreground rounded-lg\"\u003e\n  \u003ch1 className=\"text-2xl font-bold\"\u003eHello World\u003c/h1\u003e\n\u003c/div\u003e\n```\n\n### Obfuscated output\n\n```tsx\n\u003cdiv className=\"a1b2c3d4\"\u003e\n  \u003ch1 className=\"e5f6g7h8\"\u003eHello World\u003c/h1\u003e\n\u003c/div\u003e\n```\n\n### Generated CSS\n\n```css\n.a1b2c3d4 {\n  @apply flex items-center justify-center p-4 bg-primary text-primary-foreground rounded-lg;\n}\n\n.e5f6g7h8 {\n  @apply text-2xl font-bold;\n}\n```\n\n## Generated files\n\nAfter a build, you should have:\n\n- `app/obfuscated-styles.css`\n- `.obfuscation-map.json`\n\n## Documentation routes in this demo\n\n- `/docs/getting-started`\n- `/docs/examples`\n\nThese routes are backed by actual MDX content in this repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-layouts%2Fobfuscated-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fui-layouts%2Fobfuscated-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-layouts%2Fobfuscated-tailwindcss/lists"}