Tailwind CSS Best Practices for Modern Web Development

Why Tailwind CSS?

Tailwind CSS has revolutionized how we write styles. Instead of writing custom CSS, you compose designs using utility classes directly in your HTML.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

Best Practices

1. Use @apply Sparingly

While @apply is useful, overusing it defeats the purpose of utility-first CSS:

/* Good - for truly reusable components */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  @apply hover:bg-blue-700 transition-colors;
}

/* Avoid - just use utilities in HTML */
.my-custom-padding {
  @apply p-4;
}

2. Organize with Consistent Ordering

Keep utility classes in a consistent order:

1. Layout (flex, grid, position)
2. Spacing (margin, padding)
3. Sizing (width, height)
4. Typography (font, text)
5. Visual (background, border, shadow)
6. Interactive (hover, focus)

<div class="flex items-center justify-between p-4 w-full text-lg bg-white rounded-lg hover:shadow-lg">
  Content
</div>

3. Extract Components, Not Classes

Instead of extracting CSS, extract components:

// Button.jsx
function Button({ children, variant = "primary" }) {
  const variants = {
    primary: "bg-blue-500 hover:bg-blue-700 text-white",
    secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
  };

  return (
    <button className={`font-bold py-2 px-4 rounded ${variants[variant]}`}>
      {children}
    </button>
  );
}

4. Use the Theme Configuration

Customize your design system in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#f0f9ff",
          500: "#0ea5e9",
          900: "#0c4a6e",
        },
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
      spacing: {
        18: "4.5rem",
        22: "5.5rem",
      },
    },
  },
};

5. Leverage Dark Mode

Tailwind’s dark mode is powerful and easy:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Automatically adapts to user preference
</div>

Configure in your config:

module.exports = {
  darkMode: "class", // or 'media'
};

6. Use Responsive Prefixes Wisely

Design mobile-first, then add responsive variants:

<div class="text-base md:text-lg lg:text-xl">
  <!-- text-base on mobile, larger on bigger screens -->
</div>

<div class="flex flex-col md:flex-row gap-4">
  <!-- Stacked on mobile, row on tablet+ -->
</div>

7. Create Utility Groups with Plugins

For complex utilities, create plugins:

const plugin = require("tailwindcss/plugin");

module.exports = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".text-shadow": {
          textShadow: "2px 2px 4px rgba(0, 0, 0, 0.1)",
        },
        ".text-shadow-lg": {
          textShadow: "4px 4px 8px rgba(0, 0, 0, 0.2)",
        },
      });
    }),
  ],
};

Performance Tips

Purge Unused Styles

Tailwind automatically purges unused styles in production:

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
};

Use JIT Mode

Just-In-Time mode (default in v3+) generates styles on-demand:

• Faster build times
• Smaller CSS files
• Arbitrary values like w-[137px]

Common Patterns

Card Component

<div class="bg-white rounded-xl shadow-md overflow-hidden">
  <img class="h-48 w-full object-cover" src="..." alt="..." />
  <div class="p-6">
    <h3 class="text-xl font-semibold text-gray-900">Title</h3>
    <p class="mt-2 text-gray-600">Description text here.</p>
  </div>
</div>

Form Input

<input
  type="text"
  class="w-full px-4 py-2 border border-gray-300 rounded-lg
         focus:ring-2 focus:ring-blue-500 focus:border-transparent
         placeholder-gray-400 transition-colors"
  placeholder="Enter your name"
/>

Conclusion

Tailwind CSS shines when you embrace its philosophy of utility-first development. Focus on building components, use the theme configuration, and let Tailwind handle the CSS generation.

Happy styling!