In this workshop, you’ll learn the best way to create & manage multiple Tailwind-powered style variants for your UI components.

Tailwind CSS’s Just-in-Time engine does not support dynamic class names. This leads to overly complicated conditionals and nested ternary statements that are hard to keep track of – and even harder to add new variants to ????

Throughout this workshop, you will build and practice a repeatable process for identifying, refactoring, and implementing dynamic Tailwind CSS style sets.

Topics we will cover

This workshop is separated into three sections: working with buttons, modals, and refactoring the calendar demo app from the Multi-Theme Strategy Workshop. These sections build on one another, exploring different angles for defining and maintaining your component style variants.

• Creating dynamic size, shape, and color variants for increased flexibility
• Customizing the Tailwind IntelliSense Plugin for VS Code to enhance your development workflow
• Implementing an async-ready accessible Modal with configurable animated transitions
• Refactoring complex conditional logic into discrete states

By the end of this workshop, you will:

– have the ability to extend your UI components to support multiple style variants using Tailwind CSS.

– be comfortable defining and executing a repeatable process to refactor complex component styles into a cleaner, more maintainable code structure.