Tailwind CSS: Tips and Tricks

Tailwind CSS is a powerful utility-first CSS framework. Here are some tips to help you master it.

1. Use @apply for Repeated Patterns

When you have repeated utility patterns, extract them:

.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
}

2. Customize Your Theme

Extend the default theme in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e'
        }
      }
    }
  }
}

3. Use JIT Mode

Just-In-Time mode generates styles on-demand, resulting in faster build times and smaller file sizes.

4. Responsive Design

Tailwind makes responsive design easy with breakpoint prefixes:

<div class="text-sm md:text-base lg:text-lg">Responsive text</div>

Conclusion

These tips will help you work more efficiently with Tailwind CSS and create beautiful, responsive designs.