Simon Vrachliotis

Professional Workshop

Multi-Style Tailwind Components

Welcome to the Multi-Theme Strategy Workshop!

In this workshop, we are going to combine two superpowers:

1. CSS Custom Properties, aka CSS Variables
2. Tailwind's JavaScript Plugin API

These are the two key ingredients that will let us build a comprehensive CSS-only theming strategy.

We'll start with a little primer on CSS variables, and then jump right into building our theming implementation.

In this workshop, we will learn how to use CSS Custom Properties and Tailwind's JavaScript Plugin API to build a comprehensive CSS-only theming strategy.

Intro to the Multi-Theme Strategy Workshop

In this workshop, we're going to start simple and build upon our foundation step by step.

We are going to do a lot of copy-pasting of repetitive code, and the first passes will be naive implementations.

The idea is to keep things intentionally simple to start. We'll be improving our code for re-usability as we go.

There won’t be any clever loops or recursion before they're needed, but trust me, they're coming!

This workshop's approach is to start with the basics and gradually build upon them, focusing on fundamental concepts before moving to more robust approaches.

Incrementally Introducing Complexity

It's not required, but since we want to implement the multi-theme strategy to an existing app, it will make it easier to swap colors using the same names.

To create these colors, I've used an online tool called Hue Tone:

We have our three colors ranging from 50 to 900. The numbers in each column are matching for each color shade.

The Accessible Perceptual Contrast Algorithm (

) contrast is displayed, which is the perceived contrast algorithm. For more details on APCA, 

By having numbers that match, colors will retain a consistent contrast when switching between themes.

For now, we aren’t doing any theming at all, but we do have the three color sets extended in 

What we want is to be able to use the same color utility class across all themes. We should be able to find the value of the individual colors based on the current active theme.

To do this, we're going to leverage the power of CSS variables.

We start with definitions for three sets of colors that are extended in the Tailwind config, but they don’t do any theming yet.

Our App’s Tailwind Configuration Starting Point

CSS variables are essential to our theming strategy.

Note that our variable name will only be available within the scope to which it has been defined.

 scope, which is the entire document, so it's available everywhere.

A great feature of CSS variables is they can be redefined within any CSS selector.

But, the second square is currently displaying a teal color.

Your job is to make the second square pink.

 class below, we apply that variable to the 

CSS variables are essential for building a theming strategy. This lesson provides a brief explanation on how to define and consume variables.

Test your understanding of CSS variables by experimenting with different color options and see how it impacts your website design.

Redefining CSS Variables in Different Scopes

A Primer on CSS Variables

So we have these three complete color spreads here:

These spreads are currently using the three colors that we have extended our Tailwind config with:

In the HTML you can see that we are using the color classes 

Your challenge is to apply a primary color to each blank color spread without touching any of the HTML markup:

Here are a couple of tips to help you get started.

First, you'll need to create CSS variables for our primary color shades.

For your convenience here are each of the primary 

You will need to define each of these CSS variables within the 

Before anything can work, you will also need to go into your Tailwind config and extend the 

It is already there, but it is commented out:

Lastly, you need to redefine the "theme scopes" CSS variable for each of the themes. You can figure out what these are by looking at the HTML.

If you've done everything correctly, the blank color spreads should now be filled with the correct primary color shades.

Remember, you can't touch the HTML markup!

One way to challenge yourself when using Tailwind CSS is to try applying colors to elements without modifying any HTML markup.

Scoping CSS variables and extending the Tailwind config file are key steps in the journey to a comprehensive theming strategy.

Creating Multiple Color Spreads with CSS Variables

Create Themeable Color Shades with CSS Variables

We are creating new themable colors, but in the process we've broken support for color opacity.

We have some default Tailwind colors showing at various degrees of color opacity here:

Below those proper colors, we have the same code but using our themable colors.

To understand why it's not working, we need to figure out how opacity is handled.

If you think about it, there is no such thing in CSS as text opacity or background opacity.

Tailwind CSS cleverly leverages CSS variables to compose this opacity within the color.

 is set and it composes the opacity in the alpha modifier.

If we look at a 70% color, it's using the exact same 

This is the same mechanism that we've used with our colors, where we would redefine the color variable within a theme scope.

Here, the opacity variable is redefined when we apply a 

This is super clever, and Tailwind CSS is full of these CSS variable composition techniques under the hood.

In multi-theme colors that we've implemented, let's see what happens if we hover over the primary background color:

 variable, It just applies the CSS variable as the background color.

 doesn't use that variable at all, it doesn't work.

Nothing is going to change when the class is applied:

When we define colors as CSS variables, all we give Tailwind is the variable name, which is a placeholder that can contain any value:

Tailwind is not able to extract the RGB channels from this.

Instead of defining colors as hex values, we are going to want to convert them to 

Your job is to transform the hex values into individual 

 channels! Literally a string of “R G B”.

After you've done the transformation, in the config file you will be able to compose the RGB channels with Tailwind's 

The themeable colors have broken support for opacity. Converting hex to RGB channels is a key step in fixing it.

Explore converting a hex value into RGB channels, and how they can be composed with <alpha-value> in order to support opacity in Tailwind themes. 

Compose RGB Channels with alpha-value for Opacity Support

Implementing Color Opacity with CSS Variables

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.

What if we want to support theming in another project using Tailwind CSS? Do we repeat this process for each new project?

With the plugin API you can author your CSS with the full power of JavaScript, and reuse functionality across your projects!

 file we start with an empty plugins array:

 to create a simple plugin that generates the following CSS:

Once the plugin is created, you’ll need to pass this plugin to the 

If the plugin is injecting styles like it should, we'll have a heading with a paragraph below that is all uppercase.

Here’s what the starting point looks like:

The Tailwind CSS plugin API allows for sharing functionality between multiple projects, making it easier to reuse code and streamline development.


We will use the addBase function from Tailwind’s plugin API to inject styles into our base layer and apply our uppercase text transformation to the body.

Building an Example All Caps Plugin for Tailwind CSS

Improve Your Developer Workflow with Tailwind CSS Plugins

Now that we have the plugin working, let’s move our theming strategy into it.

For this challenge, you're going to take the CSS variable declarations in the CSS file here:

Then, you will move the declarations to the config file inside our plugin, replacing the 

We can advance our theming strategy by taking the CSS variable declarations out of the CSS file and move them inside our plugin.

Let’s move all of the CSS variable declarations being injected into our base layer from a CSS file into a Tailwind CSS plugin with help from some tools.

Transform CSS into CSS in JS for use in a Tailwind CSS Plugin

Moving CSS Variable Declarations into a Tailwind CSS Plugin

Let's move our Tailwind plugin to its own file and improve the way we define colors in our themes.

We are now importing the plugin into our Tailwind config file:

And now we can pass the plugin we've imported into the 

Now if we look at the plugin file, we can see that we are defining our 

 colors as hex values, but then we export colors as RGB channels.

This isn’t ideal since we had to manually convert our hex values to these RGB channels.

Let's improve this by creating a function that will convert our hex values to RGB channels.

 that takes a hex value, converts it to RGB using a library called 

, and then uses a template literal to format the channels into a string:

You need to take all of the RGB channel values in our 

Don't worry about code duplication. We'll sort that out later.

Just focus on making the transformation from hex to RGB.

Manually creating RGB channels is tedious. Let’s create a function that converts hex to RGB channels and use that instead.

We're going to use our multi-cursor skills to refactor our plugin code to use our getRgbChannels helper function to get values from our themes object.

Replacing Hardcoded RGB Channel Values with Function Calls

Convert Hex to RGB with JavaScript

Let's just do a bit of code refactoring to get rid of some duplication before we keep going.

We're reading the values of our themes object here:

Which is an improvement over RGB channels.

But we still hardcode the name of the themes: 

Your challenge is to do some refactoring to remove duplication.

 scope as is, but for our three theme scopes you will need to iterate over the 

Here are a couple of hints to help you get started:

Currently, we hard-code the names of the themes in our calls to getRgbChannels. Let's refactor to iterate over the themes object instead.

We can use Object.entries to iterate over the theme object and call addBase with each theme so that we don’t have to manually set each variable.

Dynamically Adding Themes through Iteration

Refactoring to Remove Hard-Coded Theme Names in Tailwind Plugin

Before we continue making our plugin more dynamic, let's consolidate our code concerns in one place.

We have a plugin file where we define the CSS variables for the 

Inside the Tailwind config file, we extend the 

 to create new utilities that consume those CSS variables:

These two parts share the same concern and work together on the same thing.

It turns out that we can offload the responsibility of extending the user's theme to the plugin itself.

Your challenge is to find a way to extend the theme from within the plugin definition, allowing us to get rid of the 

With this change in place, the only thing in the config file will be requiring the plugin.

We can consolidate our code concerns by moving the responsibility of extending the user's theme to the plugin itself.

Configure Tailwind to Extend Themes via Plugin

Consolidating Code Concerns into a Tailwind Plugin

Our plugin is not yet complete, but it does already contain all the necessary theming functionality.

It is a good time to test it in a real application to see the results of our work.

We will be using a calendar app where users can select days and see the availability on the right. They can confirm a convenient date and submit a form to receive a confirmation screen:

The background, calendar days, and buttons all follow the brand color.

Our theming strategy will be used to swap this brand color.

Currently, everything in this app is using the indigo color site-wide. We want to replace this with our primary themeable color.

If we open open our Tailwind config file we'll see that we are using a couple of plugins:

 is a fancy CSS variable composition technique which is what creates a nice animated background stripes pattern.

 extends the width with a mathematical equation and that width allows us to set the perfect width for the ribbon in the top right of our window.

 plugin is code that we wrote in the previous lesson. This code sets up the CSS variables for different scopes, and extends the Tailwind CSS theme colors.

Your challenge is to replace the site-wide indigo color with our primary themeable color.

Your first step is to open the Tailwind config file and require the the 

 plugin, which should then be added to the plugins array.

Once you've registered the plugin, start your first conversion on the split background pattern where the indigo is being used on the left:

In the components folder you will find the file, 

. Inside of which you need to do the following:

Once this is working, you can move on and replace every instance of 

When you’ve replaced all of the instances, open up 

Uncomment this component and see what happens to your app!

Remember our themes are nestable and you can override a theme within another theme.

Just for fun, maybe try to replace one component with a different theme by adding a data attribute to that component.

Take the plugin for a spin on the challenge page!

Our goal is to replace the indigo brand color of a real calendar app with our primary themeable color using our plugin.

Let's improve the design and functionality of our calendar application by integrating the multi-theme component we created.

Refactoring a Calendar App to Use the multi-theme Component

Testing The Multi-Theme Plugin by Replacing the Site-Wide Color in a Calendar App

It’s time to make our plugin seriously dynamic, including the ability to support nested color theme objects!

In preparation for that, a tiny change has been made to the plugin. Instead of defining the themes directly in it, we are now importing a 

This change makes our code slightly more complex than before. We still have our 

But, as you can see, there's nested properties like 

We need to write code that can support this nested structure.

Let's look at some changes that have been made to the plugin.

Recall that we used to access the shade numbers directly off of 

The same has been done for the theme scopes.

Everything else is exactly the same as it used to be.

Your job is to write a helper function that takes the 

 object as an input, and then outputs the correct CSS in JavaScript syntax object.

Deeply nested values should have the kebab case key name like 

If you write the function correctly, you can replace the entire object in the 

While this is more of a JavaScript challenge rather than a Tailwind-specific challenge, this work needs to be done in order to really help make the plugin reusable.

If you can't figure it out, it's not the end of the world. Just try for a bit, and then move on to the solution.

Test your JS skills on the challenge page

Let's write a helper function that takes a theme object as an input and outputs the correct CSS in JavaScript syntax object, even for nested data.

We can dynamically create CSS variables by writing a recursive function that builds kebab case variable names from nested theme objects.

Create CSS Variables from Theme Objects with Recursion

Dynamically Generate Colors From Nested Theme Objects

Here is a fancy bit of UI that pulls from the Tailwind config file and outputs a color swatch for each themeable color generated with the CSS variable:

getColorUtilitiesWithCssVariableReferences

This function needs needs to output an object that replaces the hardcoded 

This is similar to the previous approach we've taken. Don't worry if it's a little bit over your head, struggle for a bit and then move on to the solution.

With help from a JavaScript function, we can create an object that replaces the hard-coded color shades in our multi-theme plugin.

Dynamically Define Theme Colors In Your Tailwind Config

Write a Function That Replaces Hard-Coded Theme Colors

The last thing that is hard-coded in our plugin is the way we're passing the themes.

In our multi-theme plugin we are currently importing the 

 and then using it with our magic dynamic stuff.

 outside of the plugin, and get rid of the import.

Then you’ll need to update the Tailwind config file to pass the 

So your challenge here is to get rid of the 

 to the plugin in your Tailwind config file where the plugin is registered.

We’ll figure out how to pass options to a plugin so that users can provide their own themes to our plugin. 

The .withOptions method enables configuration options within our plugins, providing a more flexible experience for developers.


Level Up at Tailwind CSS

Multi-Style Tailwind Components

Tailwind Multi-Theme Strategy