Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev
TailwindCSS is, in my opinion, the simplest, easiest to maintain, most scalable way to handle styling.
Today we're not only going to learn the basics (you can learn those in about 5 minutes on your own), but all of the advanced tips I've picked up over a few years using Tailwind.
If there's anything I haven't covered in this video that you'd like me to cover, please don't hesitate to ask! I'm happy to do more break downs!
📚 Project Links
Code: https://github.com/TomIsLoading/advanced-tailwindcss-crash-course
Better theming: https://www.youtube.com/watch?v=vIBKSmWAdIA
Why people love Tailwind: https://www.youtube.com/watch?v=Bu1tYaHtaEo
Install: https://tailwindcss.com/docs/installation
tailwind-merge: https://github.com/dcastil/tailwind-merge
class-variance-authority: https://cva.style/docs
🔗 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:23 - What is is and why you should use it
5:17 - Installation
6:14 - My TailwindCSS & React component library
6:59 - VSCode and prettier plugins
8:27 - The basics
12:26 - Modifiers
16:57 - Dark mode
19:22 - Responsiveness
21:11 - Extra tailwind magic utilities
25:03 - Theming
28:14 - Directives
29:50 - Plugins
33:03 - Tooling