Loading
Tailwind Multi-Theme Strategy Workshop (16 exercises)
exercise

Consolidating Code Concerns into a Tailwind Plugin

Before we continue making our plugin more dynamic, let's consolidate our code concerns in one place.

We have a plugin file where we define the CSS variables for the :root and theme scopes:

Loading exercise

Transcript

0:00 Our plugin is starting to look pretty good. Before we continue making it more dynamic, let's consolidate our code concerns in one place. Right now, we have our plugin file where we define the CSS variables for the root scope and the theme scopes.

0:13 Then inside the Tailwind config file, we extend the theme to create new utilities that consume those CSS variables. These two parts share the same concern and work together on the same thing. It turns out that we can offload the responsibility of extending the user's theme to the plugin itself.

0:30 Your task in this challenge is to find a way to get rid completely of the theme extension here so that all we do in the config file is require the plugin and instead find a way to extend the theme from within the plugin definition.