[v4] is it possible to have HEX values output for colors?

[cossssmin]

I'm testing Tailwind CSS v4 in Maizzle, where I need to output good old-fashioned HEX colors instead of oklch because of extremely poor support for modern formats in email clients.

In v3 it was just a matter of disabing color opacity (and we do it in tailwindcss-preset-email), but disabling corePlugins doesn't work right now in v4 so wondering if there's another way.

[sickl8]

@cossssmin I'm currently solving the same issue and I'm not sure if tailwind supports outputing in hex, the tedious solution I resorted to is to make a custom postcss plugin and vite plugin accordingly to patch the css and the html, I can release it as a standalone npm package if you want

[cossssmin]

After Adam's answer I think it's way easier to just use a preset with the old colors, seems faster too 👍

[adamwathan]

Any reason you can't override the default color palette with a hex-based color palette?

@import "tailwindcss";

@theme {
  --color-*: initial;
  --color-gray-50: #f9fafb;
  /* ... */
}

You can even just copy the v3 color palette and put it in there since the v4 color palette is just the OKLCH-ified version of those original hex colors but with a few colors adjusted to take advantage of the wider gamut (which you lose going back to hex anyways).

[cossssmin]

You're right, I'll just have a preset extending the default theme with the v3 HEX colors 👍

Seeing your example made me realize: adding support for disabling corePlugins in JS config isn't just a matter of turning those into vars set to initial like above, is it?

[adamwathan]

Yeah disabling core plugins is going to be more complicated than that, we should talk about it some time since you are basically the only person who needs it but I suspect it's going to be a lower level JS API where you invoke Tailwind yourself with your own set of utilities instead of using the default ones.

BTW I would really avoid JS config if you can, it slows things down a lot vs. the CSS API. "Presets" are sort of a dead concept in v4 because all you really need to do is give people a CSS file they can import and that's the preset.

[cossssmin]

So I'd be ok with maintaining a CSS file with theme overrides in Maizzle that I give users to @import in their HTML, and that file then gets compiled with @tailwindcss/postcss. It wouldn't even be that much of an overhead tbh, since most of the new stuff Tailwind gets doesn't work in email anyway, so it'll likely be set and forget 👌

The thing I'm most worried about is ensuring all CSS vars are resolved to their static representation, but first:

1. need to figure out [v4] Plugins registered after @tailwindcss/postcss do not work #15138
2. need to make sure some complex/nested stuff still gets resolved properly (with postcss-css-variables)
3. need to make sure the CSS config can do everything we do in tailwindcss-preset-email

[itzcodex24]

Create a gist for those finding this and wanting to override the v4 palette with hex based colors.