Multi-Theme Tailwind 16 exercises

Replacing Hardcoded RGB Channel Values with Function Calls

We're going to use our multi-cursor skills once again.

Start with the :root level variables, changing their values to calls to getRgbChannels passing in themes.base with the shade name:

":root": {
"--primary-50": getRgbChannels(themes.base["50"]),
// ...100-800

Loading solution


0:00 We're going to use our multi-cursor skills, once again, here. We'll start with just the root level variables, select all these and go getRgbChannels. We want to reach for the themes object and then the base key. Here, we want to grab the value that is matching the name of the variable.

0:24 Now, I'm going to copy these 10 lines here and the base scope will be exactly the same values. Further down, the rainforest needs to take the rainforest colors. Finally, the last one needs the candy color.

0:39 I will try to save with the base color just to verify that our colors are being set by these. Yeah, you can see the candy now has the base color. When I change this to candy, it's going to take the correct candy color.

0:53 Obviously, there's a lot of repetition here, but we've done something great. We are reading the values from the themes object, which gets us one step closer to allow users to define their own themes object and pass it to the plugin. Then have the plugin read from that theme to generate the correct CSS variables and utility classes.