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

Improve Your Developer Workflow with Tailwind CSS Plugins

We've laid out the foundations of a theming strategy, but we can further improve the developer experience.

We're defining our CSS variables in a CSS file, and then we're generating new color utilities in the Tailwind config file.

It would be nice if we could do both in the same file.

Loading exercise

Transcript

0:00 We've already laid out the foundations of a theming strategy. We can probably improve our developer experience here. We're defining our CSS variable in a CSS file. Then we're generating new color utilities in the Tailwind config file. That would be nice if we could do both things within the same file.

0:16 What if we want to support theming in another project using Tailwind CSS? Do we repeat this process for each new project? Surely there must be a better way. That way is the Tailwind plugin API. Tailwind CSS offers a powerful plugin API that lets you author your CSS with the full power of JavaScript. It also allows you to reuse functionality across projects.

0:37 Here's your challenge for this one. We're going to start creating a plugin. In our config file here, we have this plugins array. You're going to pass here a plugin that will generate the following CSS, target the body tag, and set text transform to uppercase.

0:53 We want this heading tag here and the paragraph to be uppercase as a verification that the plugin is working and injecting the styles like it should. Good luck.