Theme Customisation in CSS
Loading "Customize the Tailwind Theme"
Run locally for transcripts
๐จโ๐ผ Our app is sort of working, but there are obviously some styles missing.
๐ฆ It's important to understand that the
tailwind.config.ts file is completely ignored in Tailwind CSS v4. It will eventually be supported for the stable release, but right now, it's being ignored.๐จโ๐ผ Ahaaa, that's why! Well, we need to port our theme customisations to the CSS file, then!
Customise the Tailwind theme in CSS
Tailwind CSS v4 lets you extend (or override) the default theme by using CSS variables directly in your CSS.
๐ฐ Let me show you an example for the custom
highlight color we had defined in the Tailwind config.What looks like this in
tailwind.config.ts...theme: {
extend: {
colors: {
highlight: '#6202FF',
}
}
}
... can be defined like that in the
styles.css file:@theme {
--color-highlight: #6202ff;
}
๐ฐ The Intellisense should give you suggestions for available CSS variables names in the theme.
--color-{name}will let you define a color value.--breakpoint-{name}will let you define a screen size value.--font-family-{name}will let you define a font-family value.
๐ฆ Here's an exhaustive list of all the Tailwind theme CSS variables available.