Tailwind Tricks You Don't Use Yet

BACK

If you’re ready to take your Tailwind CSS skills up a notch, this post dives into some lesser-known utilities that can add finesse and flexibility to your designs. I’ll cover practical tips like using size- for responsive sizing, group and group-hover for more interactive hover effects, focus-within and peer for state-based styling, and decoration-wavy for a unique text effect. These tools allow you to create more dynamic and polished UIs with minimal effort—perfect for when you’re working on interactive elements or want to add subtle design details. Let’s dive in!

Tailwind CSS Tips You Might Not Be Using

Here are some utilities that go beyond the basics and offer some powerful ways to control design interactions:

1. size- Utility

Instead of separately defining width and height, the size- utility lets you set both with a single class. For example, size-8 will make an element 2rem by 2rem. This is perfect for creating consistent, responsive square elements across breakpoints:

<div class="bg-teal-600 rounded size-8">&nbsp;</div>

2. group and group-hover

The group and group-hover utilities are incredibly helpful for controlling nested hover effects. By wrapping elements in a group container, you can trigger hover states on child elements based on the parent’s hover state.

<div class="group relative p-4 border rounded-lg hover:shadow-lg">
  <img
    src="image.jpg"
    class="w-full h-40 object-cover rounded transition-transform group-hover:scale-105"
  />
  <h3 class="text-lg font-semibold text-gray-800 group-hover:text-blue-600">
    Hover Title
  </h3>
</div>

This approach enables multiple hover effects within a single container, making hover interactions feel cohesive and easy to manage.

3. focus-within

The focus-within utility lets you style a container element when any child element inside it gains focus, ideal for interactive containers such as forms, cards, or navigation components. This can provide a visual cue that highlights the container when users interact with it.

<div
  class="p-4 border border-gray-300 rounded-lg focus-within:ring-2 focus-within:ring-blue-500"
>
  <input
    type="text"
    class="w-full p-2 border rounded"
    placeholder="Focus here"
  />
</div>

When you focus on the input, the entire container gets a ring effect, improving the user experience for keyboard navigation.

4. peer and peer-*

The peer utility allows you to style elements based on the state of a sibling element. This is especially useful for custom checkboxes, radio buttons, or toggles where you want elements to visually react when a related element changes state.

<div class="flex items-center space-x-4 bg-white/80 p-6 rounded-lg">
  <input type="checkbox" id="toggleSwitch" class="peer p-2 accent-teal-400" />
  <label
    for="toggleSwitch"
    class="text-gray-700 transition-colors duration-300 peer-checked:text-teal-600"
  >
    I turn green when checked âś…
  </label>
</div>

When the checkbox is checked, the label’s background and text color change, giving you a custom-styled toggle without extra JavaScript.

5. decoration-wavy

Tailwind’s decoration-wavy utility adds a wavy underline to text, adding character to headings, links, or any text that needs a subtle emphasis. It’s a quick way to add style while keeping text readable.

<div class="flex items-center space-x-4 bg-white/80 p-6 rounded-lg">
  <p class="decoration-wavy underline decoration-teal-400 underline-offset-4">
    I'm so wavy!
  </p>
</div>

This effect draws attention without overpowering the text, making it a great choice for callouts or headings.

CodePen example

I made a CodePen with examples of each of these tricks.

Final Thoughts

Tailwind CSS has some powerful utilities beyond the basics, and these tips are perfect for taking your designs to the next level without extra complexity. Each one opens up unique styling possibilities that fit seamlessly into any workflow. I’ll keep experimenting with these tools and will be adding more examples soon, so stay tuned as I continue exploring what Tailwind can do.