Pro Tailwind
Video Workshop →

06. Loop over color themes

🐇 TL;DR

  • We’re using values directly from the themes object
  • We’re transforming HEX values to our R G B format requirement
  • Things are taking shape!
  • Let’s remove a little bit of duplication before we continue

⬇️ Skip to the challenge

🐢 Background

We’ve just removed a manual step by making our plugin accept HEX values.

In the process, we’ve also started reading the color values directly from the themes object, which is a big step towards making our plugin reusable and flexible.

Before we continue, let’s make our code a bit smaller and more dynamic with a simple refactoring task.

🏆 Your challenge 🏆

In the Tailwind Play below:

  1. In the Config tab, iterate over the themes object to dynamically generate the theme-specific [data-theme=""] CSS blocks for each theme.

You’ll find more hints within the Play.

✌️ Good luck!

Start challenge