10 Tailwind Tricks You NEED To Know!

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ • 471

  • @jaideepshekhar4621
    @jaideepshekhar4621 Рік тому +41

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

  • @valyy151
    @valyy151 Рік тому +263

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

    • @perfectbase
      @perfectbase  Рік тому +21

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

    • @BarDots315
      @BarDots315 Рік тому +4

      Damn

    • @basedovi
      @basedovi Рік тому +3

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

    • @S.P.35
      @S.P.35 6 місяців тому

      Absolutely

    • @nested9301
      @nested9301 5 місяців тому

      What?

  • @FletchervanAmeringen
    @FletchervanAmeringen Місяць тому +1

    Absolute gold! One year on, and more relevant than ever. Clear, concise, and extraordinarily helpful. Thank you!

  • @nilsrothe
    @nilsrothe Рік тому +2

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

  • @PenguinjitsuX
    @PenguinjitsuX 5 місяців тому +1

    This is extremely useful info that basic tutorials don't cover and I didn't even know tailwind had this stuff. Awesome!

  • @лилпипка
    @лилпипка Рік тому +4

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

  • @Theruyenable
    @Theruyenable Рік тому +6

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

    • @perfectbase
      @perfectbase  Рік тому +2

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

  • @MyUbuntuVids
    @MyUbuntuVids 7 місяців тому +2

    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
      @BobbyBundlez 3 місяці тому

      headwind and intellisense. must have

    • @BobbyBundlez
      @BobbyBundlez 3 місяці тому

      also wiring emmet up with tailwind so you can type "div.bg-red-300" then tab and bang it creates ""

  • @dustsucker4704
    @dustsucker4704 Рік тому

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

  • @lukasluftlaufer1093
    @lukasluftlaufer1093 Рік тому +5

    @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
      @perfectbase  Рік тому

      Thanks for sharing!! I wish I knew this before making the video.

    • @datkumar1024
      @datkumar1024 3 місяці тому

      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)/,
      },
      ],

  • @wadecodez
    @wadecodez Рік тому +28

    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
      @chris-pee Рік тому +2

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

    • @perfectbase
      @perfectbase  Рік тому +9

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

    • @MerkieAE
      @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
      @FinnReinhardt-gc9vn Рік тому

      This was just what I thought! Great video nontheless

    • @enversecilmis7627
      @enversecilmis7627 Рік тому

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

  • @keochanmarido188
    @keochanmarido188 Місяць тому +1

    I like the responsive designs explain really explain perfectly and understand it more easy

  • @bn5055
    @bn5055 Рік тому +54

    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
      @theworldismine7788 Рік тому +1

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

    • @bn5055
      @bn5055 Рік тому +4

      @@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
      @ExileEditing Рік тому +1

      ​@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
      @lucasduarte7558 Рік тому +1

      me too, I’ve been using only the basic

  • @chainsburg
    @chainsburg Рік тому +3

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

  • @FlorinPop
    @FlorinPop Рік тому +1

    Great video! Fantastic edit! Well done!

  • @sumaiyajannat7824
    @sumaiyajannat7824 2 місяці тому +2

    this vedio is so short but highly important. thanks dear. Need more unique project type vedio.

  • @sathishkannan6600
    @sathishkannan6600 Рік тому +3

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

    • @suntrop
      @suntrop Рік тому

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

  • @codinginflow
    @codinginflow Рік тому

    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!

  • @0xAndy
    @0xAndy Рік тому

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

  • @kevinka99
    @kevinka99 Рік тому

    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

  • @magedibrahim1405
    @magedibrahim1405 Рік тому +13

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

  • @nicholasbicholas
    @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! 🙏

  • @ahmedbougacha2261
    @ahmedbougacha2261 Місяць тому +1

    Hats off for you man!! Bravo!!

  • @simonswiss
    @simonswiss Рік тому +5

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

    • @perfectbase
      @perfectbase  Рік тому +1

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

    • @shanemshort
      @shanemshort Рік тому +1

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

    • @simonswiss
      @simonswiss Рік тому

      @@shanemshort 😎 I subscribed today too!

  • @DEVDerr
    @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
      @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

  • @yuritavares1916
    @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

  • @nedjed4811
    @nedjed4811 Рік тому +15

    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.

  • @jesse9999999
    @jesse9999999 Рік тому +1

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

    • @perfectbase
      @perfectbase  Рік тому

      Thanks for such a nice review!! 😊

  • @nikhil182
    @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
      @elab4d140 Рік тому +1

      you can do that using the official tailwind prettier sorting plugin

    • @nikhil182
      @nikhil182 Рік тому

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

    • @perfectbase
      @perfectbase  Рік тому +3

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

  • @ns-gabrielmendoza1329
    @ns-gabrielmendoza1329 Рік тому

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

  • @dustsucker4704
    @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
      @perfectbase  Рік тому

      Thank you for the great feedback!! 🙏
      Glad that it’s useful for more experienced people as well.

  • @NikitaDrokin
    @NikitaDrokin Рік тому +2

    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?

    • @perfectbase
      @perfectbase  Рік тому +2

      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
      @NikitaDrokin Рік тому

      @@perfectbase That's really good advice! Thank you. I guess the hardest part _really is_ the beginning 😂

    • @NikitaDrokin
      @NikitaDrokin Рік тому

      Either way, I'll give it a shot. Thank you very much!

    • @perfectbase
      @perfectbase  Рік тому

      @@NikitaDrokin for sure! Starting is always the most difficult part. Hope you the best in your channel! 😉

    • @ajudmeister
      @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.

  • @keshavakumar9828
    @keshavakumar9828 Рік тому

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

  • @shobhitumrao
    @shobhitumrao Рік тому +2

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

  • @zillboy
    @zillboy Рік тому +1

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

  • @RobertWildling
    @RobertWildling Рік тому

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

  • @fvbixn
    @fvbixn Рік тому

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

    • @perfectbase
      @perfectbase  Рік тому +1

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

  • @dharmilshinde797
    @dharmilshinde797 Рік тому

    That group and peer hover thing was awesome!!

  • @stonedizzleful
    @stonedizzleful Рік тому +1

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

  • @vOnez212
    @vOnez212 Рік тому +1

    This was great. Keep them coming!

  • @DevF-d4r
    @DevF-d4r 11 місяців тому

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

  • @CreiwryJay
    @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!

  • @timmcneill5299
    @timmcneill5299 Рік тому

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

  • @Fleebee.
    @Fleebee. Рік тому

    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
      @perfectbase  Рік тому +1

      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.
      @Fleebee. Рік тому

      @@perfectbase fantastic !

  • @nisargjaiswal4264
    @nisargjaiswal4264 Рік тому +1

    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

  • @kiliusz
    @kiliusz Рік тому +1

    Im glad youtube algorithm suggested me your video.

  • @frk_91
    @frk_91 9 місяців тому

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

  • @jaitjacob
    @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
      @perfectbase  Рік тому

      Glad you liked it! Thanks for the feedback!

  • @brunobrasil3419
    @brunobrasil3419 7 місяців тому

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

  • @megacronom
    @megacronom Рік тому +3

    Amazing video, even after working with tailwind for some time i learned new tricks.

    • @perfectbase
      @perfectbase  Рік тому +1

      Great to hear that!
      Thanks for the feedback! 😊

  • @andreaskarz
    @andreaskarz Рік тому

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

  • @RobertWildling
    @RobertWildling 4 місяці тому +1

    Very good video, thank you! Subscribed!

  • @TrackingAcademy
    @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

  • @eric-jt
    @eric-jt 8 місяців тому

    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

  • @kushaljain2206
    @kushaljain2206 Рік тому

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

  • @elBorregin256
    @elBorregin256 Рік тому +5

    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

  • @giffarialfarizy7310
    @giffarialfarizy7310 11 місяців тому

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

  • @harshitmishra3843
    @harshitmishra3843 Рік тому

    I appreciate the content and concepts covered in this video.

  • @MmmMmmGood17
    @MmmMmmGood17 Рік тому

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

  • @zimzimph
    @zimzimph 5 місяців тому

    Is it possible to activate a peer-hover for the reverse? You show it works when hovering over the left peer, but I want it to go both ways.

  • @kryptons-galaxy
    @kryptons-galaxy 9 місяців тому

    This is awesome, I never knew tailwind is this powerful

  • @lundell_music
    @lundell_music Рік тому

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

  • @m3coo
    @m3coo Рік тому +1

    Very, very helpful. Thank you!

  • @ajudmeister
    @ajudmeister Рік тому

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

  • @gwemula
    @gwemula Рік тому

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

  • @_duongductrong
    @_duongductrong Рік тому

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

  • @nemethricsi
    @nemethricsi Рік тому

    @perfectbase Thank you! I knew most of these TW things already but I liked your way of teaching! I also wonder how did you do this kind of code explanation animations. For example when you hide unnecessary code with […]. Thanks!

    • @perfectbase
      @perfectbase  Рік тому +1

      Thanks for the feedback!!
      The editing process is nothing fancy.. just put it together in Final Cut Pro and crop and keyframe.. etc…
      The […] was just me replacing it manually and doing a cross fade transition.
      I also setup VSCode to not show the errors and warnings on the screen to get a better visual.

    • @nemethricsi
      @nemethricsi Рік тому

      @@perfectbase Thank you!

  • @art_ik
    @art_ik Рік тому +4

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

  • @lucasduarte7558
    @lucasduarte7558 Рік тому +1

    strongly recommend this video, thank you for sharing your knowledge

  • @appstuff6565
    @appstuff6565 Рік тому

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

    • @appstuff6565
      @appstuff6565 Рік тому

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

  • @HoyosJuan
    @HoyosJuan Рік тому +1

    Wonderful video!! Really enjoyed.

  • @muniralsharif6305
    @muniralsharif6305 Місяць тому +1

    thank you ‏ I have learned a lot from you😎

  • @ahmadwahyudi3794
    @ahmadwahyudi3794 Рік тому

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

  • @gauravmandall
    @gauravmandall 10 місяців тому

    1:32 how you made these animated code slides please tell me so I'll present my presentation better in the hackathons and college presentations.
    Love from India ❤

    • @perfectbase
      @perfectbase  10 місяців тому

      Hi!
      No fancy technique.
      Just recorded my screen and then used Final Cut Pro to make cuts and keyframes.
      It takes some time to do it.

  • @gizmo_stuff
    @gizmo_stuff Рік тому +1

    Very high quality content

  • @ai_for_good
    @ai_for_good Рік тому +1

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

  • @shayanzamani9907
    @shayanzamani9907 Рік тому +2

    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 :)

  • @licokr
    @licokr Рік тому +1

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

  • @Q__Q
    @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

  • @reyhaniogluu
    @reyhaniogluu Рік тому

    Bro it is amazing thanks for sharing. Also I wonder how you edit your coding records 2:41

    • @perfectbase
      @perfectbase  Рік тому

      Thanks for watching!
      I record the code and the illustrations separately.
      I just make sure they have a black background when I record. Then I put them in Final Cut Pro and use the crop tool to use only what I want. And finally I retime them to sync them to my voice. It takes quite some time, but this time it paid off!!

  • @n4h92
    @n4h92 6 місяців тому

    I liked the tailwind merge library, is there a possibility of doing it with javascript? I don't think work will accept me adding more libraries to the project.

  • @theworldismine7788
    @theworldismine7788 Рік тому +2

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

    • @perfectbase
      @perfectbase  Рік тому

      Yes! It has all of that! And It is definitely a much better experience writing the styles.. but in the end you kind of need to know some css in order to use it. (Different than MaterialUI, that basically wraps everything to make it simpler for beginners)

  • @funnywalatag4440
    @funnywalatag4440 3 місяці тому +1

    You made it easy bro :)

  • @arturamorfati
    @arturamorfati Рік тому +1

    thank you! great video!🦐

  • @tfdesign4072
    @tfdesign4072 6 місяців тому +1

    you are so good at explaining things!!

  • @franklinhurtadosalazar
    @franklinhurtadosalazar 5 місяців тому

    In this video, you answered most of my questions.

  • @buituyen9484
    @buituyen9484 Рік тому

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

  • @abdulmuminyqn
    @abdulmuminyqn Рік тому +1

    Really interesting tailwind tips! 🤩

  • @mahmoudkhaled3961
    @mahmoudkhaled3961 6 місяців тому

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

  • @DavidWTube
    @DavidWTube Рік тому +1

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

  • @yohendryy
    @yohendryy Рік тому

    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']

  • @LeHarT99
    @LeHarT99 Рік тому +2

    Very useful, thanks.

  • @saifullahrahman
    @saifullahrahman Рік тому

    thanks a lot, that second last tip was super usefull

  • @poptaim7631
    @poptaim7631 Рік тому

    I just want to say THANKS! Great video!

  • @apuji7555
    @apuji7555 Рік тому +2

    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
      @perfectbase  Рік тому

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

    • @apuji7555
      @apuji7555 Рік тому

      @@perfectbase you're welcome!

  • @DioArsya
    @DioArsya Рік тому

    u can use safelist property on tailwind config object to always write those classes to css as default, no matter u explicitly write the classes or not, it is good for some cases of dynamic classes like that

    • @perfectbase
      @perfectbase  Рік тому

      Thank you for sharing!!
      Some other people also pointed that out. I wish I knew this before making the video. 😅

  • @khethelogp
    @khethelogp Рік тому +1

    These are pretty cool tips and tricks 🔥

  • @xGalasko
    @xGalasko Рік тому +1

    haha #1 already what i needed thank you

  • @tcortega
    @tcortega Рік тому +1

    Your channel is so small but yet so good

    • @perfectbase
      @perfectbase  Рік тому +1

      Thank you for the kind words!! 🙏

  • @NTS-n6h
    @NTS-n6h 21 день тому +1

    Thanks for your tips, subcribed