Multi-Theme Tailwind 16 exercises

Configure Tailwind to Extend Themes via Plugin

In the Tailwind config file, we remove the entire theme object:

module.exports = {
content: ["./src/**/*.astro"],
// REMOVED theme object
plugins: [multiThemePlugin],

This will cause the code to break.

Over in the plugin file, the plugin function accepts a config object as se

Loading solution


0:00 In the Tailwind config, I will cut the whole theme object. It's saved in my clipboard. I will hit save, which will break everything. In the plugin file, if I hover over the plugin function, you can see that it accepts a second argument, which is a config object. Our first argument is this function here that goes all the way to here.

0:21 If I have a comma, this is where I can pass a config object. Our config is the whole Tailwind config object. I can paste the exact same theme extension that we were doing in the config file. When I hit save, everything will come back to place. With a simple copy-and-paste effort, we've done something significant here.

0:40 Our plugin file is doing all the wiring for our theming strategy. It defines CSS variables and extends the theme object. In our config, all we do is import the plugin and require it in our plugin's array. Everything is contained inside the plugin, which is a huge milestone. Our plugin is not completely dynamic yet, but it's self-contained. We can technically use it on another application right now.