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

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

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

  • @lukas.webdev
    @lukas.webdev  Месяц назад +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 Месяц назад +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  Месяц назад

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

  • @daviddwq4513
    @daviddwq4513 Месяц назад +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  Месяц назад

      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 Месяц назад +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

      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 Месяц назад +1

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

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

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

  • @nemethricsi
    @nemethricsi Месяц назад +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  Месяц назад +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 Месяц назад +1

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

  • @gbkEmilgbk
    @gbkEmilgbk Месяц назад

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

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

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

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

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

    • @IgorPcar
      @IgorPcar Месяц назад +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 Месяц назад

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

  • @ogulcanbozkurt3542
    @ogulcanbozkurt3542 Месяц назад +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  Месяц назад +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 Месяц назад

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

    • @maulanahahaha
      @maulanahahaha Месяц назад

      True. it just pro for him

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

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

    "Don't use tailwind, like a pro"

  • @igorr4682
    @igorr4682 Месяц назад

    Child/Children

  • @fatema8eee
    @fatema8eee Месяц назад

    Dislike for lie

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

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

    • @_jovian
      @_jovian Месяц назад +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 Месяц назад

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

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

      ​@@_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  Месяц назад

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