TailwindCSS Tips and Tricks

TailwindCSS is a utility-first CSS framework that makes it easy to build responsive, accessible interfaces without leaving your HTML.

Use the @apply Directive Sparingly

While @apply can help reduce repetition, overusing it defeats the purpose of utility classes. Reserve it for truly reusable base styles.

/* Good: base button style */
.btn {
  @apply inline-flex items-center px-4 py-2 rounded-md font-medium;
}

Responsive Design Made Easy

Tailwind’s responsive prefixes (sm:, md:, lg:, xl:) make mobile-first design straightforward:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Cards -->
</div>

Dark Mode Support

Enable dark mode in your config and use the dark: prefix:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
}

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Content
</div>

JIT Mode for Arbitrary Values

Use square brackets for one-off values without extending your config:

<div class="w-[42px] top-[117px] bg-[#bada55]">...</div>