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

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

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 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

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

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

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

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

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

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

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 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

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

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

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.


Enable and Validate Plugin Configuration Options

Determine How to Pass Options to a Plugin

Great job! You've finished the multi-theme strategy module. Tailwind plugin API has so much more to offer. Keep exploring the possibilities of theming.

Professional Tailwind Workshops

Tailwind Multi-Theme Strategy

Multi-Style Tailwind Components