Pro Tailwind - Multi-Style Tailwind Components

Pro Tailwind - Multi-Style Tailwind Components

Register & Get access to index
card-2x.png
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.
Author
siriusify
Downloads
842
Views
4,260
First release
Last update
Rating
0.00 star(s) 0 ratings

Latest updates

  1. Bump

    Only a Bump