Setup TailwindCSS in create-react-app

Extend your TailwindCSS Colors using CSS Variables for your Themes

Create a ThemeContext to access the theme in your React Applications

Theming using TailwindCSS and CSS Variables

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.

Course

Theming using TailwindCSS and CSS Variables

Extend your TailwindCSS Colors using CSS Variables for your Themes

Share this video with your friends