When I run the build script in my svelte kit tailwind project, with Tailwind v4, it add every single tailwind color. I only use one single tailwind color, so I'd like to remove them.
I spent a while searching online and asking LLMs, and nothing has an answer for tailwind v4 which is config-less.
Here's my app.css
@import 'tailwindcss';@theme { --color-brand-red: #f00;}@utility container { padding-inline: 1rem; margin-inline: auto;}Here's my package.json:
"scripts": {"dev": "vite dev","build": "vite build","preview": "vite preview","prepare": "svelte-kit sync || echo ''","check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","format": "prettier --write .","lint": "prettier --check . && eslint ." },"devDependencies": {"@eslint/compat": "^1.2.5","@eslint/js": "^9.18.0","@sveltejs/adapter-auto": "^4.0.0","@sveltejs/kit": "^2.16.0","@sveltejs/vite-plugin-svelte": "^5.0.0","@tailwindcss/vite": "^4.0.0","eslint": "^9.18.0","eslint-config-prettier": "^10.0.1","eslint-plugin-svelte": "^2.46.1","globals": "^15.14.0","prettier": "^3.4.2","prettier-plugin-svelte": "^3.3.3","prettier-plugin-tailwindcss": "^0.6.11","svelte": "^5.0.0","svelte-check": "^4.0.0","tailwindcss": "^4.0.0","typescript": "^5.0.0","typescript-eslint": "^8.20.0","vite": "^6.0.0" },"pnpm": {"onlyBuiltDependencies": ["esbuild" ] },"dependencies": {"lucide-svelte": "^0.475.0" }Yet when I run pnpm build I get a css file with:
/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(.971 .013 17.38);--color-red-100:oklch(.936 .032 17.717);--color-red-200:oklch(.885 .062 18.334);--color-red-300:oklch(.808 .114 19.571);--color-red-400:oklch(.704 .191 22.216);--color-red-500:oklch(.637 .237 25.331);--color-red-600:oklch(.577 .245 27.325);--color-red-700:oklch(.505 .213 27.518);--color-red-800:oklch(.444 .177 26.899);--color-red-900:oklch(.396 .141 25.723);--color-red-950:oklch(.258 .092 26.042);--color-orange-50:oklch(.98 .016 73.684);--color-orange-100:oklch(.954 .038 75.164);--color-orange-200:oklch(.901 .076 70.697);--color-orange-300:oklch(.837 .128 66.29);--color-orange-400:oklch(.75 .183 55.934);--color-orange-500:oklch(.705 .213 47.604);--color-orange-600:oklch(.646 .222 41.116);--color-orange-700:oklch(.553 .195 38.402);--color-orange-800:oklch(.47 .157 37.304);--color-orange-900:oklch(.408 .123 38.172);--color-orange-950:oklch(.266 .079 36.259);--color-amber-50:oklch(.987 .022 95.277);--color-amber-100:oklch(.962 .059 95.617);--color-amber-200:oklch(.924 .12 95.746);--color-amber-300:oklch(.879 .169 91.605);--color-amber-400:oklch(.828 .189 84.429);--color-amber-500:oklch(.769 .188 70.08);--color-amber-600:oklch(.666 .179 58.318);--color-amber-700:oklch(.555 .163 48.998);--color-amber-800:oklch(.473 .137 46.201);--color-amber-900:oklch(.414 .112 45.904);--color-amber-950:oklch(.279 .077 45.635);--color-yellow-50:oklch(.987 .026 102.212);--color-yellow-100:oklch(.973 .071 103.193);--color-yellow-200:oklch(.945 .129 101.54);And so on. This file is 28kb and I have very few unique tailwind classes I'm using.
I searched their official docs and they only have docs on this for v2 it seems. Is there a way to edit my app.css to remove all unused colors? Thanks.