10 Tips & Tricks for Writing Better Tailwind CSS (v4)
Tailwind CSS v4 brings a cleaner, faster experience with even more flexibility. But if you’re not careful, your code can still turn into a tangled mess of utility classes.
Here are 10 battle-tested tips for writing better, scalable Tailwind CSS v4 — with real HTML examples (no JSX or Vue).
1. Group Classes Logically
When your class list gets long, structure it by layout, spacing, typography, and effects. Keeps things readable.
Bad:
<div class="text-center p-4 rounded bg-white shadow-lg mx-auto w-full max-w-md">
Better:
<div class="mx-auto w-full max-w-md p-4 rounded bg-white shadow-lg text-center">
2. Extract Reusable Components
Stop repeating the same buttons or cards everywhere. Use partials or includes.
Before:
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
Save
</button>
After:
<!-- _button.html -->
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
{{ label }}
</button>
3. Use @apply to Clean Up Repetitive Classes
Tailwind v4 still supports @apply for utility grouping in custom CSS.
Example:
/* styles.css */
.btn-primary {
@apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700;
}
<button class="btn-primary">Click</button>
Use it sparingly for common components (buttons, cards, alerts).
4. Mobile-First = Performance First
Tailwind is mobile-first. Start with base styles, then scale up.
<p class="text-sm sm:text-base md:text-lg lg:text-xl">
Responsive text scaling
</p>
Keeps your site fast and optimized for smaller screens.
5. Use Arbitrary Values with Caution
Tailwind v4 gives you full control. But don’t go overboard.
<!-- OK when needed -->
<div class="mt-[22px] w-[37rem] bg-[#1f2937]">
Prefer Tailwind’s scale when possible:
<div class="mt-6 w-[37rem] bg-gray-800">
Use arbitrary values only when designs demand pixel-perfect precision.
6. Master Flex & Grid Layouts
Tailwind gives you layout superpowers. Learn them well.
Flex:
<div class="flex justify-between items-center">
<span>Logo</span>
<nav>Menu</nav>
</div>
Grid:
<div class="grid grid-cols-3 gap-4">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
Combine both for complex UIs.
7. Use container and max-w- Together
Don’t stretch your content edge-to-edge.
<div class="container mx-auto px-4 max-w-screen-lg">
<h1 class="text-2xl font-bold">Welcome</h1>
</div>
This gives you a responsive, centered layout out of the box.
8. Style States Clearly: Hover, Focus, Active
Tailwind makes it easy to add interactive states — no extra CSS needed.
<a href="#" class="text-blue-600 hover:text-blue-800 focus:underline">
Read more
</a>
For buttons:
<button class="bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-300">
Submit
</button>
9. Dark Mode: Use the .dark Class Strategy
Tailwind v4 supports dark mode out of the box using .dark.
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
Dark mode ready
</div>
Toggle it by adding .dark to <html> or <body>:
<html class="dark">
No config needed.
10. Avoid Unnecessary Nesting
Tailwind encourages flat HTML. No need to wrap everything.
Too much:
<div>
<div class="bg-gray-100 p-4">
<div class="text-center">Hello</div>
</div>
</div>
Better:
<div class="bg-gray-100 p-4 text-center">
Hello
</div>
Keep it lean. Keep it clean.
Final Thoughts
Tailwind CSS v4 makes styling fast — if you stay disciplined.
Here’s a quick recap:
- ✅ Group classes logically
- ✅ Extract reusable UI pieces
- ✅ Use @apply for common patterns
- ✅ Stick to Tailwind’s scale when possible
- ✅ Avoid nesting like it’s 2010
Clean Tailwind code = faster projects, easier maintenance, happier devs.
🚀 Let’s build something amazing! If you have a project in mind or need help with your next design system, feel free to reach out.
📧 Email: safi.abdulkader@gmail.com | 💻 LinkedIn: @abdulkader-safi | 📱 Instagram: @abdulkader.safi | 🏢 DSRPT
Drop me a line, I’m always happy to collaborate! 🚀
