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

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.

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.

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

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!

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

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

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

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.

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.

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.

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 ☺️

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

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

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

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!

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

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 tag I define an .active class, where I @apply these classes, and then provide that class to the active element.

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

Yeah for real man. You totally right about it, it is a tool that has being helping me for quite a while now. Thank you

This was excellent. Thanks so much, I had no idea about any of this, and I use tailwind all the time.

Shoutout to you for telling me about the Prettier plugin. That is gonna save me so much time.

Thank you, you covered some topics I was wondering about.

This is brilliant and can be applied to so much more than just Tailwind.

One thing that I found strange when starting with tailwind was that I was making less components, and just copy pasting styles and I thought that it wasn't a good practice, I was forcing myself to make more components but I felt it wasn't a great experience when comparing to, say, styled components. With time it just got normal to me, copy pasting is fine with tailwind!

that painting is stunning

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.

One of the first really useful "I wish I knew" videos I've seen! I've started out as web-developer, moved to server-side things in the past, but now heard this thing "tailwind" and didn't know how to handle it. Thanks a lot for linking the main developers feeling on things! Just one question I couldn't quite get answered here: In recent years, people are seemingly more and more relaxed about resources, and (being heavy on server-side stuff) I see people building websites just hammering in stuff upon stuff, and writing that much in HTML files feels like just adding more to the bandwidth. It's true, that network connections are getting faster all-over, but this doesn't mean we should be indifferent about it. -> After writing this, I feel dumb ... I'm referring to - let's say 1000 characters, which is a hack lot of classes! - but this still is not much more than 1kb in actual size ...

amen to prettier! I didn't even think of these tips since they have been a part of my workflow since I picked up tailwind. I can't believe devs don't have these tricks in their back pocket, but hey thanks to you now they do!

Excellent. Well delivered to camera. Glad you went crazy with Helen.

That prettier tip was awesome. Can't wait to play with it

Sveltekit with tailwind is so gooooooooddddd! Feels like writing vanilla html, css, and JavaScript but waaaaaaaaay better. One problem I have with tailwind is documentation. I haven't found a easy to understand way of adding documentation to what you are doing like with vanilla css and comment blocks. I like to add a lot of documentation btw.

Actually with our team we've found a good way to use the @apply. We are basically creating a custom package for our Vue elements, and instead of using a Button Default vue component for re-using it in the other buttons for the basic construction we just made an button-default class in apply.

I first tried Tailwind when that prettier plugin wasn't s thing yet and it was driving me mad. It's soooo much better having that.

For the multiple child elements with the same classes, using new selectors like "[&>*]:text-blue-700 " would also apply those changes to children, in case you have tens of elements to style and can't make'em components.

@apply is crucial for reusable components (read companies ui-kit) to make sure that base classes of the components are imported before Tailwind utility classes, so extension and override of the reusable components via Tailwind utility classes is possible and will never have any issues with specificity.

final tip, nobody cares, unless the client is requesting for you to build the project with a specific library or framework using what your most comfortable with is always the best option, if you don't like tailwind stick with other things.

from the outside I see quite a lot of benefits to the @apply feature, it reduces having to grep through your components if you ever change the theme of your site and want let's say different kind of container components to share a style. You'd need to either import a constant string with the classNames, or make up your own convention such as a th-container (themed container) class name to share across multiple components. I find myself making a LinkButton (anchor tag) and ActionButton (button tag) component with virtually identical styles in most projects, so a th-button className would help with that. Not that I know what I'm talking about given that I've never used tailwind myself and I'm gonna keep happily using my mix of global stylesheet + cssmodules/scoped styles for components.

Thank you! This is really useful

i love tailwind eslint, like a code completion to turn px-2 and py-2 into p-2 in case i dont on accident

Dude, tailwind + prettier is gonna be so good. I try to follow the order that I see in Tailwond UI but yea, it eventually stars going all over the place. Dope. 🤙🏼🤙🏼🤙🏼

I'll have to think about some of these suggestions really hard. Normally I couldn't agree more with your advice but there's a number of items here you mentioned that I break some of my fundamental development rules. I think one of the biggest things that is probably creating this rift is that in 20 years I have not experienced the problems you're describing to any significant degree. Now I'm wondering what other dev principals that I'm following that have saved me from these issues so I can share them :D I really like @apply and I'm wondering a) what problems people usually run into with it, and b) what the "one of the biggest benefits" that you're talking about was. The consistency provided by the prettier plugin is nice, but I find myself struggling to debug or review items because it moves the media query, hover, etc to the end of the list away from the related items. If they fixed this one item, keeping all related classes together, I'd be much happier with it.

I can't believe I've been a CSS dev for 13 years and have now for the first time since then heard a professional bring up the CSS issue of order in the stylesheet trumps class order. It's an issue I am certain all web devs encounter, yet is never talked about. Thank you for finally mentioning this issue

Theo,i love backend but you make me accept front end, great video i didnt even know prettier tailwind intergration existed

"...it will keep you from having miserable nightmares in the future" Spoken with the voice of experience 🤣 agree

I love this philosophy for front end development... Keep it simple! Minimize unnecessary abstractions!

This vid was genuinely helpful. I wish there was a way to get the prettier-tailwind plugin on neovim

Very cool, thank you!

good tips. Thank you.

OMG the prettier plugin! Thanks

theo, I love you. I consider myself an experienced developer and someone who really cares about high-level concepts and tries to understand the underlying issues and solutions But still, each of your videos are new gold nuggets to me that I didn’t even think of, OR even worse - something I was thinking about, but couldn’t been able to build a model in my head

thanks for these tips!

Thank you so much for this video, I managed to finally overcome my initial reluctance against tailwind! You said, that altering the config isn't a good idea, just adding things is better. This in mind: what do you recommend, if for a specific site design a desktop-first approach is necessary or more suitable?

Theo in this video reminds me so much of Richard from Silicon Valley. I love it.

I use Ctrl+Shift+L a lot, it's the same as Ctrl+D, but it selects every instance at once

I agree with all of it except the copy paste part. It's never going to work out in large product codebases. Especially when the team is not filled with hyper aware engineers. It's good only until it deviates. Then it will be a massive pain when the design systems changes. Abstracted components will give you easy consistent styling for all teams. Just did a painful migration between design systems and this was one of the biggest pain points

I was a hater for a bit but finally tried it. It actually re-inspired me to design again. Of course, I HATE all the classes inline like that because after a bit its hard to decipher those lines. Old eyes :D. Overall I have an appreciation for it. I would use it on quite a bit of projects but not all.

I've used @apply exactly once: Adding some content through a CMS and realistically being unable to edit the classes

Hi theo, In svelte you can use class:={} As an attribute to an element/component This mixed with the @apply can provide good results that does not hurt the readability or locality of the code, since svelte has a per component styles Which is a good pattern, what do you think ?

You know what would be cool? Another wrapper around tailwind with another layer of abstraction which translates into tailwind, which translates into CSS. That would solve ALL problems on the web.

having links will be great, mate

Tailwind really made writing styles faster, now Im ended with writing tailwind in css in vscode without tailwind installed

Epic Video! Love It!

I want to use default classes for Button cmp, but I also want to have an option to override this classes with customClassNames prop. What should I do? Currently I'm using "default-btn" class with "@apply" (it has lower specificity, than customClassNames)

I was looking for some content about tailwind typography and found your video. You haven't mentioned it directly but I assume it's related to the tailwind config you mentioned in the very end. Do you have more videos or would mind sharing your thoughts about it? I'm pretty newbie in tailwind and saw a project with tons of changes on tailwind typography and it felt so weird to me that I don't know if that's really "correct" or if it's just me who isn't used enough to tailwind world. Thanks

I've been programming for 11 years and just learned that Ctrl+D will multi-select the next occurrence of what's selected in VS code hahahaha

I dont think I can go back to css. Tailwind just makes blasting stuff out a dream. Super quick, super simple, and the results speak for themselves....

Hey Theo, nice lightcurve you got there on your left! How come you have one on your wall? I'd wager its probably a Kepler SC light curve of some object?

this video is amaziiiing

i wish tailwind extension had the valid classes underlining like unocss extension, it makes it easier to see if you misspelled or wrongly syntaxed any classes specially when doing arbitrary values

Thanks theo

KUDOS AWESOME SHORT VIDEO! Hate streaming 10 hours chattering, sorry

Hi First of all, I love Tailwind and I use it on all of my projects. I have a question for #3: - What technical issues are you talking about? If you're talking about the naming conventions, then there are standards for this (check BEM). Everyone should be aware that using only tailwind classes you are limited with what tailwind has implemented from CSS. But CSS has so many options and I personally wouldn't recommend to anyone to only use classes in HTML, as it makes the code so much cluttered and harder to read and maintain. Not to mention it doesn't comply with the SRP. On the other side, using a separate CSS file, you have full control to all the properties and can choose to use either Tailwind with @apply, either some custom styles or animations. Not to mention the reload performance is better as only CSS is changed. Also, I don't think the costs of supporting @apply is our concern nor should be a decisive factor in how we write code. The tools we use should only improve our productivity.

What if we want to use some default styles in components like Button, Input, Card, but to be able to override some of them from the outside? I see people mentioning package called tailwind merge. What is your approach to it?

After trying tailwind myself, I think it's fine to components that you only style once, but on multiple components I'd rather make css classes It's something that adds to css, not replacing it

1. What would you suggest for dynamically changing the tailwind utility classes as tailwind doesn't support dynamic suffix of any utility class directly like `w-${widthSize}` will not work? 2. What are the benefits of using clsx library for the above case?

6:05 the Cascading part of Cascading Style Sheets strikes again

Thanks bro

Honestly, i use the @apply a lot. I never did before this once client i had that said he wanted “really neat code” and didnt wanna see so much text in his components. After that i just never went back, i use it in css modules which makes the syntax much cleaner but also help me mix native css and tailwind where needed

If you read his reasoning, @apply is not bad in simple (flat) use cases. The problems start when you start doing inheritance stuff and @applying user classes

Strange thing is, i had never used TW cheat sheet until i'm already very comfortable with the library, all i need was tailwind intellisense

What do you think about strict types for tailwind classes? Is it usefull?

Thanks for the interesting video. Can you point to some open source React app using tailwind properly, so that people can refer to it and see how it looks in production. It would be specifically interesting to see apps with all kinds of widgets rather then landing page kind of applications.

I use the @apply directive to specifically make global styles, say text-style classes that to match a design system, `.ts--h1` or form input resets--there are not all that many things that make the cut.

overall I agree... regarding @apply - when you need to apply style to components that you have no control over their html (e.g. external components/plugins, etc...) - @apply is the least worst option especially considering breakpoints and variants handling

I don't quite agree with the recommendation on @apply, it's much easier to change the style of your titles for example in a single file rather than having to search for them in, say, a big project, your 300 jsx files. And no, for a design system, I'd rather change the style of every basic HTML tag than create components, there are a ton of reasons for that. Yes, tailwind makes life easier, but it cannot replace entirely design systems, css...

This video is basically "teaching everyone DRY too much was a mistake"

I agree with everything except the @apply rule. I can imagine it's difficult for tailwind to work around... I imagine it's pretty complicated to integrate with a bunch of different bundlers and environments, but using it for something containing some sort of global theme to a class that needs some css that tailwind can't handle is awesome in some cases. That rarely happens, but right now I'm working on something with some Shadcn (of course it's Shadcn) and being able to change the shadCn defined variables in one location and have it effect the tailwind config and the internal classes at the same time is a life saver. In a pretty large and fairly complicated app I used that in maybe 2 places, but it add's so much predictability that I can change one css file and not worry about forgetting something... especially when Next's dev server is so sh-t and my M1 macbook can literally barely load this massive app in development to check how things look, and it definitely can't navigate between more than one or two pages before needing to restart.

Wait... People have been not using cheat sheets!? Cheat sheets are the best way to shortcut to memory of the big picture so you can zoom in when needed and zoom out when you get lost.

what do you think about unocss because it's quite similar to tailwind ? have you ever used it? give your opinion

@apply part is the best part in this video

I WAS WRONG tailwind is the best thing ever. component libraries are never correctly responsive and tis so easy to make it responsive in tailwind. no annoyingly verbose media things

I always tell to my teammates abstraction is hard and most of the time wrong. Don’t do abstractions just write it several times until a healthy pattern shows up in your mind. Even that time don’t do that 😂

I don't have Prettier plugin for Tailwind but Prettier seems to update the order on its own. Guess that was integrated after this video?

The CSS Modules logo tho 😅

If we should eliminate the use of @apply feature, How can we style CMS contents built using pagebuilder structure since we can't add the classes on it? Example, Magento Pagebuilder feature.

this guy should be retained for the role of Guybrush Threepwood if a movie version of Monkey Island was ever made

Thank you. It is a great video. Previously, I used a lot of @apply detectives in CSS classes( Is it a good idea to add dynamic tailwind classes depending on the props which we pass to a component? Something is like border-${prop}.

What I really lack in this video is a touch on specificity issue. It's similar to .a/.b classes issue but not entirely. I sometimes run into issues when I have a component with some default styles that need to be overwritten. And sometimes on more complicated components, when its hard/impractical to use ternary, issues happen. Edit: Maybe incomplete and simple but an example to show an idea for the issue. Text

Looks like my beautiful 1st site built on using @apply goes to trash or to rework. 😂