5 Tailwind CSS Pro Tips I Wish I Knew Earlier (2025)

Поделиться
HTML-код
  • Опубликовано: 29 янв 2025

Комментарии • 44

  • @lukas.webdev
    @lukas.webdev  2 месяца назад +1

    *ATTENTION:* In the "Delegate" chapter, I mistakenly mentioned that the classes of the parent elements are inherited by the child elements. That’s not accurate! What I meant to say is that the some styles applied by those classes are inherited, not the classes themselves. Apologies for the confusion!
    What are your thoughts on this video?
    Like this comment if you want to see more videos about Tailwind CSS or let me know in the comments, what kind of content you want to see next on this channel.

  • @mohitashliya8750
    @mohitashliya8750 2 месяца назад +3

    I have been using tailwind for almost 2 years now and this group thing is what I learned here thank you Lukas

    • @lukas.webdev
      @lukas.webdev  2 месяца назад

      I'm glad I could help and I really appreciate your feedback! 😉

  • @daviddwq4513
    @daviddwq4513 2 месяца назад +2

    Nice! I'm just starting to be familiar with tailwind. As an old school css user, I was a little bit reluctante to use any css framework since I was used to use sass on BEM architecture. But now by developing some apps with React I didn't found sass as useful as used to be. Tailwind is so easy to use I didn't even need to learn it is so intuitive specially if you already master css. However tips like this are gold, thank you!

    • @lukas.webdev
      @lukas.webdev  2 месяца назад

      Thanks for your feedback and for sharing a bit of your backstory, David! I really appreciate it.
      I completely agree - Tailwind’s intuitive nature truly shines when you already have a strong CSS foundation. I’m so glad you found the tips helpful. Best of luck with your projects! 😉

  • @komeiltaheri
    @komeiltaheri 2 месяца назад +1

    At 1:14, in fact classes are not inherited by child elements , its happening because some css styles like "color" are inherited by design, and some are not, so maybe this was what you meant but it could be misunderstood.

    • @lukas.webdev
      @lukas.webdev  2 месяца назад +2

      You're absolutely right! Thanks for pointing that out - that’s exactly what I meant to convey. Another viewer mentioned it as well, and while I can't update the video, I think adding this information to my pinned comment is a great idea. 😉

    • @komeiltaheri
      @komeiltaheri 2 месяца назад +1

      @@lukas.webdev Oh i just saw @nemethricsi's comment =), yeah pinning comment will do, best of luck

    • @lukas.webdev
      @lukas.webdev  2 месяца назад

      @@komeiltaheri Thanks, I really appreciate it! :)

  • @nemethricsi
    @nemethricsi 2 месяца назад +1

    I’m just at the beginning of the video. But quick note: not the css classes are inheriting but the specific css rules. And not all of them! For example “color” (the css rule behind text-red-500) does.
    This isn’t a tailwind specific thing rather a CSS specific thing.

    • @lukas.webdev
      @lukas.webdev  2 месяца назад +1

      You're absolutely right, Richárd! Thanks for pointing that out - that’s exactly what I meant to convey. 😉
      At 2:39 in the video, I clarify that this isn’t a Tailwind-specific behavior and also mention that it can't be used for everything. Hope that was understandable?

    • @nemethricsi
      @nemethricsi 2 месяца назад +1

      @@lukas.webdev Right I've heard that so I should have listened further :)

  • @gbkEmilgbk
    @gbkEmilgbk 2 месяца назад

    sorry for asking but... eg. in 9:59 what is the difference bietween

    • @SamarthaRawal-j9z
      @SamarthaRawal-j9z 2 месяца назад

      One advantage of class is that we can reuse it instead of editing all h1 tag one by one, and it is best practice to implement to make ur code clean and will be easier to maintain if we have define class
      And, h1 style will also override the stylesheet so need to be carefull

    • @gbkEmilgbk
      @gbkEmilgbk 2 месяца назад

      @@SamarthaRawal-j9z in this case, if you have two tags then you need to write className='text-[84px]" twice (in each tag) - so you actually cant reuse it. Second: if you use className='text-[84px]" you actally want to override stylesheet - so where is the point of not use "style" directly?

    • @Muhammadkashan-sb7oc
      @Muhammadkashan-sb7oc 2 месяца назад

      @@gbkEmilgbk why u are using normal css use tailwind both are same.

    • @IgorPcar
      @IgorPcar 2 месяца назад +1

      ​@@gbkEmilgbkbecause he chose to use the framework, both are the same but one is in css format and the other is in tailwind. If you choose to use tailwind stick to it, mix only when necessary.

    • @gbkEmilgbk
      @gbkEmilgbk 2 месяца назад

      @@IgorPcar both are not the same - because tailwind is additional (redundand?) layer of abstraction(?) over CSS

  • @ogulcanbozkurt3542
    @ogulcanbozkurt3542 2 месяца назад +1

    Sorry but nothing crazy here. For example on the last example, you can just give a text color on the button and use hover: instead of peer and group. No need to overcomplicate things.

    • @lukas.webdev
      @lukas.webdev  2 месяца назад +1

      Thank you for your feedback, Oğulcan! I have to agree - in hindsight, these examples may not have been the best choice to highlight the advantages of the peer and group utilities. I’ll make sure to include clearer and more impactful examples in future videos. Your input helps me grow, so I really appreciate it! 😉

  • @akhtarhssn
    @akhtarhssn 2 месяца назад

    these are the most basic tailwind tips. I was looking for something better.

    • @maulanahahaha
      @maulanahahaha 2 месяца назад

      True. it just pro for him

    • @lukas.webdev
      @lukas.webdev  2 месяца назад

      I'm sorry the video didn't meet your expectations! It seems like you're already well-versed in Tailwind CSS, which is quiet impressive.
      I appreciate your feedback and will work on sharing more advanced content in the future as well. 😉

  • @aram5642
    @aram5642 2 месяца назад

    "Don't use tailwind, like a pro"

  • @igorr4682
    @igorr4682 2 месяца назад

    Child/Children

  • @fatema8eee
    @fatema8eee 2 месяца назад

    Dislike for lie

    • @lukas.webdev
      @lukas.webdev  2 месяца назад

      I'm sorry if something came across as misleading. Could you clarify what you mean exactly?

    • @_jovian
      @_jovian 2 месяца назад +1

      ​@lukas.webdev likely the cringe begging for likes and subs, specifically the tailwind site nonsense. Just casually ask somewhere in the video, you don't gotta be weird about it...

    • @fatema8eee
      @fatema8eee 2 месяца назад

      @@_jovian We should dislike and report the video. Unsubscribe also if subscribed.

    • @lukas.webdev
      @lukas.webdev  2 месяца назад

      ​@@_jovian Got it - thanks for pointing that out. I didn’t give it much thought at the time, but I understand now and won’t do it again. Sorry about that!

    • @lukas.webdev
      @lukas.webdev  2 месяца назад

      @@fatema8eee I understand why you feel that way, and I appreciate you sharing your thoughts. I’ve already taken your feedback into account and won’t approach it the same way in the future. My goal is to create value, not to annoy anyone!