The Advanced TailwindCSS Crash Course
Рет қаралды 10,519
Күн бұрын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! 😁
@ricardocnn Ай бұрын
Amazing! It was a pleasant refreshment for me. Could you make a video about tailwind 4 alpha?
@tomisloading Ай бұрын
Noted!
@thepromisebenard Ай бұрын
Nice Video Tom. Please what Vscode theme are you using?
@tomisloading Ай бұрын
Andromeda!
@thepromisebenard Ай бұрын
@@tomisloading Thanks
@alelsixx6168 Ай бұрын
css nativo o tailwind , tengo que elegir uno ?
@legittutorial4565 Ай бұрын
I love tailwind css but don't know why my tutor insisted bootstrap
@ontheruntonowhere 6 күн бұрын
Great video. Small, niggling correction: 'leading' at 11:18 is pronounced with a short 'e', as in 'ledding'. Rhymes with 'sledding'.
Bon Bon Media
Рет қаралды 23 МЛН
Fireship
Рет қаралды 1,3 МЛН
HuXn WebDev
Рет қаралды 21 М.
Ujjawal4u. 120k Views . 4 hours ago
Рет қаралды 10 МЛН
MaviGadget
Рет қаралды 7 МЛН