Syntax Candy
←Back to Blog
3 min read
Syntax Candy
Syntax Candy

Tailwind CSS Best Practices

Master Tailwind CSS with these essential best practices to write cleaner, more maintainable, and performant styling for your web projects.

Tailwind CSS Best Practices hero banner

Tailwind CSS Best Practices

Tailwind CSS has revolutionized the way developers approach styling. By providing a utility-first framework, it allows you to build complex designs without ever leaving your HTML or JSX. However, to get the most out of Tailwind, it's important to follow best practices.

1. Use a Consistent Color Palette

Define a consistent color palette in your tailwind.config.ts and reuse it throughout your project:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f7ffe0',
          400: '#c4ff00',
          900: '#3a5200',
        },
      },
    },
  },
};

This ensures brand consistency and makes it easy to update colors globally.

2. Extract Repeated Patterns into Components

Instead of repeating utility class combinations, extract them into components:

// ❌ Bad: Repeated classes
<button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  Click me
</button>

// ✅ Good: Reusable component
export function Button({ children }) {
  return (
    <button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
      {children}
    </button>
  );
}

3. Organize Utilities by Layer

Use Tailwind's layers to organize your CSS:

@layer components {
  .card {
    @apply rounded-lg bg-white p-6 shadow-md;
  }
}

@layer utilities {
  .text-shadow {
    @apply text-gray-700 drop-shadow;
  }
}

4. Responsive Design First

Design mobile-first and add responsive breakpoints progressively:

<div className="w-full md:w-1/2 lg:w-1/3">
  Responsive container
</div>

Tailwind's breakpoints are:

  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px
  • 2xl: 1536px

5. Use CSS Variables for Dynamic Values

Combine CSS variables with Tailwind for dynamic theming:

:root {
  --brand-400: #c4ff00;
}

@theme inline {
  --color-brand-400: var(--brand-400);
}

Then use in your classes:

<div className="bg-brand-400 hover:bg-brand-500">
  Dynamic brand color
</div>

6. Avoid Inline Arbitrary Values When Possible

Minimize inline arbitrary values:

// ❌ Avoid when possible
<div className="w-[237px] h-[42px]">Content</div>

// ✅ Better: Use config extensions
<div className="w-custom h-custom">Content</div>

7. Performance Optimization

Purge Unused Styles

Configure your tailwind.config.ts to scan the correct files:

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './src/**/*.mdx',
  ],
};

Minimize CSS

For production, Tailwind automatically minifies CSS. Ensure you're building with npm run build.

8. Dark Mode Configuration

Enable dark mode support:

<html className="dark">
  <body className="bg-white dark:bg-gray-900">
    Your content
  </body>
</html>

9. Use @apply Sparingly

While @apply is useful, use it strategically:

/* ✅ Good: Component-level styles */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600;
  }
}

/* ❌ Avoid: One-off utilities */
.margin-custom {
  @apply m-4;
}

10. Documentation and Comments

Document your color decisions and component patterns:

/**
 * Brand color for accent elements
 * Used in CTAs, badges, and hover states
 */
<div className="bg-brand-400">Primary Action</div>

Real-World Example

Here's a complete example combining best practices:

// components/Card.tsx
export function Card({ title, children }) {
  return (
    <article className="rounded-lg bg-white p-6 shadow-md hover:shadow-lg transition-shadow">
      <h2 className="mb-4 text-2xl font-bold text-gray-900">
        {title}
      </h2>
      <div className="text-gray-700">
        {children}
      </div>
    </article>
  );
}

Conclusion

By following these best practices, you'll:

  • Write more maintainable code
  • Ensure consistency across your project
  • Optimize performance
  • Make it easier for team members to understand your styling

Master these practices, and you'll become a Tailwind CSS expert! 🎨

Read more articles