10 Tailwind CSS Tips That Will Level Up Your UI

Introduction

Tailwind CSS has revolutionized how we write CSS. But are you using it to its full potential? Here are 10 tips that will take your Tailwind skills to the next level.

1. Use Arbitrary Values Wisely

When the default scale doesn't have what you need, use arbitrary values:

htmlCopy
<div class="top-[117px] w-[calc(100%-2rem)] bg-[#1a1a2e]">
  <!-- Custom values when you need them -->
</div>

2. Group Hover States

Use the group utility for parent-child hover effects:

htmlCopy
<div class="group cursor-pointer">
  <img class="transition group-hover:scale-105" />
  <p class="opacity-0 group-hover:opacity-100 transition">
    Revealed on hover!
  </p>
</div>

3. Use @apply Sparingly

While @apply can reduce repetition, overusing it defeats Tailwind's purpose:

cssCopy
/* Good — for truly repeated patterns */
.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white rounded-lg
         hover:bg-blue-700 transition;
}

/* Bad — just use the classes inline */
.my-card {
  @apply p-4 m-2 rounded; /* Too generic */
}

4. Responsive Design with Mobile-First

Always design mobile-first and scale up:

htmlCopy
<div class="text-sm md:text-base lg:text-xl">
  <!-- Scales up across breakpoints -->
</div>

5. Custom Animations

Extend Tailwind with custom keyframes:

javascriptCopy
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-out',
        'slide-up': 'slideUp 0.3s ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
};

6. Use Prose for Content

The @tailwindcss/typography plugin is perfect for blog content:

htmlCopy
<article class="prose prose-invert lg:prose-xl">
  <!-- Your markdown content renders beautifully -->
</article>

7. Dark Mode Made Easy

Implement dark mode with the dark: variant:

htmlCopy
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Automatic dark mode support!
</div>

8. Container Queries

Tailwind v4 supports container queries natively:

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

9. Logical Properties

Use logical properties for RTL support:

htmlCopy
<div class="ms-4 me-2 ps-3 pe-3">
  <!-- Works in both LTR and RTL -->
</div>

10. Performance with PurgeCSS

Tailwind v4 automatically tree-shakes unused styles. Keep your production bundle tiny by:

• Avoiding dynamic class construction
• Using complete class names
• Keeping content paths accurate

Conclusion

Tailwind CSS is more than just utility classes — it's a design system in a framework. Master these tips, and you'll be building production-ready UIs in record time.