I WISH I Knew These Tailwind Tips Earlier

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

Hot takes:

1) Chat gpt is better than cheat sheets now imo

2) Instead of re-using styles just use css variables. Define it as whatever u want. Change it in one place.

How do you use Prettier with Tailwind? TW newbie here

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

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.

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 don't understand your take on @apply directive. We use Wordpress (php and tailwind) to make websites, and we include a base styling to use on every website (like distance between different sections, text sizing, etc.). So for not repeating everything on every project, we have created a base css file with @apply directives with custom name classes which we can now use in our documents. It's also perfect for using with Gravity form styling and/or wysiwyg editor styling (we use prose in that case). So, I mean, there's the use for it, but I can see why you would want to avoid it in a one time deal project.

okay but what about save the style for a input in a variable and then called that variable in the input field to style it? is a problem of performance this approach? I am student.

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?

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

I'm 100% sold with tailwind as web dev, however, I'm also a web user who likes to make custom CSS styles for sites I visit frequently because I don't like what the web devs did or because I want a dark theme and they only provide the biggest insult against developers, a light theme, so I'm not sure how to modify what my toolchain for that, will have to figure it out.

having links will be great, mate

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 ...

"Don't be afraid of copy paste"
Me having to change styles in 300 files 👀 hahahahahaha
Just kiding, I got the idea and now I can say that it's Theo's fault that I am part of Tailwind's cult.

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?

"going from something you know in CSS to something you don't in Tailwind isn't always easy"

Jokes on you, I don't know anything in CSS

Hey Theo! Any opinion about UnoCSS?

this video is amaziiiing

Cheat sheets: Using cheat sheets can help you quickly find the right Tailwind classes and understand the syntax, especially if you're already familiar with CSS.

Keeping it simple: Tailwind encourages simplicity. Don't be afraid to copy and paste class names or duplicate styles when it makes sense. It's often the easiest and most maintainable solution.

Avoid using @apply: The @apply feature in Tailwind allows you to apply Tailwind classes in traditional CSS classes. However, it's recommended not to use this feature extensively as it can cause technical issues and complicate the codebase.

Order of Tailwind classes: The order in which you apply Tailwind classes is important. Using a tool like Tailwind prettier auto-sorting can make it easier to identify conflicting classes and streamline code review.

Avoid CSS class order dependencies: In CSS, the order of class names in the HTML doesn't dictate the order of style application. Relying on a consistent class order can help avoid debugging issues related to class order differences.

Embrace copy-pasting: Tailwind's consistent class structure makes it easy to copy and paste styles between projects. You don't always need to install or abstract styles as reusable components. Copying and pasting can save time and provide reliable results.

Use the Tailwind config wisely: Avoid extensively modifying the Tailwind config file. Instead, use it to add new styles rather than changing existing ones. Trying to make Tailwind work like other CSS frameworks or libraries can lead to unnecessary complexity.

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

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 😂

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

Can’t wait for AI to do all of these.

good tips. Thank you.

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

But why none of the ui libraries have it under the hood? Pretty much all of them use cssinjs crap

I Wish I knew about this video before :)

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 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....

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

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

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.

Tailwind is basically in line styles.

Hello non-cacheable bloat

I love tailwind. Tho, I'm facing a problem... I'm switching gears from JS to WordPress for a contract work and I can't, for the sake of sanity make the "Automatic class sorting" work with any .php file. It works with .html but not with .php. Does anyone know a solution to this problem? I'm using VSCode.

that painting is stunning

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

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.

I disagree with the copy pasting bit if you're structuring a UI that has a lot of properties in common, which is what you really want to have to have it maintainable and graphically coherent. I know this is an already popular opinion but it is NOT maintainable or readable to have repeated, copy-pasted code, probably with obfuscated small differences all over the place.

By putting your effort in one place you'll have 1: A better looking component, and 2: A single place where to look at the core properties.

But since some implementations may have to look slightly different you want them to be customizable, to handle that in React i'm used to expect an optional className prop in my component and its outmost element will look like

(eg. but might have way more classes) <div className={twMerge("h-40 bg-blue-400 text-white", className)}>...

twMerge just does the work for this purpose, since it will handle class collisions by overshadowing the previous classes given in the arguments of the function and stuff like twMerge(disabled?"bg-gray-200": hovered && "bg-green-400", className ).
Just joining the className strings won't handle collisions, precedence and conditionals properly.

You'll see at a glance only additional or divergent classes from the base component in it's implementation, need to see the whole? ctrl+click it. As it should be.

Order of CSS hasn’t caused me a whole lot of trouble. My browsers dev tools do a good job of telling me where the rule is located. You should take a look at Firefox!

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

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

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.

Tbh, any video with thumbnail that says tailwindcss is shit or something, i automatically know they are going to talk something else 😂

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

For building design systems just go with Stitches if you're using React. IMO a much more comfortable experience with variants and other super cool stuff Tailwind simply can't provide.

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