Theme Customisation in CSS

👨‍💼 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.

Let's get to work

🐨 Transfer over the

tailwind.config.ts

theme customisations for screens, colors and font-family to the

src/styles/tailwind.css

file.

08. Preparing for Tailwind v4/02. Theme Customisation in CSS (💪 problem)

Theme Customisation in CSS

Customise the Tailwind theme in CSS

Let's get to work