In Tailwind CSS version 4, the way you customize the look of your sites are by configuring special theme variables within the Tailwind custom theme directive. That looks something like this. So under your import of Tailwind CSS in your CSS file, you would use the at theme directive, and then you would create one of these theme variables just as a normal CSS. custom property or CSS variable.
In this case, we're creating a brand new color meant 500 and then just setting its value to an OKLCH color value. If you're not familiar with OKLCH, don't worry about it. It is the model that Toen uses under the hood for all of its colors. But you can still define your colors in whatever color model you choose, like a hex code or RGB.
or whatever. Let's try out customizing the theme in our own project. Here, I've set some custom colors within the at theme directive. And the result is that now I can use BG primary, BG secondary and BG accent anywhere throughout my project to set the background colors accordingly.
This provides, of course, not only the background color classes, but also text color classes, border color classes. so on and so forth. So this is actually a fairly common pattern you'll see where people create some one-off color variables for brand colors. Now you can of course also set custom colors on a scale that behave a lot like Tailwind's built-in colors.
Here we've got a brand new color called avocado and we've given it a scale value from 50 to 950. and the result looks a lot like the built-in colors that Tailwind provides out of the box. Besides setting custom colors, you could also override existing colors. How?
Well, it's just as easy as setting the custom ones. You simply name the color variable the same thing as the existing color variable, and then you set it to a new value. When I save this and go up here in the browser, Yeah, I've customized my slate 100 color to this green, which doesn't fit at all, but definitely demonstrates the point. All right, besides working with colors, you can also customize font stacks.
Once again, you could add a brand new font stack. So the built in ones in tailwind are sans serif, serif and mono. But here we've created a brand new one called display. Display fonts are often useful for things like headings or text that, you know, isn't in large blocks, but they're a little bit fancier text that you want to use to grab and draw attention.
In this case, I'm setting my custom display stack to use a lobster by default and then fall back to sans serif. Now, it is still up to you to make sure the browser actually has access to these fonts. Either they're installed on the user's machine already you're hosting it yourself on your website and serving it with your website, or you're using a service like Google Fonts, in which case you'll probably have to add some kind of little code to your HTML, but this can all be found on the Google Fonts website. As you can see, that's exactly what I'm doing here in order to include lobster in my site.
And then I map that lobster font to the... font display class here with the theme variable. You can, of course, also override existing fonts. So for font sans, the default stat consists of these values right here.
But I'm adding a new one to the very beginning, a font called Avenir that I really like. Though I wouldn't recommend using it unless you host it yourself, as it's not on many people's machines. Anyways, if I remove it, Yeah, over in the browser, you can see the default sans serif font for Tailwind. Adding Avenir back into the stack overrides the default.
You can also customize breakpoints, adding new ones or overriding existing ones. Finally, and perhaps best of all, all of these theme variables are also available throughout the rest of your CSS as regular custom properties or CSS variables. meaning you can use them to define your own semantic classes if the need arises. The theme variables that we just looked at are just the most common ones that you see people configure, but there are plenty more that you can set to whatever you'd like.
Here inside of the Tailwind CSS repo, you can see the default theme and includes the font stacks, all the different colors as we already saw. but it also includes things like the breakpoints for containers, different text sizes, font weights, tracking, radiuses, easing curves, animations, all sorts of theme variables that you can add to or customize to your liking. If you'd like to peruse it yourself, I've left a link to this file in the description below.