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

[@lukas.webdev]

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

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

[@lukas.webdev]

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

[@daviddwq4513]

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]

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]

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]

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]

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

[@lukas.webdev]

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

[@nemethricsi]

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]

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]

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

[@gbkEmilgbk]

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

[@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]

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

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

[@IgorPcar]

​@@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]

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

[@ogulcanbozkurt3542]

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]

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

[@aram5642]

"Don't use tailwind, like a pro"

[@lukas.webdev]

Interesting take! 😄

[@akhtarhssn]

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

[@maulanahahaha]

True. it just pro for him

[@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. 😉

[@igorr4682]

Child/Children

[@fatema8eee]

Dislike for lie

[@lukas.webdev]

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

[@_jovian]

​@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]

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

[@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]

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