I WISH I Knew These Tailwind Tips Earlier
If you’re a web developer or designer, chances are you’ve heard of Tailwind CSS. It’s a utility-first CSS framework that has gained a lot of popularity in recent years. Whether you’re a beginner or an experienced user, there are always tips and tricks that can make your workflow more efficient. Here are a few Tailwind tips that I wish I knew earlier:
- Use the @apply directive: Tailwind makes it easy to create custom utilities, but the @apply directive allows you to group multiple utilities into a single class. This can clean up your HTML and make your styles more reusable.
- Understand the utility classes: Tailwind provides a large set of utility classes for styling elements. Understanding these classes and how they work together can save you time and make your code more consistent.
- Customize your configuration: Tailwind allows you to customize the default configuration to fit your project’s specific needs. Take the time to familiarize yourself with the configuration file and make adjustments as necessary.
- Use the @screen directive: Tailwind’s responsive design features are powerful, and the @screen directive allows you to create custom responsive classes based on screen sizes. This can make your design more flexible and adaptable to different devices.
- Explore the plugin ecosystem: Tailwind has a thriving plugin ecosystem that can extend its functionality. Whether you need additional components, design tools, or integrations with other libraries, there’s likely a plugin that can help you achieve your goals.
These are just a few of the tips that can help you make the most of Tailwind CSS. Whether you’re just getting started or you’ve been using it for a while, there’s always more to learn. By taking the time to explore the framework and its features, you can become a more efficient and effective developer or designer.
weirdly enough, tailwind felt actually really natural for me.
thus it wasnt scary at all!
what is the extension called? for tailwind class sorting.
Hi theo,
In svelte you can use
class:<className>={<varName>}
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 ?
The whole purpose of tailwind is avoiding naming things
Epic Video! Love It!
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.
{2023-10-19}
It is so simply to debug css with dev tools. It is much more complex to understand the lines of code that tailwind generates.
we should not see tailwind as copy/pasting as we are actually "reusing" the defined classes, we should look at it more like at modular CSS
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?
1:50 just write proper code and you will have to fix 1 place instead of all 5 links
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