Tailwind CSS Best Practices: Tips dari Real Project Experience

Tailwind CSS udah jadi salah satu tools favorit gue untuk styling. Tapi kalau gak managed dengan baik, code-nya bisa jadi nightmare.

Ini best practices yang gue terapin di semua project (termasuk portfolio ini yang lagi kalian buka).

1. Organize dengan Component Pattern 🧩

Jangan langsung nulis panjang-panjang di JSX/HTML!

❌ Bad Practice

<button className="inline-flex items-center justify-center gap-2 rounded-full border border-gray-200 bg-white/50 px-3 py-1 text-xs font-sans font-medium text-gray-700 backdrop-blur-sm hover:bg-white hover:shadow-sm transition-all duration-200">
  Click Me
</button>

✅ Good Practice

// components/Button.tsx
const buttonVariants = {
  primary: "bg-blue-600 text-white hover:bg-blue-700",
  secondary: "bg-gray-600 text-white hover:bg-gray-700",
  ghost: "border border-gray-200 bg-white/50 hover:bg-white"
}

export function Button({ variant = 'primary', children }) {
  return (
    <button className={`inline-flex items-center justify-center gap-2 rounded-full px-3 py-1 text-xs font-sans font-medium transition-all ${buttonVariants[variant]}`}>
      {children}
    </button>
  )
}

2. Use @apply untuk Pattern yang Berulang 🔁

Tapi JANGAN overuse!

/* styles/components.css */

/* Good - Reusable patterns */
.btn-base {
  @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 font-medium transition-all;
}

.card {
  @apply rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md;
}

/* Bad - Too specific */
.header-title-with-icon {
  @apply text-2xl font-bold text-blue-600 flex items-center gap-2;
}

Rule of thumb: Kalau pattern dipake 3+ kali, consider extract ke @apply.

3. Consistent Spacing System 📏

Jangan random!

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      // Base 4px
      '1': '0.25rem',   // 4px
      '2': '0.5rem',    // 8px
      '3': '0.75rem',   // 12px
      '4': '1rem',      // 16px
      '6': '1.5rem',    // 24px
      '8': '2rem',      // 32px
      '12': '3rem',     // 48px
      '16': '4rem',     // 64px
    }
  }
}

Usage:

<div className="p-4 gap-6 mt-8">  ✅ Consistent
<div className="p-3.5 gap-5 mt-7">  ❌ Random

4. Custom Design Tokens 🎨

Define di config, jangan hardcode!

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          // ... 
          600: '#2563eb',
          700: '#1d4ed8',
        },
        brand: '#2563eb',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        serif: ['Source Serif 4', 'serif'],
        mono: ['Roboto Mono', 'monospace'],
      },
    },
  },
}

Usage:

<h1 className="font-sans text-brand">  ✅
<h1 className="font-['Inter'] text-[#2563eb]">  ❌

5. Responsive Design Pattern 📱

Mobile-first ALWAYS!

{/* ❌ Bad - Desktop first */}
<div className="w-64 md:w-48 sm:w-full">

{/* ✅ Good - Mobile first */}
<div className="w-full sm:w-48 md:w-64">

{/* ✅ Better - Semantic */}
<div className="w-full sm:max-w-md lg:max-w-2xl">

Breakpoints gue pakai:

sm: '640px'   // Mobile landscape
md: '768px'   // Tablet
lg: '1024px'  // Desktop
xl: '1280px'  // Large desktop

6. Dark Mode Strategy 🌙

Di portfolio ini gue udah implement dark mode. Caranya:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // atau 'media'
}

{/* Pattern yang gue pake */}
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Content
</div>

Pro tip: Bikin component yang udah handle dark mode:

// components/Card.tsx
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">

7. Performance Optimization ⚡

Purge CSS Configuration

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}',
  ],
  // Purge akan remove unused classes di production
}

Avoid Dynamic Classes

{/* ❌ Bad - Won't be purged properly */}
<div className={`text-${color}-600`}>

{/* ✅ Good - Explicit */}
<div className={color === 'blue' ? 'text-blue-600' : 'text-red-600'}>

{/* ✅ Better - Safelist di config */}
// tailwind.config.js
safelist: ['text-blue-600', 'text-red-600']

8. Organize Class Names 📋

Gue pake pattern: Layout → Spacing → Typography → Colors → Effects

{/* ✅ Organized */}
<div className="
  flex items-center justify-between
  p-4 gap-4
  text-lg font-semibold
  text-gray-900 bg-white
  rounded-lg shadow-sm hover:shadow-md
  transition-all
">

{/* ❌ Random order */}
<div className="text-gray-900 flex shadow-sm p-4 rounded-lg bg-white font-semibold items-center transition-all text-lg hover:shadow-md gap-4 justify-between">

Tool: Install Tailwind CSS IntelliSense extension buat auto-sorting!

9. Plugin System 🔌

Leverage official plugins:

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

10. Document Your Patterns 📚

Bikin simple style guide atau component library!

# Button Variants

## Primary
`className="btn-base bg-blue-600 text-white hover:bg-blue-700"`

## Secondary
`className="btn-base bg-gray-600 text-white hover:bg-gray-700"`

## Ghost
`className="btn-base border border-gray-300 hover:bg-gray-50"`

Common Mistakes yang Harus Dihindari

1. Overuse @apply - Kehilangan utility-first benefits
2. Hardcode values - h-[137px] instead of h-32
3. Ignore responsive - Cuma design buat desktop
4. Inline everything - Gak extract repeated patterns
5. Gak pake config - Semua di inline classes

Tools yang Gue Recommend

1. Tailwind CSS IntelliSense - VS Code extension (MUST HAVE!)
2. Headless UI - Unstyled components yang accessible
3. Tailwind Merge - Merge classes properly
4. Class Variance Authority (CVA) - Type-safe variants

Kesimpulan

Tailwind CSS powerful banget, tapi:

• ✅ Extract repeated patterns
• ✅ Use config untuk design tokens
• ✅ Organize class names
• ✅ Think in components
• ✅ Mobile-first approach

Dengan best practices ini, code kalian bakal lebih maintainable dan scalable! 🚀

Happy styling! 🎨