Скачать с ютуб Large Tailwind Components — What to do About All Those Classes в хорошем качестве

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