Extend your TailwindCSS Colors using CSS Variables for your Themes
In this lesson, you will learn how to tell TailwindCSS to create custom utility classes for your Theme colors, using CSS Variables.
We are using CSS Variables because this is one way to get different color values with the same utility class, that way, no matter what theme you are applying to your theme, all colors will be assigned correctly to your App UI.
Another great feature we are using is the function theme that Tailwind give us by default. this function is helpful to get any value from the current Tailwind Theme in your system, and we used it to give value to our custom CSS Variables.
Horacio Herrera: [0:00] Let's go in our index.css file and add some custom CSS variables for our themes. First, we do theme.light, and inside here, we define color-primary with a value of theme('colors.blue.600'). Sorry, it's dot. Let's do the same for theme.dark, but the value is 300.
[0:27] Let's go to our tailwind.config.js file and extend our theme with this new color value. We go to the theme. We add extend. Inside, we do colors, and inside this color, we define our new color, which is going to be primary, and the value will be var(--color-primary).
[0:49] Finally, let's go to our App.js file and start using our new color, so let's add className="text-primary", and also let's define the theme that we want to apply, in this case will be theme.light. With this done, let's go and run yarn start, and we can see that our H1 has the new color that we assigned.
[1:12] In review, we add a new CSS variable called color-primary to our index.css file, assigning different values for both themes. Then, we went to the tailwind.config.js file and extend our theme with our new color called primary. This will tell Tailwind to create all the color utilities with this new value. This is how we get values from CSS variables in plain CSS.
[1:42] Finally, we go to app.css and we use that class in our H1. You can see if we change here to dark, it just makes this more obvious to the change. You see that our color changes depending on the theme that we apply.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!