Sage 11 - How to get custom styles added into theme.json?

sage
,
1

So previously on Sage Roots 10, I managed to get my tailwind.config.js custom presets like paddings, margins, colours, font sizes etc built into theme.json on build as an extend.

I’ve just started on v11 from today but not exactly sure how to replicate the same with vite.config.js? I tried creating a tailwind.config.js file in the theme root but couldn’t get it built into theme.json no matter what I tried.

Anyone had any luck?

2

Sage 11 uses Tailwind v4. Tailwind v4 now uses CSS for configuration. Configured Tailwind colors, fonts, and font sizes are included by default.

https://roots.io/sage/docs/tailwind-css/

3

So is there a way to disregard all the Tailwind font-sizes, colours etc and just use my own palette? So I assume I can’t use theme.json variables anymore, like background-color: var(–wp–preset–color–brand-red);

4

Yes, that is still supported in Tailwind v4. Highly recommend reading the Tailwind docs and upgrade guides.

5

Thanks Ben. For anyone else looking for docs on this, look here: Tailwind CSS v4.0 - Tailwind CSS