10 Tailwind Tricks You NEED To Know!

Подписаться 12 тыс.

Просмотров 269 тыс.

50% 1

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:
contact@perfectbase.dev
---------------------------------------------------------------
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

Наука

Опубликовано:

14 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 439

@valyy151 11 месяцев назад

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

@perfectbase 11 месяцев назад

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

@BarDots315 11 месяцев назад

Damn

@basedovi 7 месяцев назад

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

@S.P.35 17 дней назад

Absolutely

@jaideepshekhar4621 11 месяцев назад

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

@MyUbuntuVids 21 день назад

I'm pretty much brand new to Tailwind CSS. I've gained a lot of insight on Tailwind CSS from your 10 tips. Thank you! (Subscribed)

@magedibrahim1405 11 месяцев назад

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

@lil_peepka 11 месяцев назад

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

@nilsrothe 11 месяцев назад

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

@chainsburg 11 месяцев назад

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

@brunobrasil3419 Месяц назад

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

@bn5055 11 месяцев назад

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 11 месяцев назад

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

@bn5055 11 месяцев назад

@@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 11 месяцев назад

@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 11 месяцев назад

me too, I’ve been using only the basic

@user-vp8id1ze4x 5 месяцев назад

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

@FlorinPop 11 месяцев назад

Great video! Fantastic edit! Well done!

@m3coo 11 месяцев назад

Very, very helpful. Thank you!

@MmmMmmGood17 11 месяцев назад

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

@giffarialfarizy7310 5 месяцев назад

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

@Theruyenable 11 месяцев назад

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

@perfectbase 11 месяцев назад

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

@kushaljain2206 6 месяцев назад

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

@codinginflow 10 месяцев назад

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

@shobhitumrao 11 месяцев назад

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

@dharmilshinde797 10 месяцев назад

That group and peer hover thing was awesome!!

@keshavakumar9828 11 месяцев назад

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

@nicholasbicholas 10 месяцев назад

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 10 месяцев назад

Glad it was useful!!

@licokr 11 месяцев назад

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

@lundell_music 8 месяцев назад

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

@frk_91 2 месяца назад

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

@gizmo_stuff 11 месяцев назад

Very high quality content

@stonedizzleful 11 месяцев назад

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

@andreaskarz 9 месяцев назад

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

@_duongductrong 11 месяцев назад

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

@jesse9999999 11 месяцев назад

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

@perfectbase 11 месяцев назад

Thanks for such a nice review!! 😊

@vOnez212 10 месяцев назад

This was great. Keep them coming!

@dr.d3600 11 месяцев назад

Awesome and clear explanation, good job guys!

@dustsucker4704 10 месяцев назад

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

@kryptons-galaxy 2 месяца назад

This is awesome, I never knew tailwind is this powerful

@kevinka99 7 месяцев назад

man when I clicked this video I thought would be bullshit tips like the most programmers youtubers do but this video actually has some very good and easy explanation from useful features you really deserved this like and subscription! keep going

@perfectbase 7 месяцев назад

Thank you! 🙏☺️

@mahmoudkhaled3961 5 дней назад

This is amazing. Thank you very much for such valuable information. Keep it up

@ai_for_good 11 месяцев назад

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

@HoyosJuan 11 месяцев назад

Wonderful video!! Really enjoyed.

@0xAndy 11 месяцев назад

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

@perfectbase 11 месяцев назад

Wow, thank you!! 😊

@alanshabrandi1678 9 месяцев назад

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

@appstuff6565 7 месяцев назад

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

@appstuff6565 7 месяцев назад

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

@RegisZaleman 11 месяцев назад

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

@kiliusz 11 месяцев назад

Im glad youtube algorithm suggested me your video.

@Allformyequine 11 месяцев назад

Luv this! Nice concise but not too long!

@poptaim7631 11 месяцев назад

I just want to say THANKS! Great video!

@nhantiny1642 8 месяцев назад

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

@nisargjaiswal4264 11 месяцев назад

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

@art_ik 11 месяцев назад

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

@RishabhxShukla 4 месяца назад

Thank you! These tips were incredibly helpful.

@gwemula 10 месяцев назад

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

@perfectbase 10 месяцев назад

Thanks!! Glad you enjoyed! ☺️

@harshitmishra3843 7 месяцев назад

I appreciate the content and concepts covered in this video.

@nikhilev3840 11 месяцев назад

Great video. Loved it. Keep doing more bro.

@buituyen9484 11 месяцев назад

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

@nikhil182 11 месяцев назад

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 11 месяцев назад

you can do that using the official tailwind prettier sorting plugin

@nikhil182 11 месяцев назад

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

@perfectbase 11 месяцев назад

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

@sathishkannan6600 11 месяцев назад

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

@suntrop 10 месяцев назад

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

@simonswiss 11 месяцев назад

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

@perfectbase 11 месяцев назад

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

@shanemshort 11 месяцев назад

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

@simonswiss 11 месяцев назад

@@shanemshort 😎 I subscribed today too!

@cashmoneyz3 11 месяцев назад

solid video, all the examples were quick and concise

@bryanodinadev 7 месяцев назад

These are great! I just started Tailwind

@meriem6099 11 месяцев назад

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

@timmcneill5299 9 месяцев назад

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

@ns-gabrielmendoza1329 9 месяцев назад

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

@lucasduarte7558 11 месяцев назад

strongly recommend this video, thank you for sharing your knowledge

@thepolygotcoder 7 месяцев назад

Thanks Ravi - great Content and I learned alot

@ajudmeister 11 месяцев назад

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

@draxeris 11 месяцев назад

Good job man! Learned a lot.

@wadecodez 11 месяцев назад

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 11 месяцев назад

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

@perfectbase 11 месяцев назад

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

@MerkieAE 11 месяцев назад

@@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 10 месяцев назад

This was just what I thought! Great video nontheless

@enversecilmis7627 10 месяцев назад

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

@tedmcfadden1063 11 месяцев назад

Very useful content. Great visuals for the explanations.

@khethelogp 11 месяцев назад

These are pretty cool tips and tricks 🔥

@bhargav1811 11 месяцев назад

Nice video !! Keep making this!!!

@crim-son 11 месяцев назад

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

@saifullahrahman 11 месяцев назад

thanks a lot, that second last tip was super usefull

@PedroHenriquedosSantos 3 месяца назад

Thank you for sharing your knowledge.

@zillboy 11 месяцев назад

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

@yuritavares1916 11 месяцев назад

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

@ahmadwahyudi3794 10 месяцев назад

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

@yanarlexvallejorosas 11 месяцев назад

Great video on Tailwind, thank you very much.

@aurorasofie 11 месяцев назад

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

@chatwithnayem 2 месяца назад

Really awesome. Great tutorial 😮

@HeyNoah 11 месяцев назад

Great video! Thanks for sharing! 🙏🏼

@elBorregin256 11 месяцев назад

This is pure gold, i didn't knew any of this, but thanks to you im going to implement all of this into the react site i'm working on

@perfectbase 11 месяцев назад

Glad you liked it!!

@gillesa290 11 месяцев назад

Very useful. Thanks a lot 👍

@learner8084 2 месяца назад

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

@jugibur2117 11 месяцев назад

Wow, really useful stuff, thanks!

@FSRezende 11 месяцев назад

great tips... amazing! congrats from Brazil!

@here2code 11 месяцев назад

Great content buddy 👏

@abdulmuminyqn 11 месяцев назад

Really interesting tailwind tips! 🤩

@trontrontrontron4 3 месяца назад

thank you for this video. actually helpful.

@mehmatrix 11 месяцев назад

I love your video and style. Subscribed :)

@Q__Q 11 месяцев назад

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

@ozzyfromspace 11 месяцев назад

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

@perfectbase 11 месяцев назад

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

@RobertWildling 7 месяцев назад

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

@AdhilAmeen13 11 месяцев назад

Thanks, it was really helpful. 👍

@JoseJavierEspinoza 11 месяцев назад

that was a really great video! ty!

@elwoseopenstepcrew1134 7 месяцев назад

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

@DavidWTube 11 месяцев назад

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

@halftome 20 дней назад

Hey this was very informative, thank you! I love tailwind ❤

@arturamorfati 11 месяцев назад

thank you! great video!🦐

@CreiwryJay 5 месяцев назад

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!