Learn strategies and patterns for handling multiple style variants with ease in the Multi-Style Tailwind Components workshop!

Multi-Style Components Workshop Welcome

Dynamically generating Tailwind classes is much more flexible and maintainable than hard-coding them, as we'll see when we create different button variants.



Creating Dynamic Button Variants with Tailwind CSS

Identifying and extracting common base Tailwind CSS classes is the first step in creating a more efficient styling process.

Learn how to simplify button styling by identifying common classes and creating a base style for Multi-style Button Component.

Identifying Common Classes

Extract Common Base Classes

Customizing the Tailwind IntelliSense Plugin for VS Code enables helpful features for your Tailwind CSS workflow.

Customizing the Tailwind IntelliSense Plugin for VS Code

Creating a lookup object of every possible variant saves us from adding complicated ternary logic in our component's className.

Learn to extract and combine classes in React buttons for the Impact variant using TypeScript Records and the cx() function.

Dynamic Styling with the cx() Function 

Simplify Button Styling for All Possible Variants

Style lookup objects can be created for every possible variant of your components.

Creating Dynamic Style Variants 

Implement Size and Shape Variants

Changes in scope to modify existing variants and creating new ones becomes much easier with the right process in place.




Learn how to make dynamic buttons with different colors and impact styles by combining the tone prop with the impact variants, using TS and TailwindCSS.





Implementing Dynamic Tone & Intensity Styles

Separating Tone & Intensity Concerns

The Headless UI component library gives as an accessible base for building a modal with multiple style variants for size, tone, and animated transitions.



Improve Accessibility and Usability with Headless UI

The current modal has accessibility and usability issues. Refactoring it to use Headless UI's Dialog component is the first step of this workshop section.

Refactoring to use Headless UI

Convert a Modal to a Headless UI Dialog

Currently the modal has hardcoded contents. In this challenge, you'll update the modal to support dynamic content & buttons, paving the way for multiple styles.

Add a dynamic title and actions to a Modal component using props and conditional rendering in TypeScript

Refactoring for Dynamic Modal Contents

Update the Modal to Support Dynamic Contents

Add support for different modal sizes by implementing new size variants using a size prop and sizeClasses object

Use the size prop to dynamically apply max width container class to the Modal component based on small, medium, or large values

Dynamic Modal Sizes

Add Multiple Modal Sizes

The modal can be updated to allow for different background tint colors.

Add Modal Background Color Support

Implement Modal Background Tints

Use Headless UI's Transition component to create fade-in and slide-in animations for modals on enter and leave. Challenge yourself!

Learn how to use Headless UI's Transition component to animate a modal's background overlay and dialog panel on open and close.

Animating Customize  Modals

Transitioning Modals with Headless UI

Learn how to customize the slide-in animation direction of your modal panel using the slideFrom prop and slideFromClasses object in Tailwind CSS.

Populating slideFromClasses with -translate-y-8, translate-x-8 or translate-y-8 to slide modal from top, left or bottom.

Animate Modal Panel Slide-In

Customizing Modal Slide-In Animation

Adding an animated loading spinner that is conditionally displayed during a simulated async brings a nice touch to the modal interaction.

Conditionally Display a Loading Animation 

Add Support for Async Tasks in the Modal

The Headless UI Transition component supports lifecycle event props that allow for state updates when a transition is completed.

Updating State After a Transition

Currently the modal can be exited during the async operation, which could cause confusion. Disabling this functionality will make for a better UX

Disabling Buttons and Modal Exits While Loading

Improve Modal Behavior During Async Operation

There are multiple possible states for the modal to be in, each with its own associated styling. 

Modal State Management Patterns

This section of the workshop applies what we've learned toward refactoring how styles are managed and applied to the Multi-Theme Calendar Demo App.

Calendar Style Complexity

Identifying the possible states for a calendar day is the first step in managing multiple style variants.

Listing the Calendar States

Identify Possible Calendar States

Creating a lookup object containing the specific states and their associated Tailwind CSS classes will keep code organized.

Create Styles for the Unique States

Porting Dynamic Styles to Specific States

Writing a helper function for determining the current calendar state removes the need for conditional className logic

Implementing the getStyles Function

Apply Styles for a Specific State

The style lookup object approach practiced in this workshop can be applied to any of your future Tailwind CSS projects.

Multi-Style Tailwind Components

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 Themable Color Shades with CSS Variables

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

Multi-Style Tailwind Components

Tailwind Multi-Theme Strategy