10 Tailwind CSS Tips for Better Productivity

Tailwind CSS has revolutionized how we write styles. Here are 10 tips to help you get the most out of it.

 

1. Use the @apply Directive Sparingly

While @apply is useful, overusing it defeats the purpose of utility-first CSS:

/* Good - for commonly repeated patterns */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
}

/* Better - just use utilities in HTML */
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">

 

2. Leverage Group Hover

The group utility is incredibly powerful for parent-child hover states:

<div class="group p-4 hover:bg-gray-100">
  <h3 class="group-hover:text-blue-500">Title</h3>
  <p class="group-hover:text-gray-700">Description</p>
</div>

 

3. Use Arbitrary Values

When you need a specific value that’s not in the default scale:

<div class="w-[137px] h-[42px] bg-[#1a1a1a]">
  Custom dimensions and colors
</div>

 

4. Create Custom Animations

Extend the default animations in your config:

module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
        'bounce-gentle': 'bounce 2s ease-in-out infinite',
      }
    }
  }
}

 

5. Use the Space Utilities

Instead of adding margin to each child, use space utilities on the parent:

<!-- Instead of this -->
<div>
  <div class="mb-4">Item 1</div>
  <div class="mb-4">Item 2</div>
  <div>Item 3</div>
</div>

<!-- Do this -->
<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

 

6. Master the Divide Utilities

Add borders between children elements without extra markup:

<ul class="divide-y divide-gray-200">
  <li class="py-4">First item</li>
  <li class="py-4">Second item</li>
  <li class="py-4">Third item</li>
</ul>

 

7. Use Peer for Sibling States

Style elements based on sibling state with the peer utility:

<input type="checkbox" class="peer" />
<label class="peer-checked:text-blue-500 peer-checked:font-bold">
  This label changes when checkbox is checked
</label>

 

8. Leverage Container Queries

Use container queries for component-level responsive design:

<div class="@container">
  <div class="@lg:flex @lg:items-center">
    <!-- Responds to container width, not viewport -->
  </div>
</div>

 

9. Use the Ring Utilities for Focus States

Create beautiful focus states without affecting layout:

<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Accessible Button
</button>

 

10. Organize with Prettier Plugin

Keep your classes organized automatically with the official Prettier plugin:

npm install -D prettier-plugin-tailwindcss

This sorts your classes in a consistent order, making code reviews easier and reducing merge conflicts.

 

Conclusion

These tips will help you write more efficient Tailwind CSS and improve your development workflow. The key is to embrace the utility-first approach while knowing when to extract components for better maintainability.