React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Cascading Style Sheets bring order and beauty to our applications.

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

Horacio Herrera

Course Content