Tailwind CSS v4 Default Theme Variables in Generated CSS Are Expected

Pay once, use forever—get huge lifetime software deals on ProductCanyon • Ad

One of the first things I noticed when upgrading to Tailwind CSS v4 is that I had a bunch of unused variables in my output CSS file. I had all the colors, font sizes, shadows, and the rest of the default theme variables.

/* Example of some of the variables */
--color-stone-50: oklch(0.985 0.001 106.423);
--color-stone-100: oklch(0.97 0.001 106.424);
--color-stone-200: oklch(0.923 0.003 48.717);
--color-stone-300: oklch(0.869 0.005 56.366);
--color-stone-400: oklch(0.709 0.01 56.259);
--color-stone-500: oklch(0.553 0.013 58.071);
--color-stone-600: oklch(0.444 0.011 73.639);
--color-stone-700: oklch(0.374 0.01 67.558);
--color-stone-800: oklch(0.268 0.007 34.298);
--color-stone-900: oklch(0.216 0.006 56.043);
--color-stone-950: oklch(0.147 0.004 49.25);

--color-black: #000;
--color-white: #fff;

--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
--breakpoint-xl: 80rem;
--breakpoint-2xl: 96rem;

--container-3xs: 16rem;
--container-2xs: 18rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;

Naturally, I thought there was a problem because I was expecting everything unused to be purged. But after some digging around, I found out that this is expected behavior, according to one of the Tailwind CSS developers on GitHub.

In v4, we do expose all the variables so that you can use them (and change them) at runtime, which makes it very useful to use the variables in places like framer-motion.

How to prevent the default variables from appearing in your CSS file

To prevent the Tailwind CSS v4 default theme variables from appearing in your generated CSS file, you can completely disable them by using --*: initial;, like this:

@import "tailwindcss";

@theme {
  --*: initial;
  
  /* You can add your custom variables now */
}

You don’t have to disable the entire default theme, though. You can disable only a specific namespace, such as colors, like this:

@import "tailwindcss";

@theme {
  --color-*: initial;
  
  /* You can add your custom variables for colors now */
}

Now, only the default utility classes that use that namespace, such as bg-green-700 or text-red-300, will be disabled and cannot be used. You can still use the rest of the utility classes for shadows, font sizes, etc., except the ones involving colors.

The CSS File Size Has Increased

The CSS file size has increased quite a bit because the default theme variables take around 16KB and 14KB minified. But I can live with that, it’s not that much.

I don’t think it’s worth the hassle of writing your own custom variables for everything. Plus, it would kind of beat the purpose of using Tailwind CSS in the first place.

That’s a Wrap

If this post helped you, please consider following me on Bluesky or Instagram to support me.

Also, don't hesitate to contact me if you're interested in my web design services, want to collaborate, or just have something to say.