The Advanced TailwindCSS Crash Course

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

🔗 My Links

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

[vdphzhq]

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.

[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"😆

[alelsixx]

css nativo o tailwind, tengo que elegir uno ?

[ricardocnn]

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

[thepromisebenard]

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

[legittutorial]

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'.