Tailwind 4 confusion about colours
Why is my Tailwind CSS not interpreting colors? - Stack Overflow
Color Theory in Tailwind/CSS Question
Tailwind CSS Colors Not Applying Dynamically
Videos
Hi so I'm trying out tailwind in a new react project I'm working on. After a lot of wrangling with ChatGPT I realised that it doesn't seem to know much about tailwind 4 other than it exists and I had to revert to stack overflow to figure out how to get it to work by using @themes in my config.
The thing I'm confused about though is in the tailwind 3 examples I was being given you could set things like bg-primary and bg-primaryDark in one place which makes sense and is useful as I can use it all over and update it quickly to try out different colour schemes.
Whereas in Tailwind 4 the examples seem to suggest I should be using things like bg-cyan-500 everywhere which obviously means I have to change them all if I want to update it. Seems like an anti pattern so I just wanted to check whether I've misunderstood how I should be approaching this?
try adding at the top of your tailwind.config.js file:
const colors = require('tailwindcss/colors')
and in theme key this:
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
emerald: colors.emerald,
indigo: colors.indigo,
yellow: colors.yellow,
stone: colors.warmGray,
sky: colors.lightBlue,
neutral: colors.trueGray,
gray: colors.coolGray,
slate: colors.blueGray,
}
Instead of manually including
@tailwind base;
@tailwind components;
@tailwind utilities;
in your input.css, try using this instead:
@import "tailwindcss";
This ensures that Tailwind's default theme is included in your build (see here). This is shorthand for:
@layer theme, base, components, utilities;
@import "./theme.css" layer(theme);
@import "./preflight.css" layer(base);
@import "./utilities.css" layer(utilities);
The theme defines default colors and sizes (and more) for you, which is required before classes like text-red-300 or text-lg are recognized by Tailwind. If most Tailwind classes are being compiled, except for ones involving color/size, then it's likely that you're missing a theme.
@import "tailwindcss"; also ensures that Tailwind's default normalization is also applied, so you might see a shift from Times New Roman to a sans serif font.
Tailwind Play appears to import all these for you automatically, which is why your styles work fine in that context.
I am making multiple app variants as tailwind configs and then I export an environment variable APP_VARIANT and use different tailwind config colors accordingly.
I noticed something pretty simple that I feel like people who have done a lot of styling before have more insight into:
When I change my background from a dark color to a light color, I now have to change my default text color from a light color (which would be visible on a dark background) to a dark color (which will be visible on a light background). However, when I use this default color with active buttons that are pretty much always some type of light color, it doesn't look right because you need a light text color with a dark active button (think white text in a red button) and probably something darker with a light background (like black text in a yellow button).
I read you can handle this by calculating luminance and deciding whether the text color should be light or dark based off the background color, but is there some way this is generally handled in style sheets and tailwind? Thanks!