Tailwind CSS is everywhere in 2026. Here are 15 tips that separate clean Tailwind code from a class soup.
1. Gradient Text
``html
<h1 class="bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent">
Gradient Heading
</h1>
`
The bg-clip-text and text-transparent combo turns any gradient into text color.
2. Truncate with Ellipsis
`html
<p class="truncate">This text will be cut off with an ellipsis...</p>
`
For multi-line truncation, use line-clamp-3.
3. Aspect Ratio
`html
<div class="aspect-video">
<iframe src="..." class="w-full h-full"></iframe>
</div>
`
No more padding-bottom hacks. aspect-square, aspect-video, or aspect-[4/3].
4. Container Queries
Tailwind v4 supports container queries natively:
`html
<div class="@container">
<div class="@md:grid-cols-2">...</div>
</div>
`
5. Group Hover
Style children based on parent hover:
`html
<div class="group">
<h3 class="group-hover:text-white">Title</h3>
<p class="group-hover:opacity-80">Description</p>
</div>
`
6. Ring Utilities
Better than border for focus states because rings don't affect layout:
`html
<button class="focus:ring-2 focus:ring-purple-400 focus:ring-offset-2">Click</button>
`
7. Space Between
`html
<div class="space-y-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
`
Adds consistent spacing without margin on the last element.
8. Divide Utilities
`html
<ul class="divide-y divide-gray-700">
<li class="py-4">Item 1</li>
<li class="py-4">Item 2</li>
</ul>
`
Borders between items without border on the first or last.
9. Backdrop Blur for Glass Effects
`html
<nav class="backdrop-blur-md bg-black/50">Navigation</nav>
`
10. Arbitrary Values
When the design system does not have what you need:
`html
<div class="top-[117px] w-[calc(100%-2rem)]">Custom values</div>
`
11. Dark Mode
`html
<div class="bg-white dark:bg-zinc-900 text-black dark:text-white">
Adapts to system preference
</div>
`
12. Responsive Typography
`html
<h1 class="text-2xl md:text-4xl lg:text-5xl">Scales with viewport</h1>
`
13. Animate on Scroll
`html
<div class="animate-fade-in-up [animation-timeline:view()]">
Animates when scrolled into view
</div>
`
14. Custom Shadows
`html
<div class="shadow-[0_4px_20px_rgba(167,139,250,0.3)]">Purple glow</div>
`
15. Use @apply Sparingly
Extract components, not utilities. If you are writing @apply` for more than 3 classes, make it a component instead. Tailwind is meant to be used in markup, not hidden in CSS files.
Summary
Clean Tailwind code uses the right utility for the job. Gradient text, container queries, and group hover are the ones you will use daily. Everything else is a nice-to-have.