10 Tailwind CSS Tricks Every Developer Should Know
From arbitrary values to the JIT engine, these lesser-known Tailwind features will level up your workflow.
Tailwind CSS has grown from a controversial utility-first experiment into the dominant CSS framework for modern web development. But most developers only scratch the surface of what it can do.
1. Arbitrary values
Need a one-off value that isn't in the default scale? Use square brackets:
<div class="w-[327px] mt-[13px] bg-[#1a2b3c]">This works for any property and keeps you from reaching for a separate CSS file.
2. Group hover
Apply styles to children when a parent is hovered using the group modifier:
<div class="group">
<p class="opacity-0 group-hover:opacity-100 transition">Shows on hover</p>
</div>3. Peer modifier
The peer modifier lets a sibling react to another element's state — perfect for form validation:
<input class="peer" required />
<p class="hidden peer-invalid:block text-red-500">This field is required</p>4. Container queries
Tailwind v3.2+ supports container queries so you can style components based on their own width, not the viewport:
<div class="@container">
<p class="@lg:text-xl">Big text in large containers</p>
</div>5. Dark mode
Add the dark: prefix to any utility. Set darkMode: 'class' in your config, then toggle the dark class on `<html>`.
These five tricks alone will make your Tailwind code leaner and more expressive. The remaining five are just as powerful — experiment with the docs and you'll keep finding new ways to do more with less.