5 Tailwind CSS Best Practices for Scalable UIs

Tailwind CSS has revolutionized how we write CSS, but with great power comes great responsibility. It's easy to end up with cluttered HTML if you're not careful. Here are 5 best practices to keep your projects clean.

1. Use Composition for Reusable Components

Instead of copying the same class strings everywhere, extract them into components. In React, this is natural.

// Bad
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

// Good
const Button = ({ children }) => (
  <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    {children}
  </button>
)

2. Avoid @apply When Possible

While @apply allows you to extract classes into CSS files, it defeats the purpose of utility-first CSS. It increases your CSS bundle size and separates concerns unnecessarily. Stick to component frameworks for reuse unless specific global styles are needed.

3. Order Your Classes

Consistency is key. Use a linter plugin like prettier-plugin-tailwindcss to automatically sort your classes. This makes diffs cleaner and code easier to scan.

4. Extend, Don't Override

When customizing the configuration, prefer extending the theme rather than overwriting it.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1a202c',
      },
    },
  },
}

This ensures you don't lose the default Tailwind palette.

5. Use Arbitrary Values Sparingly

Tailwind's JIT mode allows specific values like w-[17px]. While useful for pixel-perfect designs, relying on them too much can lead to inconsistent design systems. Stick to your theme constraints when possible.

Conclusion

Tailwind CSS is an incredible tool for rapid UI development. By following these guidelines, you can ensure your project remains maintainable as it scales.