TailwindCSS Is Ugly. Here's How To Deal With It.

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev I'll be the first to admit that TailwindCSS can get a bit ugly as it scales. You get used to it in time, and most people will eventually find that it's actually pretty great having all of those class names colocated with your markup. That said, there are some things to know about how and when you'll want to start breaking up all of that code, as well as some ways to deal with it as it scales. 📚 Project Links Docs on multi-cursor: https://tailwindcss.com/docs/reusing-styles Tailwind Merge: https://github.com/dcastil/tailwind-merge CVA: https://cva.style/docs Buttons shown: https://www.hover.dev/components/buttons Cards shown: https://www.hover.dev/components/cards Dopdown shown: https://www.hover.dev/components/links 🔗 My Links TikTok: https://www.tiktok.com/@tomisloading Instagram: https://www.instagram.com/tomisloading/ GitHub: https://github.com/TomIsLoading Twitter: https://twitter.com/TomIsLoading Discord & more: https://linktr.ee/tomisloading Portfolio templates: https://tomisloading.gumroad.com/ Website: https://www.hover.dev Timeline: 0:00 - Introduction 0:07 - You just have a long class names 2:20 - Duplicated class names in the same file 3:54 - When you decide to make a component 6:20 - When that component needs variants