Tailwind Multi-Theme Strategy

In this workshop, we’ll explore the best way to support advanced theming beyond just dark mode. Your new superpower will be the ability to bring multi-theme support to any new or existing project using Tailwind CSS.

By the end of the workshop, you will have a fully functional Tailwind CSS plugin that can bring multi-theme support to any project using Tailwind CSS. Your team will be able to reuse this plugin from project to project, saving you hours of development.

Topics we will cover

Together, we’ll build a reusable multi-theme strategy. Step by step.

• Defining colors as CSS variables
• Generate new themable color utility classes
• Create a Tailwind CSS plugin that orchestrates our theming strategy
• Support nested color theme objects
• … and much more!

By the end of this workshop, you will:

• Understand how to use CSS variable scopes to create a theming hierarchy. This is the superpower that makes creating CSS-only theming implementations possible.
• Leverage the Tailwind CSS Plugin API to package all the moving parts of a theming implementation. The Plugin API unlocks the full power of JavaScript to help you generate advanced and reusable CSS functionality.