Multi-Theme Tailwind 16 exercises

Refactoring to Remove Hard-Coded Theme Names in Tailwind Plugin

Let's just do a bit of code refactoring to get rid of some duplication before we keep going.

We're reading the values of our themes object here:

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

Loading exercise


0:00 I know I've said, "Do not worry about code duplication," but let's just do a little code refactoring before we keep going. We are reading the values of our theme's object here, but we still hard-code the name of the theme's base -- rainforest and candy. In this challenge we're going to keep the root CSS variable definition as is.

0:19 Then for our three theme scopes we're going to iterate over the theme's object. Use a bit of JavaScript to iterate over the three themes. There's a couple of hints in the code comments. Good luck!