I WISH I Knew These Tailwind Tips Earlier

Tailwind is great. Y'all love to overcomplicate things. I hope this helps you keep them nice and simple

#tailwindcss #webdevelopment

[simonswiss]

I've been leading a team on a recent project and the hardest part was by far to try and make everyone feel comfortable with "resisting complexity". Copy and paste stuff with multi cursor instead of abstracting components that will inevitably change requirements and scope. Tailwind really shines when you keep everything super simple, as counter-intuitive as this may sound.

[olafviking]

You truly realise the benefits of Tailwind when you work on a project that does not include it.

[tailscan]

Great vid Theo! I definitely feel you when it comes to the order of classes. Whenever I open someone elses codebase and find out the Tailwind classes are all over the place, I die inside a little.

[AndrewDBrown]

I massively appreciate your channel and have learned so much from you - thank you. Congrats on hitting 100k

[rodrigo-]

honestly I think the first tip is not really necessary bc the official tailwind docs have a great search bar! I'm new to tailwind and so the best way I found to learn it is to simply keep open the docs and when I'm trying to do something that I dont remember/know how to do I simply go on the that search bar and type whatever I want with css. e.g. If I type "background-color" immediately pops-up the tab with the bg--color-yyy. I think it is fantastic and I would recommend giving it a try!

[joaothomazini]

Thank you for opening my mind to tailwind and saving me from css hell. I was able to do with tailwind in one weekend what I was trying to do with css for months now and I had zero tailwind experience before and I am still a noob in tailwind but I consider it an infinitely superior and easier solution.

[twothreeoneoneseventwoonefour]

For fixing the order of applying classes, I usually use tailwind-merge. It merges classes like clsx(classnames) and removes all conflicts. Like if you had "bg-zinc-800 bg-red-200", it will fix the conflict and it will become just "bg-red-200". Very useful.

[AntoniGawlikowski]

I love this type of video [short, concise, informative, impactful] in general and this specific video in particular - THANK YOU!

[blehbleh]

The whole series about tailwind by its creator is well worth a watch on YouTube

[runonce]

The @apply directive is really useful for styling HTML content you don't control (i.e. coming form a CMS).

[TheHoinoel]

The only time i would consider @apply is for text styles. Having 2-3 text styles that i can consistently use across an app helps keep the design clean. I found prettier tailwind sorting because of t3 and i wish i found it earlier! Great stuff!

[StrikerFeed]

About @apply, correct me if I am wrong. I find it useful when I build a list of components, when a specific component may have an active state, and for this active state I define a lot of classes. I use Vue, and in the <style> tag I define an .active class, where I @apply these classes, and then provide that class to the active element.

[mainendra]

I agree it’s hard to convince that use copy paste if it’s making your code simpler, cleaner and easier to understand then use it. You don’t have to literally follow DRY principle. This applies everywhere not just for tailwind ☺️

[yzz]

You’ve helped me so much on my full stack journey. I love these videos when you don’t seem cranky by others stupidity 😂😂

[ByJonathanLeung]

Just started using Tailwind. This is super helpful. Thank you!

[ventic]

There are 3 use-cases I've used @apply:

1. consistent styling for link elements across the entire application, changing them in every single file while prototyping was pain and using @apply seemed like the simpler solution than introducing an entire component for it
2. scrollbar styling. There's no element to apply class= to.
3. complex selectors, for example modifying the style of a parent component based on the state of a deeply nested one that may or may not exist in the current component tree. Perhaps this should use something like React context instead, but CSS felt like a more light-weight solution and inline tailwind cannot accomplish it alone.

[mezzomind]

If you're finding the need to use @apply for common text styles or other oft used combinations of classes, consider adding these to your config as a plugin or a theme extension instead. That way you get all the benefits of tailwind and the JIT compiler as if they were native classnames. The only downside is if you need to tweak or add/remove those styles you have to restart the server which should be nbd.

[ShaharHarshuv]

When I read the recommendation about using multi-cursor editing instead of reusing I was like "you must be kiding" but you convinced me to give it a try

[H-Root]

So after almost 2 years of using Tailwind I can say confidently; I do no mistake 🤘😂

[masterflitzer]

the prettier plugin tip is pure gold, thank you so much, i really didn't know it existed