07. Extend theme via plugin

🐇 TL;DR

Our plugin is not exactly dynamic yet
We’re still hardcoding the 50 to 900 color shade keys
But hey, this is a start!
Before we continue, let’s make sure our plugin takes care of all the moving parts

🐢 Background

Our plugin is starting to look good!

Before we continue making our code more dynamic, we should make sure our plugin takes care of handling all the moving parts of our theming functionality.

We’re generating the CSS variables from the plugin, but we’re still creating new color utilities from our config file.

It might be a bit confusing since we’re working in one single file in Tailwind Play. Our plugin code would probably live in a different file in a real project directory.

We can extend the user’s theme directly from within the plugin

The plugin function we’re using to create our plugin can accept a second argument, which is a config object.

That means we can extend or override our Tailwind theme directly from within the plugin, instead of doing it manually in the config as we’re currently doing!

🏆 Your challenge 🏆

In the Tailwind Play below:

In the Config tab, move the code extending the theme object outside of the Tailwind config, and put it inside the plugin function instead.

This is a quick and easy code change, but a significant milestone for our plugin!

✌️ Good luck!

Start challenge