Multi-Style Configurable UI Components Using Tailwind

We’ll explore the best way to use Tailwind CSS to style reusable UI components with multiple style variants. You’ll learn how to separate styles into single-concern groups and compose them back together based on the options passed to a given component.

Your new superpower will be the ability to break down complex styling patterns into simple, composable style lookup directories.

The topics that we will cover

Together, we’ll explore how to style multi-variant UI components by:

• Building a Button with composable props for “size”, “impact”, “shape,” and “tone”
• Building an accessible Modal the component that leverages the Headless UI library —again, with multiple composable variant props!
• Refactoring some real-life code to reduce complexity and technical debt.

Here's why you should register for the workshop

By the end of this workshop, you will:

• Understand how to compose multiple style concerns together in a way that works great with Tailwind’s Just-in-Time engine
• Be able to comfortably break down the complexity of component styling composition, leading to simple and scalable Tailwind CSS coding patterns

What to expect from Simon's workshop

This is no boring “webinar” lecture where you watch me talk for 4 hours straight. You’ll be interacting and participating a lot throughout a series of hands-on exercises. We’ll work in small focus groups and spend plenty of time doing Q&A and group discussions. This is where the true value of live workshops is at.

Required experience

This workshop is intended for developers who are already familiar with Tailwind CSS. Familiarity with JavaScript or templating languages is beneficial since we’ll use some programming logic to compose styles together.

Important Note

Depending on the questions asked during the workshop, or necessary changes in the material, the actual content of the workshop could differ from the above-mentioned topics.