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
10 ай бұрын
The tricks are great, no doubt, but common man… I bet your developer life isn't that long 😂
@S.P.35
4 ай бұрын
Absolutely
@nested9301
2 ай бұрын
What?
@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
@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!
@magedibrahim1405
Жыл бұрын
This is literally the best Tailwind CSS video I have ever seen! Thank you for your great efforts and keep going! ❤
@лилпипка
Жыл бұрын
I've used Tailwind for some time now, but haven't heard of most of this tricks. Really usefull content
@nilsrothe
Жыл бұрын
I just started to use tailwind a few days ago and this gave me some great ideas to try out.
@MyUbuntuVids
4 ай бұрын
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)
@BobbyBundlez
15 күн бұрын
headwind and intellisense. must have
@BobbyBundlez
15 күн бұрын
also wiring emmet up with tailwind so you can type "div.bg-red-300" then tab and bang it creates ""
@chainsburg
Жыл бұрын
Than you so much! I was using Tailwind for so long and I never found out about many of these.
@elBorregin256
Жыл бұрын
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
Жыл бұрын
Glad you liked it!!
@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!
@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
@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.
@FlorinPop
Жыл бұрын
Great video! Fantastic edit! Well done!
@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
@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!
@codinginflow
Жыл бұрын
I love it when tech KZitemrs also have their own startups! I also have a few projects of my own 😊 And the tips in this video were sick!
@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!!
@RobertWildling
11 ай бұрын
The plugin feature with the neon shadow blew me away! Even intellisense is supported ... just like that! WOOOOW!!!
@dustsucker4704
Жыл бұрын
Finally an advanced dev Video not these stuff that every one talks about. Love it.
@megacronom
Жыл бұрын
Amazing video, even after working with tailwind for some time i learned new tricks.
@perfectbase
Жыл бұрын
Great to hear that! Thanks for the feedback! 😊
@m3coo
Жыл бұрын
Very, very helpful. Thank you!
@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!! 😊
@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
@lukasluftlaufer1093
Жыл бұрын
@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.
@perfectbase
Жыл бұрын
Thanks for sharing!! I wish I knew this before making the video.
@datkumar1024
8 күн бұрын
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)/, }, ],
@CreiwryJay
9 ай бұрын
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!
@stonedizzleful
Жыл бұрын
Great video mate. The @apply is something I've never used but will in future!
@shobhitumrao
Жыл бұрын
amazing video, on a project using tailwind, this helped a lot., Thank you !! Looking forward to more such content.
@franklinhurtadosalazar
2 ай бұрын
In this video, you answered most of my questions.
@eric-jt
5 ай бұрын
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
@nedjed4811
Жыл бұрын
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.
@learner8084
6 ай бұрын
Just found this video, and I'm glad I did... subscribed.
@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!
@timmcneill5299
Жыл бұрын
Just discovered Tailwind, and my mind is blown, thanks for sharing
@art_ik
Жыл бұрын
Great Video! on the point and no BS. I love it! keep it up :)
@pcv-free-as-a-bird
Жыл бұрын
Really liked the neon shadow
@0xAndy
Жыл бұрын
This is the best Tailwind video I've ever watched. Thank you so much!
@perfectbase
Жыл бұрын
Wow, thank you!! 😊
@appstuff6565
10 ай бұрын
halfway into the video and i liked it. Thanks Ravi!
@appstuff6565
10 ай бұрын
ended the video..well i understood the first half, still new to tailwind maybe thats why.
@dustsucker4704
Жыл бұрын
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.
@perfectbase
Жыл бұрын
Thank you for the great feedback!! 🙏 Glad that it’s useful for more experienced people as well.
@ns-gabrielmendoza1329
Жыл бұрын
I didn't know tailwind even had this!Amazing 10 minutes of a developer life!
@keshavakumar9828
Жыл бұрын
this is actually so good, been using tailwind for 2 years, learned something new today !
@dharmilshinde797
Жыл бұрын
That group and peer hover thing was awesome!!
@meriem6099
Жыл бұрын
Thank you for this video i really learned some useful stuff!
@tfdesign4072
3 ай бұрын
you are so good at explaining things!!
@LeHarT99
Жыл бұрын
Very useful, thanks.
@brunobrasil3419
4 ай бұрын
You are SO GREAT! I can't wait to try out each and every trick you just taught us!! Freaking awesome, Ravi 🤩🤩🤩
@everlastingstudios2467
Жыл бұрын
tailwind merge is really life saver, I have been trying to figure it out for a while for my custom components, Thanks!
@kiliusz
Жыл бұрын
Im glad youtube algorithm suggested me your video.
@lucasduarte7558
Жыл бұрын
strongly recommend this video, thank you for sharing your knowledge
@poptaim7631
Жыл бұрын
I just want to say THANKS! Great video!
@bryanodinadev
10 ай бұрын
These are great! I just started Tailwind
@muhammadumar5385
Жыл бұрын
Hats of man ! The most amazing was creating own plugin.
@frk_91
6 ай бұрын
One of the most useful videos about tailwind I ever saw ❤
@laracrafts195
11 ай бұрын
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
@perfectbase
11 ай бұрын
Thanks! Glad you liked it!! ☺️
@tcortega
Жыл бұрын
Your channel is so small but yet so good
@perfectbase
Жыл бұрын
Thank you for the kind words!! 🙏
@kryptons-galaxy
6 ай бұрын
This is awesome, I never knew tailwind is this powerful
@yavallejo
Жыл бұрын
Great video on Tailwind, thank you very much.
@_duongductrong
Жыл бұрын
That tailwind-merge is awesome, thanks for your video help me know that 😍
@DavidWTube
Жыл бұрын
How this is the first I'm hearing of you... great video, got a sub from me!
@kevinka99
11 ай бұрын
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
11 ай бұрын
Thank you! 🙏☺️
@saifullahrahman
Жыл бұрын
thanks a lot, that second last tip was super usefull
@shayanzamani9907
Жыл бұрын
3:56 Really useful! I'm developing a project with Astro and for jsx class rendering I need to use `class:list{}` syntax; thus, I had no intellisense there, but now I do thanks to u :)
@TrackingAcademy
11 ай бұрын
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
@jugibur2117
Жыл бұрын
Wow, really useful stuff, thanks!
@Allformyequine
Жыл бұрын
Luv this! Nice concise but not too long!
@DevF-d4r
8 ай бұрын
Video was concide and to the point! Plugin 8 caught me off guard, had to rewatch. You won a sub! Keep the videos coming!
@asfnobambu
Жыл бұрын
At last, someone I can listen with speed 1.0 !!! Nice tips... Thank you.
@giansantillan6934
10 ай бұрын
best tailwind tricks so far
@ahmadwahyudi3794
Жыл бұрын
Thank you, you really helped me. Especially when you talk about mobile-first framework
@giffarialfarizy7310
8 ай бұрын
WOW! This video is beyond my expectation 🤯 Thank you, you just got a new subscriber ❤
@kushaljain2206
10 ай бұрын
Very nice information. Your delivery of the content makes in more better. Looking forward for more software development area videos!Cheers!
@bhargav1811
Жыл бұрын
Nice video !! Keep making this!!!
@fantomgaming9018
Жыл бұрын
watched ur full video it was amazing
@andreaskarz
Жыл бұрын
Wow, I'm impressed - especcialy this trick with the color shadows. Thank you.
@ai_for_good
Жыл бұрын
Loved it!! Thanks, will start using these asap!
@inquinimaris
Жыл бұрын
Tsk, wish I knew about peer sooner. Thanks, that was useful.
@licokr
Жыл бұрын
A smooth editing and useful tips. Thank you so much!
@MyCodingDiary
Жыл бұрын
new subscriber 🖐! love your teaching style i learned a lot!
@perfectbase
Жыл бұрын
Thanks for subscribing!!! 🙏
@lundell_music
11 ай бұрын
Very valuable tips. Many thanks for this gem of a video. Will be sharing with my team today.
@benacker8525
Жыл бұрын
I didn't know about no.6 that you can that easily apply tw classes :). I always used apply to make my own classes.
@khethelogp
Жыл бұрын
These are pretty cool tips and tricks 🔥
@harshitmishra3843
10 ай бұрын
I appreciate the content and concepts covered in this video.
@PedroHenriquedosSantos
6 ай бұрын
Thank you for sharing your knowledge.
@abdulmuminyqn
Жыл бұрын
Really interesting tailwind tips! 🤩
@vOnez212
Жыл бұрын
This was great. Keep them coming!
@Fleebee.
9 ай бұрын
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.
@perfectbase
9 ай бұрын
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
@Fleebee.
9 ай бұрын
@@perfectbase fantastic !
@DEVDerr
Жыл бұрын
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
@DEVDerr
Жыл бұрын
Note that this "as const" is a TypeScript feature that allow TS to infer object keys with their exact names rather than generic strings
@arturamorfati
Жыл бұрын
thank you! great video!🦐
@MmmMmmGood17
Жыл бұрын
Insightful video! I hope your channel grows to be huge 🙏🏽
@draxeris
Жыл бұрын
Good job man! Learned a lot.
@AdhilAmeen13
Жыл бұрын
Thanks, it was really helpful. 👍
@codingmickey
10 ай бұрын
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!!
@buituyen9484
Жыл бұрын
damn bro. tysm. the custom plugins is so cool, thanks for sharing.
@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
@NikitaDrokin
Жыл бұрын
I’m glad to see that another web developer started a KZitem 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?
@perfectbase
Жыл бұрын
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!
@NikitaDrokin
Жыл бұрын
@@perfectbase That's really good advice! Thank you. I guess the hardest part _really is_ the beginning 😂
@NikitaDrokin
Жыл бұрын
Either way, I'll give it a shot. Thank you very much!
@perfectbase
Жыл бұрын
@@NikitaDrokin for sure! Starting is always the most difficult part. Hope you the best in your channel! 😉
@ajudmeister
Жыл бұрын
@@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.
@gizmo_stuff
Жыл бұрын
Very high quality content
@HeyNoah
Жыл бұрын
Great video! Thanks for sharing! 🙏🏼
@JoseJavierEspinoza
Жыл бұрын
that was a really great video! ty!
@HoyosJuan
Жыл бұрын
Wonderful video!! Really enjoyed.
@FSRezende
Жыл бұрын
great tips... amazing! congrats from Brazil!
@cashmoneyz3
Жыл бұрын
solid video, all the examples were quick and concise
Пікірлер: 458