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 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.
@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.
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.
@@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
For the point 'Dynamic Utilities' there are many solutions to do it with tailwind properly. Solution 1 : you can define a safelist in tailwind config. These accepts wildcard and can easily cover the case you described with "bg-{color}-500" Solution 2 (cleaner) : use cva or tailwindcva to define proper variants. It might be annoying and redundant to write some parts, but it allows you to handle many logics And for the why : I would rather die than have a few part of my code that doesn't rely on my tailwind configuration. If you are working with theme, having one component with hex colors is a big issue.
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! 🙏
Glad it helped! You might also want to take a look at “safelist” in tailwind. It also solves this problem, but in a better way. tailwindcss.com/docs/content-configuration#using-regular-expressions
@5:01 there is also a possibility to include tailwind classes in the theme file, that shouldn't be purged. So there is no need for your unused object ;) i Think it's called safelisting.
Yeah i was dynamically generating few colors in a component and had to specify the safelist pattern as: safelist: [ { pattern: /bg-(gray|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(100|200|300|400)/, }, ],
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!
in the dynamics variable section, I believe you can add the variable names to a safe list in the tailwind config file instead of creating an unused variable
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
in dynamic utilities u can use a map instead with the color been the key and the value is the tailwind class i.e: const CLASS_MAP = { 'green': 'text-green-500', 'orange': 'text-orange-500', ... , 'red: 'text-red-500' , 'default': 'text-gray-500'} const className = CLASS_MAP[selectecColor ?? 'default']
5:00 You can always create a Map or single dictionary-like object that will contain keys and list of Tailwind classes as their values. like so ``` let variants = { active: 'text-primary bg-zinc-50', inactive: 'text-gray-500 hover:bg-zinc-50' } as const; ``` and then access it via `variants[selectedVariantProp]` or simply do inline if there This way you will have a variable that will have a purpose and it will resolve the problem of purging classes
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✅
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
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
Okay so i code Websites with tailwind for now 4 years and there was some great stuff in there. You got the subscribe Well deserved for such a good Video with some actually intressting context.
I’m glad to see that another web developer started a UA-cam channel. I also want to start one, but I’m afraid of getting through the beginning. How did you manage to overcome _your_ fear and start your channel?
Thanks for watching! My best tip is to upload your first trash video. No need to be afraid that someone you know is gonna watch. No one will know. No need for fancy editing, good mic, nice background, any of that.. just make a bad video and then start improving from there. You also don’t need to think that you are wasting a good topic in a bad video.. you can always reuse the same topic for a better video in the future. Good luck on your future creator journey!
@@perfectbase good advice! First videos are trash because everything is new and you are nervous. But you are learning so much how to improve, the journey is exciting! I am still in the trash phase, but I know the next one gonna be better.
bro. this you video is awesome. this makes me believe you should be a online tutor from laracast. i really enjoyed the video even though i new most of what was inside i still wanted to watch till the end
The neon shadow and changing the whole look with one word??? I'm officially mind blown!
These were one of the most valuable 10 minutes of my developer life!
Wow! Such comments make my day!
Thank you for watching!
Damn
The tricks are great, no doubt, but common man… I bet your developer life isn't that long 😂
Absolutely
What?
I just started to use tailwind a few days ago and this gave me some great ideas to try out.
Absolute gold! One year on, and more relevant than ever. Clear, concise, and extraordinarily helpful. Thank you!
I've used Tailwind for some time now, but haven't heard of most of this tricks. Really usefull content
Value to time ratio off the roof. Amazing video, saves a lot of time for person starting with tailwind like me.
Glad you liked the style! Will try to make more like this in the future!
this vedio is so short but highly important. thanks dear. Need more unique project type vedio.
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!
Do you guys recommend me to learn Tailwind? Does it carry the heavylifting of responsiveness, typography, colors & other design features?
@@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.
@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.
me too, I’ve been using only the basic
Finally an advanced dev Video not these stuff that every one talks about. Love it.
Than you so much! I was using Tailwind for so long and I never found out about many of these.
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)
headwind and intellisense. must have
also wiring emmet up with tailwind so you can type "div.bg-red-300" then tab and bang it creates ""
Nice tips. I am experienced tailwind user, but I didn't know about using variables to store tailwind classes.
That’s not a feature or something like that. You can write them in a comment as well
The plugin feature with the neon shadow blew me away! Even intellisense is supported ... just like that! WOOOOW!!!
Just discovered Tailwind, and my mind is blown, thanks for sharing
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
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.
You could also just use a CSS variable, which makes this work with tailwind, without any lists or regex.
Thanks for sharing! Wish I knew this before making the video!
But glad I can also learn from you guys!!
@@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
This was just what I thought! Great video nontheless
@@perfectbase Come on now we know you did this to increase comments :)
Im glad youtube algorithm suggested me your video.
I use tailwind for years and would consider myself an expert, but I still learned a few things! Thanks for the video!
Glad that it’s also helpful for experienced users!! 😊
Thanks for watching!
For the point 'Dynamic Utilities' there are many solutions to do it with tailwind properly.
Solution 1 : you can define a safelist in tailwind config. These accepts wildcard and can easily cover the case you described with "bg-{color}-500"
Solution 2 (cleaner) : use cva or tailwindcva to define proper variants. It might be annoying and redundant to write some parts, but it allows you to handle many logics
And for the why : I would rather die than have a few part of my code that doesn't rely on my tailwind configuration. If you are working with theme, having one component with hex colors is a big issue.
This is extremely useful info that basic tutorials don't cover and I didn't even know tailwind had this stuff. Awesome!
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! 🙏
Glad it was useful!!
That group and peer hover thing was awesome!!
For #5 I used tw-merge and it just worked for me. Don't know how. But now I know why it didn't work in the first place 😅.
The tip with the ‘possible’ list was great. I’ve spent a long time trying to get variables injected into my tailwind and had really random results.
Glad it helped! You might also want to take a look at “safelist” in tailwind. It also solves this problem, but in a better way.
tailwindcss.com/docs/content-configuration#using-regular-expressions
@@perfectbase fantastic !
@5:01 there is also a possibility to include tailwind classes in the theme file, that shouldn't be purged. So there is no need for your unused object ;) i Think it's called safelisting.
Thanks for sharing!! I wish I knew this before making the video.
Yeah i was dynamically generating few colors in a component and had to specify the safelist pattern as:
safelist: [
{
pattern:
/bg-(gray|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(100|200|300|400)/,
},
],
This is literally the best Tailwind CSS video I have ever seen! Thank you for your great efforts and keep going! ❤
I love it when tech UA-camrs also have their own startups! I also have a few projects of my own 😊
And the tips in this video were sick!
this is actually so good, been using tailwind for 2 years, learned something new today !
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!
nice job with code + live output with black background.. didn’t have to worry of getting flashed with a bright white bg in between!!
Glad you liked it! Thanks for the feedback!
in the dynamics variable section, I believe you can add the variable names to a safe list in the tailwind config file instead of creating an unused variable
Amazing video, even after working with tailwind for some time i learned new tricks.
Great to hear that!
Thanks for the feedback! 😊
Great tips, great graphics and great editing skills - I enjoyed this video 👏
Thank you for watching! 🙏
Super glad to hear that from a bigger content creator in the space!!
came here from SImon's tweet, really neat! subscribed
@@shanemshort 😎 I subscribed today too!
I didn't know tailwind even had this!Amazing 10 minutes of a developer life!
Great video! Fantastic edit! Well done!
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
amazing video, on a project using tailwind, this helped a lot., Thank you !! Looking forward to more such content.
Bro, thank you. I didn't knew so much, have been using tailwindCSS for quite some time, thank you :)
Great video mate. The @apply is something I've never used but will in future!
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
Glad you liked it!!
in dynamic utilities u can use a map instead with the color been the key and the value is the tailwind class
i.e:
const CLASS_MAP = { 'green': 'text-green-500', 'orange': 'text-orange-500', ... , 'red: 'text-red-500' , 'default': 'text-gray-500'}
const className = CLASS_MAP[selectecColor ?? 'default']
One of the most useful videos about tailwind I ever saw ❤
Very, very helpful. Thank you!
This is the best Tailwind video I've ever watched. Thank you so much!
Wow, thank you!! 😊
5:00 You can always create a Map or single dictionary-like object that will contain keys and list of Tailwind classes as their values.
like so
```
let variants = {
active: 'text-primary bg-zinc-50',
inactive: 'text-gray-500 hover:bg-zinc-50'
} as const;
```
and then access it via `variants[selectedVariantProp]` or simply do inline if there
This way you will have a variable that will have a purpose and it will resolve the problem of purging classes
Note that this "as const" is a TypeScript feature that allow TS to infer object keys with their exact names rather than generic strings
I like the responsive designs explain really explain perfectly and understand it more easy
thank you mate! probably the best youtube tech tutorial i have seen this year, some great tips here
Thanks for such a nice review!! 😊
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✅
you can do that using the official tailwind prettier sorting plugin
@@elab4d140 Nice, that extension is also worth mentioning.
Thanks for sharing!
Yes! I use the prettier plugin as well. Learned it from the T3 stack.
This is awesome, I never knew tailwind is this powerful
Wow, I'm impressed - especcialy this trick with the color shadows. Thank you.
Very useful, thanks.
strongly recommend this video, thank you for sharing your knowledge
you are so good at explaining things!!
That tailwind-merge is awesome, thanks for your video help me know that 😍
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
Very high quality content
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
Thank you! 🙏☺️
In this video, you answered most of my questions.
Really liked the neon shadow
Loved it!! Thanks, will start using these asap!
I appreciate the content and concepts covered in this video.
thank you! great video!🦐
Thank you, you really helped me.
Especially when you talk about mobile-first framework
Okay so i code Websites with tailwind for now 4 years and there was some great stuff in there. You got the subscribe Well deserved for such a good Video with some actually intressting context.
Thank you for the great feedback!! 🙏
Glad that it’s useful for more experienced people as well.
Very valuable tips. Many thanks for this gem of a video. Will be sharing with my team today.
Just found this video, and I'm glad I did... subscribed.
A smooth editing and useful tips. Thank you so much!
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
Hats of man !
The most amazing was creating own plugin.
These are great! I just started Tailwind
The tips and design of the video were very, very great. thank you 🌹🌹🌹
I’m glad to see that another web developer started a UA-cam channel. I also want to start one, but I’m afraid of getting through the beginning. How did you manage to overcome _your_ fear and start your channel?
Thanks for watching!
My best tip is to upload your first trash video.
No need to be afraid that someone you know is gonna watch. No one will know.
No need for fancy editing, good mic, nice background, any of that.. just make a bad video and then start improving from there.
You also don’t need to think that you are wasting a good topic in a bad video.. you can always reuse the same topic for a better video in the future.
Good luck on your future creator journey!
@@perfectbase That's really good advice! Thank you. I guess the hardest part _really is_ the beginning 😂
Either way, I'll give it a shot. Thank you very much!
@@NikitaDrokin for sure! Starting is always the most difficult part. Hope you the best in your channel! 😉
@@perfectbase good advice! First videos are trash because everything is new and you are nervous. But you are learning so much how to improve, the journey is exciting! I am still in the trash phase, but I know the next one gonna be better.
best tailwind tricks so far
wow bro these are some really nice tricks... I was not known to the real power of tailwind.
Thanks for watching!
Really glad you liked it!
halfway into the video and i liked it. Thanks Ravi!
ended the video..well i understood the first half, still new to tailwind maybe thats why.
Peer and group are really useful!
You are SO GREAT! I can't wait to try out each and every trick you just taught us!! Freaking awesome, Ravi 🤩🤩🤩
damn bro. tysm. the custom plugins is so cool, thanks for sharing.
This was great. Keep them coming!
WOW! This video is beyond my expectation 🤯 Thank you, you just got a new subscriber ❤
I just want to say THANKS! Great video!
Video was concide and to the point! Plugin 8 caught me off guard, had to rewatch. You won a sub! Keep the videos coming!
These are pretty cool tips and tricks 🔥
I didn't know about no.6 that you can that easily apply tw classes :). I always used apply to make my own classes.
Great video on Tailwind, thank you very much.
Very nice information. Your delivery of the content makes in more better. Looking forward for more software development area videos!Cheers!
haha #1 already what i needed thank you
You can whitelist certain classes in tailwind config so they will always be there
Great video! Thanks for sharing! 🙏🏼
Your channel is so small but yet so good
Thank you for the kind words!! 🙏
there's a whitelist option in the tailwind configuration which you could use rather than using that throwaway variable
Thank you for sharing!
Other people also pointed that out.
Glad I can learn from you guys as well!
Really interesting tailwind tips! 🤩
Good job man! Learned a lot.
bro. this you video is awesome. this makes me believe you should be a online tutor from laracast. i really enjoyed the video even though i new most of what was inside i still wanted to watch till the end
Thanks! Glad you liked it!! ☺️
solid video, all the examples were quick and concise
Insightful video! I hope your channel grows to be huge 🙏🏽
Thank you! These tips were incredibly helpful.
thanks a lot, that second last tip was super usefull
So so valuable, I'm saving and sharing this❤
Thank you for this video i really learned some useful stuff!