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.