10 Tailwind Tricks You NEED To Know!

I've been loving to use Tailwind to style my web projects.
This video is a list of the 10 main tips I really wish I knew earlier.
---------------------------------------------------------------
Inquiry and Collaborations:
[e-mail]
---------------------------------------------------------------
Join my Discord:
/ discord
---------------------------------------------------------------
Follow me on twitter:
/ ravicoding
---------------------------------------------------------------
Chapters:
0:00 Introduction
0:12 1 - Peer and Group
1:07 2 - Animations
1:46 3 - Responsive Designs
3:00 4 - Intellisense in Variables
4:04 5 - Dynamic Utilities
5:22 6 - apply and theme
6:19 7 - Extend Tailwind
7:00 8 - Plugins
8:48 9 - Colors object
9:29 10 - tailwind-merge

[@valyy151]

These were one of the most valuable 10 minutes of my developer life!

[@perfectbase]

Wow! Such comments make my day! Thank you for watching!

[@BarDots315]

Damn

[@basedovi]

The tricks are great, no doubt, but common man… I bet your developer life isn't that long 😂

[@jaideepshekhar4621]

The neon shadow and changing the whole look with one word??? I'm officially mind blown!

[@brunobrasil3419]

You are SO GREAT! I can't wait to try out each and every trick you just taught us!! Freaking awesome, Ravi 🤩🤩🤩

[@magedibrahim1405]

This is literally the best Tailwind CSS video I have ever seen! Thank you for your great efforts and keep going! ❤

[@nilsrothe]

I just started to use tailwind a few days ago and this gave me some great ideas to try out.

[@chainsburg]

Than you so much! I was using Tailwind for so long and I never found out about many of these.

[@lil_peepka]

I've used Tailwind for some time now, but haven't heard of most of this tricks. Really usefull content

[@user-vp8id1ze4x]

Video was concide and to the point! Plugin 8 caught me off guard, had to rewatch. You won a sub! Keep the videos coming!

[@dharmilshinde797]

That group and peer hover thing was awesome!!

[@bn5055]

Great video! I use Tailwind all the time but I've never really used custom plugins - the docs aren't great for them. A video or two on them would be great!

[@theworldismine7788]

Do you guys recommend me to learn Tailwind? Does it carry the heavylifting of responsiveness, typography, colors & other design features?

[@bn5055]

@@theworldismine7788 it's important to realise that it's not like, say, Bootstrap, with many components built for you that you can "sort of" customise. It's a giant set of utility classes that helps you build your own designs very quickly, with a sensible sizing/spacing system and a useful colour palette. There ARE components available that use Tailwind (eg TailwindUI, DaisyUI, Flowbite) however. Overall I would say, yes, give it a whirl.

[@ExileEditing]

​@theworldismine7788 yeah what the other guy said. Tailwind doesn't do anything for you (sort of). You're still writing css except in the form of utility classes over stylesheets.

[@lucasduarte7558]

me too, I’ve been using only the basic

[@licokr]

A smooth editing and useful tips. Thank you so much!

[@MmmMmmGood17]

Insightful video! I hope your channel grows to be huge 🙏🏽

[@shobhitumrao]

amazing video, on a project using tailwind, this helped a lot., Thank you !! Looking forward to more such content.

[@kushaljain2206]

Very nice information. Your delivery of the content makes in more better. Looking forward for more software development area videos!Cheers!

[@andreaskarz]

Wow, I'm impressed - especcialy this trick with the color shadows. Thank you.

[@codinginflow]

I love it when tech KZbinrs also have their own startups! I also have a few projects of my own 😊 And the tips in this video were sick!

[@giffarialfarizy7310]

WOW! This video is beyond my expectation 🤯 Thank you, you just got a new subscriber ❤

[@keshavakumar9828]

this is actually so good, been using tailwind for 2 years, learned something new today !

[@lundell_music]

Very valuable tips. Many thanks for this gem of a video. Will be sharing with my team today.

[@stonedizzleful]

Great video mate. The @apply is something I've never used but will in future!

[@buituyen9484]

damn bro. tysm. the custom plugins is so cool, thanks for sharing.

[@FlorinPop]

Great video! Fantastic edit! Well done!

[@nicholasbicholas]

Can't believe it. The first tip in the video is something I was recently racking my brain to figure out and ultimately just solved with js. Thank you! 🙏

[@perfectbase]

Glad it was useful!!

[@_duongductrong]

That tailwind-merge is awesome, thanks for your video help me know that 😍

[@yuritavares1916]

This was you've mentioned on plugins is just like WOW I didn't know Tailwind had such an advanced feature, way more customizable than I thought it was

[@frk_91]

One of the most useful videos about tailwind I ever saw ❤

[@dr.d3600]

Awesome and clear explanation, good job guys!

[@vOnez212]

This was great. Keep them coming!

[@ai_for_good]

Loved it!! Thanks, will start using these asap!

[@ajudmeister]

great video and tricks! Especially happy to know about the group class now! And grats on your channel! I just started one too :)

[@kryptons-galaxy]

This is awesome, I never knew tailwind is this powerful

[@HoyosJuan]

Wonderful video!! Really enjoyed.

[@RobertWildling]

The plugin feature with the neon shadow blew me away! Even intellisense is supported ... just like that! WOOOOW!!!

[@Theruyenable]

Value to time ratio off the roof. Amazing video, saves a lot of time for person starting with tailwind like me.

[@perfectbase]

Glad you liked the style! Will try to make more like this in the future!

[@RegisZaleman]

Great tips! You really help unleash the power of Tailwind. Thanks. You got my sub.

[@alanshabrandi1678]

The tips and design of the video were very, very great. thank you 🌹🌹🌹

[@nhantiny1642]

Awesome tricks man! Thank for sharing and keep it up 🎉

[@art_ik]

Great Video! on the point and no BS. I love it! keep it up :)

[@sathishkannan6600]

Nice tips. I am experienced tailwind user, but I didn't know about using variables to store tailwind classes.

[@suntrop]

That’s not a feature or something like that. You can write them in a comment as well

[@gwemula]

Bro, beautify-made video! Absolutely love the content and your flow. Subscribed!

[@perfectbase]

Thanks!! Glad you enjoyed! ☺️

[@timmcneill5299]

Just discovered Tailwind, and my mind is blown, thanks for sharing

[@jesse9999999]

thank you mate! probably the best youtube tech tutorial i have seen this year, some great tips here

[@perfectbase]

Thanks for such a nice review!! 😊

[@dustsucker4704]

Finally an advanced dev Video not these stuff that every one talks about. Love it.

[@0xAndy]

This is the best Tailwind video I've ever watched. Thank you so much!

[@perfectbase]

Wow, thank you!! 😊

[@CreiwryJay]

A really cool video! I'm a backend developer and generally dislike frontend development, but tailwind has made it more enjoyable for me. Can't wait to try out some of the more advanced tips from your vid!

[@zillboy]

Bro, thank you. I didn't knew so much, have been using tailwindCSS for quite some time, thank you :)

[@poptaim7631]

I just want to say THANKS! Great video!

[@elwoseopenstepcrew1134]

subcribed, amazing short, im going to look all your channel !

[@nikhilev3840]

Great video. Loved it. Keep doing more bro.

[@RishabhxShukla]

Thank you! These tips were incredibly helpful.

[@PedroHenriquedosSantos]

Thank you for sharing your knowledge.

[@lucasduarte7558]

strongly recommend this video, thank you for sharing your knowledge

[@ahmadwahyudi3794]

Thank you, you really helped me. Especially when you talk about mobile-first framework

[@nikhil182]

Absolutely lovely! I was not aware that we could name group/peer classes. It was something new. Also I would like to mention about a VSCode extension which I find useful, called as "Headwind" which sorts the classes enhancing the readablity. Thank you for the video! Subscribed✅

[@elab4d140]

you can do that using the official tailwind prettier sorting plugin

[@nikhil182]

@@elab4d140 Nice, that extension is also worth mentioning.

[@perfectbase]

Thanks for sharing! Yes! I use the prettier plugin as well. Learned it from the T3 stack.

[@Allformyequine]

Luv this! Nice concise but not too long!

[@bryanodinadev]

These are great! I just started Tailwind

[@yanarlexvallejorosas]

Great video on Tailwind, thank you very much.

[@harshitmishra3843]

I appreciate the content and concepts covered in this video.

[@m3coo]

Very, very helpful. Thank you!

[@HeyNoah]

Great video! Thanks for sharing! 🙏🏼

[@tedmcfadden1063]

Very useful content. Great visuals for the explanations.

[@appstuff6565]

halfway into the video and i liked it. Thanks Ravi!

[@appstuff6565]

ended the video..well i understood the first half, still new to tailwind maybe thats why.

[@ozzyfromspace]

Dude, you're awesome! Thanks for blessing the web with your knowledge. Subbed and I'll check out your startup playlist :)

[@perfectbase]

Wow! Thanks a lot for the kind words! Glad you liked it!!

[@crim-son]

So so valuable, I'm saving and sharing this❤

[@cashmoneyz3]

solid video, all the examples were quick and concise

[@learner8084]

Just found this video, and I'm glad I did... subscribed.

[@ns-gabrielmendoza1329]

I didn't know tailwind even had this!Amazing 10 minutes of a developer life!

[@aurorasofie]

Awesome video, thank you! Glad youtube recommended it to me.

[@Q__Q]

i was just wondering how to do peer hover changes and this video showed up good thing i clicked on it, great video thanks for the help

[@khethelogp]

These are pretty cool tips and tricks 🔥

[@nisargjaiswal4264]

Fantastic Videos bro!! Very Helpful and your dedication Towards your channel is just Awesome!! I Learnt new things from this videos, Appriciated. Love From INDIA

[@meriem6099]

Thank you for this video i really learned some useful stuff!

[@draxeris]

Good job man! Learned a lot.

[@simonswiss]

Great tips, great graphics and great editing skills - I enjoyed this video 👏

[@perfectbase]

Thank you for watching! 🙏 Super glad to hear that from a bigger content creator in the space!!

[@shanemshort]

came here from SImon's tweet, really neat! subscribed

[@simonswiss]

@@shanemshort 😎 I subscribed today too!

[@saifullahrahman]

thanks a lot, that second last tip was super usefull

[@pcv-free-as-a-bird]

Really liked the neon shadow

[@mehmatrix]

I love your video and style. Subscribed :)

[@chatwithnayem]

Really awesome. Great tutorial 😮

[@thepolygotcoder]

Thanks Ravi - great Content and I learned alot

[@abdulmuminyqn]

Really interesting tailwind tips! 🤩

[@DavidWTube]

How this is the first I'm hearing of you... great video, got a sub from me!

[@jaitjacob]

nice job with code + live output with black background.. didn’t have to worry of getting flashed with a bright white bg in between!!

[@perfectbase]

Glad you liked it! Thanks for the feedback!

[@krishnendudakshi3452]

hey this is an awesome video. love it. Liked it and subscribed ❤

[@wadecodez]

for #5 you could create a safe list when there are too many options. Safelists are defined using regex so it's pretty easy to include a whole range of classes.

[@chris-pee]

You could also just use a CSS variable, which makes this work with tailwind, without any lists or regex.

[@perfectbase]

Thanks for sharing! Wish I knew this before making the video! But glad I can also learn from you guys!!

[@MerkieAE]

@@perfectbase i was going to mention this as well because i had a very similar situation in one of my codebases! but yeah you can define a class safe list in the tailwind config if you don’t want to define the classes in an unused variable. i’m only halfway through the video though and i’ve learned so many neat tricks! I had no idea about the variable name thing! i’m going to use that instead of really complex string interpolation logic in my components

[@FinnReinhardt-gc9vn]

This was just what I thought! Great video nontheless

[@enversecilmis7627]

@@perfectbase Come on now we know you did this to increase comments :)

[@FSRezende]

great tips... amazing! congrats from Brazil!

[@bhargav1811]

Nice video !! Keep making this!!!

[@jugibur2117]

Wow, really useful stuff, thanks!

[@TrackingAcademy]

This was actually very detailed. I always wondered when I dynamic set the color such as by-{color}-200 and that never gets applied. Now I know why. lol. Thanks

[@MyCodingDiarie]

new subscriber 🖐! love your teaching style i learned a lot!

[@perfectbase]

Thanks for subscribing!!! 🙏

[@fvbixn]

I use tailwind for years and would consider myself an expert, but I still learned a few things! Thanks for the video!

[@perfectbase]

Glad that it’s also helpful for experienced users!! 😊 Thanks for watching!

[@Svetoz]

Thanks! There are nteresing and not obvious tweaks :)

[@creatorsremose]

Really cool buddy! a few "oh shit" moments here, thanks!

[@fantomgaming9018]

watched ur full video it was amazing

[@gillesa290]

Very useful. Thanks a lot 👍

[@codingmickey]

Bro this was the most beautiful, well explained and soo thorough tutorials that I've watched in a while. Truly loved the content ❤ The short explanation, illustration and the real life usage 🫂 Pressing all the buttons to watch more of such!!

[@here2code]

Great content buddy 👏

[@apuji7555]

Great video! I really want to get started with Tailwind, and this was super interesting! One thing to note, your trick #9 would probably flow better if you switch it with #8, because #9 talks about the imports and the theme object, while #8 is a lot more advanced. Great video!

[@perfectbase]

Thank you for watching! And for the feedback! I appreciate it. 😊

[@apuji7555]

@@perfectbase you're welcome!

[@trontrontrontron4]

thank you for this video. actually helpful.

[@Kitety]

I think it is very beautiful, it is so helpful!! Love it.Thx the video

[@adhilameen8200]

Thanks, it was really helpful. 👍