In this lesson, let me clarify a little bit further what these semantic colors are really good for. Number one, they provide some great color styles that are used under the hood by components without us having to pass in any color values ourselves. For example, the U navigation menu sets items within that navigation menu to the primary color when they are selected. However, we can also customize this color with the color prop.
A lot of components take this prop, and you can pass any of those semantic colors to it. One use case you'll be using this for all the time is with buttons. Here is a button component that powers this plus button in the top right hand of our page. Notice it also takes a color prop.
And we can give it any of those semantic color names as well. But let me show you one more really cool trick about these semantic classes. That is, we can even add our own custom ones. So let's add one called Tertiary and map it to Tailwind's pink color.
If we go and try to use that as a color now, it doesn't show up in the TypeScript autocomplete. So there's one more step left for us to do. Inside of Nuxt config, under UI, and then theme, and colors, we should add our new tertiary color. Back on the button, press control space bar, and there's tertiary.
On the page, we get the pink. Unfortunately, this unregisters the default semantic names. So we'll also need to add in all the defaults to this array. Perfect.