Most people use Tailwind for the basics: flex, grid, spacing, colors. Cool.
But Tailwind is hiding some ridiculously useful tricks that can save you custom CSS and even JavaScript.
I've picked 4 features that I rarely see people talk about — and I bundled them into one live playground demo so you can poke at right now 👉 Playground link
1. group & peer: Style Without JavaScript
Ever wanted to show a button on hover? Or expand a section when a checkbox is checked? Normally you’d need JS. With group and peer, you don’t.
Hover card (group)
<div class="group border rounded-xl p-4 bg-white shadow hover:shadow-md">
<div class="flex justify-between">
<p class="font-medium">Project Alpha</p>
<svg class="h-4 w-4 transition-transform group-hover:translate-x-1" viewBox="0 0 20 20" fill="currentColor"><path d="M7 5l5 5-5 5"/></svg>
</div>
<button class="mt-3 opacity-0 group-hover:opacity-100 transition text-sm text-indigo-600 underline">
Open
</button>
</div>
Accordion (peer)
<input id="faq" type="checkbox" class="peer hidden">
<label for="faq" class="flex justify-between cursor-pointer">
<span>What is Alpha?</span>
<svg class="h-4 w-4 transition peer-checked:rotate-180" viewBox="0 0 20 20" fill="currentColor"><path d="M5 8l5 5 5-5"/></svg>
</label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-all">
<div class="overflow-hidden text-sm mt-2">No JS. Just peer-checked ✨</div>
</div>
👉 Perfect for cards, FAQs, menus — all without writing a single line of JavaScript.
2. prose: One Class for Blog-Ready Typography
Ever dropped a wall of text into your site and thought “this looks… bad”?
That’s where prose from the typography plugin comes in.
<article class="prose prose-slate bg-white p-6 rounded-xl border shadow">
<h1>Designing Calm UIs</h1>
<p><strong>Calm design</strong> means less noise and clearer hierarchy.</p>
<h2>Checklist</h2>
<ul>
<li>One clear action per screen</li>
<li>Use space, not borders</li>
<li>Let color mean something</li>
</ul>
</article>
3. line-clamp: Control Text Overflow in Style
Product cards, blog previews, news feeds — they all need text cutoffs. Stop writing custom CSS, Tailwind has your back.
<article class="border rounded-xl p-4 bg-white">
<h3 class="font-semibold line-clamp-1">Cutting churn with better onboarding</h3>
<p class="text-sm text-slate-600 line-clamp-2 mt-1">
We redesigned the first session with better defaults, progressive
disclosure, and less decision fatigue. The results? Way less churn.
</p>
</article>
👉 Your titles never wrap too long, your descriptions never explode the card. Clean and controlled.
4. Arbitrary Values & Variants: Little Superpowers
Sometimes you just need that exact size or want to style only a specific child on hover. Tailwind lets you break the rules with square brackets.
Exact sizing
<div class="h-[36px] w-[36px] rounded-lg bg-gradient-to-br from-indigo-300 to-indigo-600"></div>
Target child on hover
<button class="flex items-center gap-2 hover:[&>svg]:translate-x-1">
Open report
<svg class="h-4 w-4 transition" viewBox="0 0 20 20" fill="currentColor"><path d="M7 5l5 5-5 5"/></svg>
</button>
👉 Super handy for prototypes, micro-interactions, and “just one pixel more” tweaks.
Grab the Playground 🎮
I combined all these into one minimal page so you can explore, screenshot, and copy-paste.
Here’s the link again: https://play.tailwindcss.com/7utBRutgHA
Wrapping Up
Tailwind is way more than spacing utilities. Features like group, peer, prose, line-clamp, and arbitrary variants are the “oh wow” tools that make you faster and your UI cleaner.
Next time you’re about to write custom CSS, ask: “Can Tailwind do this already?”
Chances are — yup, it can.
Top comments (2)
This is such a great breakdown of TailwindCSS features that often go under the radar. I’ve been using Tailwind for a while, and I didn't realize how powerful group and peer could be for building interactions without JavaScript. It’s really eye-opening to see how easy it can be to create a hover effect or accordion-style components with just Tailwind’s built-in classes.
The prose class is also a game changer — as someone who works with content-heavy websites, this will save a ton of time formatting typography for blog posts. I also love the line-clamp utility for controlling text overflow, especially when working with product cards or news feeds.
And the arbitrary values feature? That's pure magic. It’s amazing that Tailwind gives us so much flexibility with minimal CSS. Thanks for sharing the playground demo — I can’t wait to test these features out in my next project!
Thank you for sharing this article.
As a beginner with TailwindCSS, I found it really helpful and practical.
I’d love to see more posts about its features in the future.