Advanced TailwindCSS Techniques You Have To Know?! [8 concepts]

In this video we cover 8 of the more advanced TailwindCSS concepts that will help you really maximise your utility with the CSS framework. These include hover & group hover, psuedo elements, screen sizes (breakpoints), custom inputs, dynamic inputs, animations, grid & flex and hidden vs inline.

#webdevelopment #programming #coding #tailwindcss

🔗 Resources

🔥 Get More Content - Subscribe and click le notification bell to stay tuned for all the fun & exciting tutorials to come!

📚 Chapters

00:00 Introduction
00:44 Group hover
03:47 Psuedo elements
06:41 Breakpoints
08:51 Custom inputs
10:52 Dynamic inputs
14:20 Animations
16:45 Grid vs Flex
18:19 Hidden elements

🔖 Topics Covered

- TailwindCSS
- React
- CSS styling
- Advanced TailwindCSS techniques

[exempt]

Instead of 'justify-center' and 'items-center' you can use `place-items-center` which combines those two classes.
Same with 'w-10 h-10' you can use 'size-10' to combine them too.

[rishavsharma]

I recently found about the "group" class and oh man your video refreshed the concept. Now, it's printed in my brain. Loved to learn and refresh knowledge about other concepts.

Thanks a lot Smol

[shahzaibkhan]

Awesome ! Sir, you just cleared our doubts. Thank you very much sir 🎉

[Noam-Bahar]

Breakpoint tips: in addition to the regular default breakpoints that work as a min-width, you can prefix them with max- to negate them.
For example, the following two styles do the same thing:
flex flex-col md:flex-row
flex max-md:flex-col
(flex-row is the default so no need to specify it)

Arbitrary custom breakpoints: regular min-width breakpoints are written like this
min-[123px]:
And max width is self explanatory
max:[987px]:

Though sometimes it's better to add custom breakpoints to the Tailwind theme config

[sukritsaha]

I think it's better to use twMerge() from tailwind merge for dynamic/conditional classes instead of using template strings.

[williamhorn]

you're actually goated for this. one of the most helpful tailwind videos out there, i'm not even kidding.

[its.mad_mad]

watching this 15 mins before an interview, its a good refresher video, thanks!

[hiryuimajin]

I was afraid to use tailwind because I was so used to scss and now I cannot look back! This refresh video is amazing and the simple concepts of it are nice! Thank you

[nmquyet]

group hover blows my mind 🤯, thank you

[Noam-Bahar]

Man, I really wish that Tailwind pseudo classes and pseudo elements had an option to group all of its classes without typing the selector every time, kind of like this
before:[absolute bg-green-300 w-full]
Or
md:[grid-cols-3 text-lg]

instead of the current
before:absolute before:bg-green-300 before:w-full
Or
md:grid-cols-3 md:text-lg
Great

[genshian]

Loved the format of this video! Keep these coming. You got a new subscriber!

[labnol]

That's a very useful video. Thanks!

[Pareshbpatel]

Some great advanced TailwindCSS techniques, beautifully demonstrated. Thanks.

{2024--05-19} - Subscribed!

[committingchanges]

Incredible tutorial! Thank you and keep it up :)

[mengzor]

Neat, never heard of the animate functions before

[mauriciocamacho]

Awesome content! Keep it going! 🎉

By the way, which is the VS Code theme you're using?

[ralify]

Nice to know about the group stuff! What I'm missing here is the @apply, which you can use, to keep everything not inline and wrap it in a class that you can reuse

[jingli]

thx for sharing, learned a lot, a quick question, why space for dynamic inputs?

[ozhclje]

before and after is not working in my tailwind can you help, bro ?

[golfgrab]

you missing something very basic. tailwind extension that suggested classname 😊