In this lesson, we'll set up a create-react-app (CRA) project from scratch with TailwindCSS. We'll delete unused default files and configure the minimal needed requirements for our application to get all the benefits of using TailwindCSS.

Setup TailwindCSS in create-react-app

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.

Extend your TailwindCSS Colors using CSS Variables for your Themes

In this lesson, we are going to create a Custom context for our theme called `ThemeContext`. Using context for our theme is a simple and clean way to make the theme value accessible to all your application using React. You will also learn how to create a custom hook to access your context values within your app components.

Theming using TailwindCSS and CSS Variables

Instructor

Course Content