Let's talk about the Nuxt UI design system. It piggybacks heavily off of default Tailwind CSS functionality. css file, where at the top, we're simply importing a Tailwind CSS, declaring the theme name static, and then also importing a few Nuxt UI specific styles on top of that. Then, using the standard Tailwind CSS theme directive, we're defining some variables for that static theme.
This is what it came with out of the box. Next is customizing the green color to work better with its brand colors. And that's what we're seeing over on the page is this custom green. So you can override tailwind CSS colors, such as green, red, blue, so on and so forth, exactly like this.
But then Nuxt UI adds some semantic classes on top of these colors. What do I mean by that? Well, if you check out the home stats component, here we're setting a background to the primary color that is almost translucent. What is this?
Well, if I remove the class, you can see over on the page that the background on the icons disappear. So this BG primary, which is certainly not red, blue, green, one of those tail end CSS color classes, is mapped to our green that we've defined inside of the theme. This mapping occurs in app config. So here we can set this semantic color name, primary, to the Tailwind CSS green color.
But we could also set this to any other Tailwind CSS color that we'd like. For example, red works great, yellow, and so on. You can even change these variables at runtime, which we'll see in just a few lessons for a wicked awesome theme picker. We could also set the neutral color here, which is our background.
Let's go with about slate to give it a cooler feel. To view all the semantic color aliases that are available, you can check out the Nuxt UI docs. There are several of them, but they're pretty straightforward. There is primary, which defaults to green.
We just saw that in the code base, but there's also secondary, which is great for like secondary buttons, alternative actions, complimentary UI elements, something that goes well with your primary color. Typically, this primary color is going to be a branded color. And this secondary is going to be something that complements it. Then you've also got semantic color names for things like success.
This is great for success messages, completed states, info, warning, error, all which are kind of self-explanatory. They work in the same vein there as success. And then neutral, which you saw just a moment ago. Besides setting these semantic name colors to colors directly from Tailwind CSS, We could also create our own custom colors inside of the theme directive and remap those in app config to Nuxt UI's semantic naming.
Let me give you a good example of that. So let's say I want to create a brand new color just called brand. I don't want to override Tailwind's green color to keep up with my brand color. Instead, I want to make my own.
I'm going to do that right here with AI because I found it's really good at it. Here's my prompt. Create a color brand. So notice we're defining our own variable name here.
Until when, fifty to nine fifty spectrum. So this is saying, make sure you get a variation of this color for the full spectrum that all the typical tailwind colors utilize. And instead of green, how about we do something a little bit different? Let's go for orange.
Generate that, accept it. I don't know why it does this little comment thing every once in a while. But remove that, and everything actually looks pretty good. So what have we actually done?
We've created a brand new color that we could map to any of Nuxt UI's semantic color names. Look at there. It is now orange in the browser. And we've also given Tailwind CSS a new color to work with.
So here I could say BG brand, three hundred. And that works as well. Doesn't look great, but it works. The point is you can customize these color names and mappings as much as your heart desires.
Just remember it's these semantic names inside of AppConfig that a lot of the components use under the hood. So make sure you have them set to something that works for your project. Besides overriding the tailwind colors, you could of course also override any of the tailwind breakpoints. Typically these work fine the way they are out of the box and I don't customize them very often.
you could also set any font that you'd like. The really cool thing, though, is that you don't have to import them yourself. You can simply give their name right here, and then they're used on the page. This is all thanks to the Nuxt Fonts module.
It has multiple built-in providers like Google Fonts, Bunny Fonts, Font Share, Adobe, Font Source, and a few more so that you don't have to do the manual import yourself. Let's make that a little bit clearer here. And I'm going to use Bebis New because that chunky font is very apparently not what we had before. In this lesson, you learned how to override Tailwind colors, map Tailwind colors to Nuxt UI's semantic color names, but you also saw how to create your own colors.
which can be mapped exactly the same as the Tailwind color names. Plus you can customize other stylistic elements at the theme level, such as breakpoints and fonts.