8 TailwindCSS Classes I Wish I Found Earlier

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

🔗 My Links

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

[tomisloading]

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 👨

[xAndy]

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.

[deathone]

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.

[re.liable]

I also just recently discovered "divide width" and "space between". Unfortunately they conflict with my preference of elements managing their own borders and margins (and paddings) so I haven't been able to use them as much. Definitely handy with elements I do not "own" though (e.g. injected)

[Onydika]

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

[rahulxcr]

Loved the video. Very helpful classes.

[CodeWithBehram]

learned alot pf new features today thank bro and more power to u❤

[madukomablessed]

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

[Harmxn]

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

[mdmb]

Ur good at explaining, will watch the video later
thanks

[farizsofyan]

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

[wyndmill]

this is a great video your pacing is perfect

[DMZT_dhruv]

absolutely time saving and informative

[Pking]

Violet600:wave: buying purple partyhat

[hichambronson]

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.

[zerosandones]

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

[michelemoneywell]

Liked and subscribed. Thanks for the info. I will check out your other stuff.

[ronitgurjar]

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

[Patrick-pudi]

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

[AzirChai]

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!