Multi-Style Tailwind Components

Simon Vrachliotis
Simon Vrachliotis
Multi-Style Tailwind Components

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.

Loading price