8 TailwindCSS Classes I Wish I Found Earlier

Рет қаралды 68,840

Күн бұрын

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
TailwindCSS is an amazing tool, and one of the best parts is it's easy learning curve. Type in a style with a tailwind intellisense extension installed, and you'll more than likely find the class you're looking for.
BUT, Tailwind ALSO provides a number of utility classes that go beyond your normal CSS styles.
Today, we'll talk about a number of these classes that I wish I'd found MUCH earlier... okay, plus a few basic CSS options which I somehow never learned until bumping into them with tailwind 😂
#tailwindcss #webdevelopment
📚 Video Links
Source code: gist.github.com/TomIsLoading/...
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: linktr.ee/tomisloading
Portfolio templates: tomisloading.gumroad.com/
0:00 - Introduction
0:11 - Divide
0:48 - Scroll snap
1:31 - sr-only
2:07 - Accent color
2:30 - Caret styling
3:02 - You can do more with gradients
3:38 - Animations
3:56 - Gap, but without gap

Пікірлер: 94

@tomisloading 3 ай бұрын

Are a couple of these kinda just basic CSS? Yes. Did I somehow never know about them until accidentally finding them with TW intellisense? Also yes. Show me a man who say’s he knew you could style input cursors and I’ll show you a liar 👨

@aguywithoutaname 2 ай бұрын

This is one of those videos that I don't think I need until I start watching and then I can't close it. No amount of docs reading would give me this information. You did well man !

@0xAndy 3 ай бұрын

1:31 Instead of sr-only for the buttons, you could add aria-label="the text" which would accomplish the same thing without inserting more nodes into the DOM.

@tomisloading 3 ай бұрын

Very true! I like sr-only when I want to also show the text at specific break points, essentially as an alternative to display none. Also useful for text that’s ACTUALLY only for screen readers, or things like custom toggles/switches/checkboxes

@8YEight 3 ай бұрын

A sr-only text should be preferred over an aria-label whenever possible. Screen reader software is not required to support the ARIA standard so there’s an always a risk that these attributes are not supported.

@rahulxcr 3 ай бұрын

Loved the video. Very helpful classes.

@farizsofyan 3 ай бұрын

I just discovered gradient last month and i got mindblowing, how cool implementation is it 🤯 The other thing i discovered was custom class to assign new css variable

@Blade_Dhruv 3 ай бұрын

absolutely time saving and informative

@ppcalpha1042 3 ай бұрын

you have the best videos dude!!!

@mdmnbp1183 3 ай бұрын

Ur good at explaining, will watch the video later thanks

@madukomablessed4712 2 ай бұрын

Didn’t know about divide and scroll snap, nice one

@Deus-lo-Vuilt 2 ай бұрын

Thanks , I love Tailwind ❤

@Ony3dika 3 ай бұрын

Absolutely love this video, will mostly likely be using the space between property a lot!

@tomisloading 3 ай бұрын

It's SO useful :)

@gadoosher 3 ай бұрын

Hey@@tomisloading ! This was a killer video, will definitely be checking out more of your stuff. What's the benefit of space between as opposed to using gap? Cheers!

@tomisloading 3 ай бұрын

@@gadoosher Just that you don't have to add flex or grid! Generally advised to use gap for complex use cases though. Space between essentially just adds margin to all but the first element in the group. Wrapping elements and grid won't play well with space

@gadoosher 3 ай бұрын

oh doi lmao. Good call 😅@@tomisloading

@Seeking_Solace 3 ай бұрын

I honestly don't get the point. Why not just use gap?

@loground 3 ай бұрын

legend, love your videos

@prateek5668 3 ай бұрын

Very Helpful!!!

@CodeWithSasha 3 ай бұрын

Thanks! Great video

@mdmnbp1183 3 ай бұрын

gaps classes are so useful 👍

@Harmxn 2 ай бұрын

space is a big one. I was always making Flex boxes and adding a Gap.

@AzirChai 2 ай бұрын

Hey! Nice video! Learned alot, also for the example with the accent color box thing, you used "h-8 w-8" thats totally fine, but you can use "size-8" its the same but both in 1, its handy for boxes / squares / circles, just wanted to mention it! Nice video again!

@tomisloading 2 ай бұрын

WOAH I did not know that!!! If ever make a follow up to this video, I’ll be adding this 😂

@wyndmill 3 ай бұрын

this is a great video your pacing is perfect

@tomisloading 3 ай бұрын

THANK YOU! Feel like I finally found the right balance of not completely blabbering and actually explaining what I'm doing 😂

@chiroyce 3 ай бұрын

Small world we live in!

@bhavishs5830 3 ай бұрын

This is awesome

@itzzRaghav 3 ай бұрын

Great video

@deatho0ne587 3 ай бұрын

Tailwind is CSS in the DOM, just like inline styles. Issue I see is the graident you have at 3:34 most likely would be in more than one place in your project, so just make a CSS class for it.

@ChristoferGBG 3 ай бұрын

It's beyond insane that anyone with more the six months experience of frontend would even consider tailwind. As you say, inline styling

@deatho0ne587 3 ай бұрын

There are reasons for it, just like there are reasons for Bootstrap. I personally like most projects to have their own CSS that is a cross of Bootstrap, Tailwind and others. Most of time it is compent level (bootstrap) but when you need a slight variantion (tailwind) there should be a few in the repo that everyone can use.

@thecoolnewsguy 18 күн бұрын

@@ChristoferGBGnah it eases development and have many pre made classes

@zerosandones7547 3 ай бұрын

what. does divide (in 0:45), work with table rows as well?

@ronitgurjar5747 3 ай бұрын

Oh 🔥🔥🔥hey Tom, i see the loading family has grown quite big🔥🔥🔥 congrats man🗿🍷

@tomisloading 3 ай бұрын

Thank you!!! A bit more every day 😁

@Deus-lo-Vuilt 2 ай бұрын

Thanks , Tailwind ❤

@HamadAbdulla_7 3 ай бұрын

Thank you

@joshua_226 3 ай бұрын

Shiiiee this is f-ing cool

@lollery3253 3 ай бұрын

what font are you using? looks good!

@tomisloading 3 ай бұрын

Poppins! :)

@352Pking 3 ай бұрын

Violet600:wave: buying purple partyhat

@tomisloading 3 ай бұрын

Comment of the year

@hichambronson6533 3 ай бұрын

Sr-only is too hacky, why add a whole span element and hide it? You can just add an aria-label to those buttons, which is considered best practice.

@DarlantenCaten 2 ай бұрын

Its just an example. There are many valid cases where an element is useful only for screen reader users.

@bozzhik 3 ай бұрын

yo very good video

@a7mdbest15 3 ай бұрын

ok, i only know the space between, every thing else is just new to me

@itsdrvgo 3 ай бұрын

I only knew about space-x/y... XD

@doren_dev 3 ай бұрын

Cool

@bipinthomas6695 3 ай бұрын

please make the playlist

@Patrick-pu5di 3 ай бұрын

as someone who doesnt use tailwind everything about this looks fucking insane like....WHATT!!

@thecoolnewsguy 18 күн бұрын

I was also like this but once you get used to it, you'll become addicted

@joshuadeguzman2911 Ай бұрын

What about the peer?

@RikasMohomed 3 ай бұрын

Thanks

@tomisloading 3 ай бұрын

Happy to help!

@godofwar8262 3 ай бұрын

I am also a noob who doesn't know these features 😂 and also please make a video on best practices of tailwind css in code means a beginner level to pro level real example

@tomisloading 3 ай бұрын

I've been coding for ~6 years and somehow JUST FOUND OUY CAN STYLE THE CARET OF AN INPUT?!?!? Amazing 😂

@jkibble98 3 ай бұрын

@@tomisloading to be fair it's still relatively new. There are tons of newish well supported CSS features which most people don't know. The discoverability of these is a huge reason people love Tailwind

@fmgthoryt8859 2 ай бұрын

2:23 instead of w-8 h-8 use size-8.

@moneyfr 3 ай бұрын

i made a tailwind killer with unocss can i send to you ?

@thecoolnewsguy 18 күн бұрын

But it hasn't killed tailwind yet

@moneyfr 18 күн бұрын

@@thecoolnewsguy try you ll

@nathnaelgetachew7379 3 ай бұрын

What i want to know is how to order my classes😢

@tomisloading 3 ай бұрын

Prettier plug-in for tailwind does it automatically :)

@Munch_92 3 ай бұрын

Webdevsimplified quite simply robbed your video champ.

@tomisloading 3 ай бұрын

Hahaha he seems like a good dude, I’m sure he didn’t take it 🙂 And we’re all just trying to share knowledge out here anyways, he’s got 150x the audience I do, if he can help 150X the people that’s fine with me!

@guuhuu1337 3 ай бұрын

"I Wish I Found Earlier" - just open the docs

@aiyazmostofa1501 3 ай бұрын

You have read the docs of every library you have ever used?

@temitopedavid9508 3 ай бұрын

Ungrateful guy

@tiagocerqueira9459 3 ай бұрын

Do you check every item in amazon when shopping?

@lufenmartofilia5804 3 ай бұрын

@@aiyazmostofa1501to be honest the docs of tailwind is small and easy to navigate

@invinciblemode 3 ай бұрын

@@aiyazmostofa1501yes I do

@Hadi-gd7ul 3 ай бұрын

Remember kids, stay away from margin, always use padding or gap

@troublesum 3 ай бұрын

why?

@Hadi-gd7ul 3 ай бұрын

@@troublesum just don't, you're welcome

@paragateoslo 3 ай бұрын

Depends. If you want even spacing use gap, if you need different use margin.

@hoorahforsnakes 3 ай бұрын

What terrible advice. Gap only applies to flexible element layouts, and also has some drawbacks in niche scenarios that i won't get into the specifics of. And padding applies the spacing in the inside of an element instead of the outside, which will cause issues if your elements have backgrounds or borders

@Hadi-gd7ul 3 ай бұрын

Also remember kids, always use flex@@hoorahforsnakes

@thatanimeweirdo 3 ай бұрын

Good video, but by god do I hate tailwind

@tomisloading 3 ай бұрын

Hahaha, I know it’s tough to look at at first, but it’s amazing once you get over your first reaction to it imo!

@thatanimeweirdo 3 ай бұрын

@@tomisloading I've used it for about a year in an existing project, it's just something where the cons outweigh the pros for me, even when understanding all the concepts and knowing all the utility classes. I did however apply tailwind's concept of color variables since then (primary-50 to 950 and so on), so there was a net positive learning it and getting familiar with it in a professional level.

@tomisloading 3 ай бұрын

@@thatanimeweirdo haha fair enough! The color system is super nice for sure :)