How do color shades work with respect to theme.json colors being imported into tailwind via the themejson plugin?

[MattReevesGB]

Would this require custom settings in the theme.json to make this work? Or does it work already somehow?

[gregsullivan]

Hi Matt—Thanks for posting this!

To my knowledge, the theme.json format doesn't support shades in the same way Tailwind does (as a colour name with an array of named shades—number values by default), so each shade you would like to add needs to be added as an individually named color.

The use case for the existing theme.json integration is to allow for the colors defined there for use in the block editor to be automatically registered by Tailwind for use in theme files.

If you're only using the shades you're looking to add in theme files, you can register them using Tailwind's approach. If you want to add shades for use in the block editor, they'll need to be manually added to the theme.json file.

The only other thing I'd flag is this line from the themejson plugin's documentation:

If one or more of your color palette’s slug values matches a slug in Tailwind’s default color palette, those colors from the default palette—including all shades—will be overridden by the color value from your theme.json file.

Hopefully that helps! Happy to expand further if I didn't cover what you were looking for.

[MattReevesGB]

Hey Greg, thanks for your thorough and quick response. I'm using the theme.json to dynamically populate an ACF radio field for a flexible content pseudo page-builder in a non-block theme we're building. I'll just add the variations as individual colors as follows "blue-100", "blue-200" etc as you've suggested.

The other option would be to parse the tailwind config itself and pull the colors directly from there for the ACF field, but this seemed like a simpler approach.

Thanks again!

[gregsullivan]

No problem at all! Your approach sounds totally workable. The only other option that I might consider is creating a separate JSON file for the colors and then importing that into your Tailwind config / using it for the ACF field. But if you already have it working, no use in changing something you're happy with!