Multi-Theme Tailwind 16 exercises

Redefining CSS Variables in Different Scopes

The solution is pretty simple.

In the .square--pink class, we redefine the --color variable to the deeppink color:

@layer components {
/* ... */
.square--pink {
--color: deeppink;

Now, the second square is pink:


Loading solution


0:00 The solution is pretty simple here. All I had to do is in the square--pink class, redefine the --color variable, and assign it the color of deeppink, and now the square is pink. Pretty straightforward, right? This CSS variable scoping is a foundational piece of our theming strategy, so I need to make sure that you're comfortable with it.