The Advanced TailwindCSS Crash Course

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ 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: github.com/TomIsLoading/advan...
Better theming: • The Best Way to Handle...
Why people love Tailwind: • Why People Love Tailwi...
Install: tailwindcss.com/docs/installa...
tailwind-merge: github.com/dcastil/tailwind-m...
class-variance-authority: cva.style/docs
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: linktr.ee/tomisloading
Portfolio templates: tomisloading.gumroad.com/
Website: 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

[@user-vd3ph6zh8q]

One thing I use for responsiveness is for things like instead of needing to add display block to something at certain breakpoints you can do `max-md:hidden` that way it’s just a little less code and tailwind basically treats it in reverse so up to md I want to be hidden rather than starting at md. Also you can omit the _ in the arbitrary values when it’s comma separated like colors, min/max/clamp, etc, the parser can automatically pick up the separator.

[@tomisloading]

Oh cool! I actually didn’t know they supported that haha!

[@user-vd3ph6zh8q]

Also speaking of plugins, I actually created a npm package that allows you to pass in your primitives and helps you create themes for tailwind, essentially creates a custom tailwind plugin for you with your colors/themes.

[@RuiValente]

Great video TailwindCSS works perfectly with my new projects. It's easy to use and, most importantly, makes it easier to center divs and to choose colors and follow the "color rule"😆

[@dr.d3600]

awesome video! great job due!

[@tamerahmed9860]

Amazing as always! Thank you

[@tomisloading]

Thank you so much! 😁

[@prashlovessamosa]

Great thanks buddy

[@ismaeltinta6118]

I love this. thanks for the tips

[@tomisloading]

Happy I can help! :)

[@iamahtic]

Your goated. Keep it up

[@godofwar8262]

Great tutorial 🎉

[@tomisloading]

Thank you! 😁

[@alelsixx6168]

css nativo o tailwind , tengo que elegir uno ?

[@thepromisebenard]

Nice Video Tom. Please what Vscode theme are you using?

[@tomisloading]

Andromeda!

[@thepromisebenard]

@@tomisloading Thanks

[@ricardocnn]

Amazing! It was a pleasant refreshment for me. Could you make a video about tailwind 4 alpha?

[@tomisloading]

Noted!

[@legittutorial4565]

I love tailwind css but don't know why my tutor insisted bootstrap

[@ontheruntonowhere]

Great video. Small, niggling correction: 'leading' at 11:18 is pronounced with a short 'e', as in 'ledding'. Rhymes with 'sledding'.