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',
      }
    }
  }
}

Conclusion

These tips will help you write more efficient Tailwind CSS and improve your development workflow.