[v4] Will tailwind.config.ts go away?

[mary-ext]

Is the tailwind.config.ts support in v4 meant to be a transition period as people switch to CSS configuration? Is it expected to be supported in the future or is it truly the end of the line for JS-based configuration?

I'm asking this as I have issues with the CSS-first theming, it seems to make things so much harder to create an entire theme from scratch (not relying on Tailwind's default tokens)

I don't like using rem for spacing, as I expect the ability for users to control font sizing and UI scaling separately, but if I want to do this, I'd rather have a way to make this painless by iterating over an array of values that I can convert into tokens.

Are these sorts of additional customizations expected to come in the form of plugins instead?

[matagaralph]

Is the tailwind.config.ts support in v4 meant to be a transition period as people switch to CSS configuration? Is it expected to be supported in the future or is it truly the end of the line for JS-based configuration?

I'm asking this as I have issues with the CSS-first theming, it seems to make things so much harder to create an entire theme from scratch (not relying on Tailwind's default tokens)

I don't like using rem for spacing, as I expect the ability for users to control font sizing and UI scaling separately, but if I want to do this, I'd rather have a way to make this painless by iterating over an array of values that I can convert into tokens.

Are these sorts of additional customizations expected to come in the form of plugins instead?

I doubt if they're going to drop it very soon but i think that's the plan in the future.

[adamwathan]

It might go away in v5 a few years down the road, and won't be in the v4 documentation.

I'm asking this as I have issues with the CSS-first theming, it seems to make things so much harder to create an entire theme from scratch (not relying on Tailwind's default tokens)

Can you give an example of this? There are two ways to totally exclude the default tokens that are pretty simple —

1. Don't import the default theme — instead of using @import "tailwindcss", import the parts you want individually:

   @layer base, utilities;
   @import "tailwindcss/preflight" layer(base);
   @import "tailwindcss/utilities" layer(utilities);
   
   @theme {
     /* ... */
   }

   Here the default theme is never registered at all, so only the values in your @theme block are used.

2. Unset all of the default theme values — this is basically a one-liner:

   @import "tailwindcss";
   
   @theme {
     --*: initial;
   }

   That removes all of the default theme variables so you are starting from scratch.