I tried using Tailwind v4 but after a few hours, I noticed it has no fallback for oklch which is limited to most modern browsers. The TW maintainer also mentioned Tailwind v4 uses more modern features found in modern browsers. So, should a warning be added in the Hugo docs about this? Sadly, I feel I wasted a few hours until I remembered to check browser support in my analytics.
I have added a “caution alert” to the documentation.
I think oklch can be worked around by defining your own theme color vars in RGB. The kicker is their use of @layer for which I don’t think there’s a simple workaround.
You can convert between oklch and rgb. But oklch is supposedly making it easier to change only the lightness of a color without affecting the other parameters. Which is probably useful for themes.
That would mean defining the fallback colours manually. That, coupled with the other modern features means either sticking with Tailwind v3 or using vanilla CSS. For my custom Hugo layout, I went with the latter. I will revisit Tailwind v4 in a few years. Though my theme is minimalist, so not much to gain for now from more modern features.
UPDATE: I just saw less than 5% of my users in the last 3 months used browser versions less than those supported by Tailwind v4. So I decided to add a JS triggered alert for them to either update their browsers or visit site even if some features may be broken. I will be using Tailwind v4 now.
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.