5 Tips to master Tailwind CSS

Tailwind CSS has become my favorite CSS framework. Here I share some tips that have helped me be more productive.

1. Use @apply sparingly

Although @apply is useful, overusing it goes against Tailwind’s philosophy:

/* ❌ Avoid this */
.btn {
  @apply px-4 py-2 bg-blue-500 text-white rounded;
}

/* ✅ Better use components */
<button class="px-4 py-2 bg-blue-500 text-white rounded">
  Click me
</button>

2. Customize your color palette

Don’t limit yourself to the default colors. Create your own palette:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          50: '#f0f9ff',
          // ... more shades
          900: '#0c4a6e',
        }
      }
    }
  }
}

3. Take advantage of responsive variants

Tailwind makes responsive design very easy:

<div class="text-sm md:text-base lg:text-lg xl:text-xl">
  Text that scales according to viewport
</div>

4. Use arbitrary values when needed

For specific values that are not in your configuration:

<div class="top-[117px] w-[347px]">
  Arbitrary values
</div>

5. Organize your classes with plugins

Use plugins like prettier-plugin-tailwindcss to automatically sort your classes.

Conclusion

Tailwind CSS is incredibly powerful when you understand its patterns. These tips will help you write cleaner and more maintainable code.

Do you have any additional tips? Share it!