Large Tailwind Components — What to do About All Those Classes

Tailwind is an amazing library for writing styles, which gained a lot of popularity lately. I love to work with it, but also see some potential pitfalls when creating bigger components — for example as part of a design system, that has a lot of different variants of one component.

Think about a button that can be a primary, secondary, destructive button and even has a disabled and loading state for all these 3 variants. The classnames you add with Tailwind can become quite messy when building such a component. But not anymore! A few weeks ago I came across a library called Class Variance Authority (CVA), which adds a similar API as Stitches brings to Tailwind. In this video we dive into CVA and see if this makes writing bigger / complicated components any better.

👀 Timestamps
00:00 - Intro
00:57 - How I solved this in CSSinJS (Stitches)
01:53 - Combining multiple variants, compound variants – as used in Stitches
02:38 - Using this principal in Tailwind, with CVA
03:05 - What are we building? Shopify's design system button component
04:33 - Writing this component with ClassNames
07:10 - An even less structured (but still very common) way of writing the ClassNames
08:37 - The risk when using multiple padding ClassNames
11:25 - Creating this button with CVA
17:56 - Adding compound variants, combining multiple variants
19:27 - Discussing a PR I created for CVA with suggestions to improve it even further
21:40 - Comparing ClassNames and CVA as a final summary
23:40 - Outro

💬 Join us on Discord: https://www.frontend.fyi/discord
🐦 Follow me on Twitter:   / frontend_fyi   &   / jeroenreumkens  
👨‍🏫 Check my mentorships: https://www.jeroenreumkens.nl/mentoring

🔗 Source on Github: https://github.com/frontendfyi/youtub...
🔗 Stitches: https://stitches.dev
🔗 CVA on Github: https://github.com/joe-bell/cva
🔗 My PR on CVA’s Github about array variants and negatory variants: https://github.com/joe-bell/cva/pull/66
🔗 Shopify’s button: https://polaris.shopify.com/component...
🔗 Tailwind: https://tailwindcss.com

#react #css #tailwind #cva #classvarianceauthority #designsystems