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.