03. Tailwind plugin "Hello World"

🐇 TL;DR

• Our code works, but is not re-usable
• We’re working in multiple files
• Let’s consolidate this into a Tailwind CSS plugin!

⬇️ Skip to the challenge

---

🐢 Background

We’ve laid the foundations of our theming strategy. But we can probably improve our developer experience here.

We’re defining our CSS variables in a CSS file. And 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.

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.

---

The Tailwind Plugin API

And that’s the Tailwind Plugin API.

Tailwind CSS offers a powerful Plugin API that lets you author CSS with the full power of JavaScript. It also allows you to reuse functionality across projects.

This will allow us to do all our theming work in one place, too!

Here’s the relevant page from the Tailwind CSS documentation website.

Before we port over our theming strategy, let’s build a super simple “Hello World” plugin. Just to verify that it works.

---

🏆 Your challenge 🏆

In the Tailwind Play below:

1. In the JS tab, require the plugin function from tailwindcss/plugin.

2. Use that function to create a simple plugin that generates the following CSS:

   body {
     text-transform: uppercase;
   }

   You’ll need to write your CSS using the CSS-in-JS object syntax!

---

✌️ Good luck!

Start challenge