tailwind.config.js adalah pusat kustomisasi Tailwind — tempat menambahkan warna, font, spacing, dan lainnya.

Struktur dasar:

module.exports = {
  content: ["./src/**/*.{html,js,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#fff7ed",
          500: "#f97316",
          900: "#7c2d12",
        }
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
      spacing: {
        "18": "4.5rem",
        "88": "22rem",
      },
    }
  }
}

Sekarang bisa pakai: bg-brand-500, font-sans, p-18, dll.

@apply — mengekstrak utility ke class CSS:

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

Gunakan @apply hemat — utility classes di HTML biasanya lebih baik.

Arbitrary Values — gunakan nilai custom langsung:

<div class="w-[200px] bg-[#1a1a2e] top-[117px]">
  Nilai bebas!
</div>

Cocok untuk one-off values yang tidak perlu ditambahkan ke config.

theme() function — referensi nilai config di CSS:

.card {
  background: theme("colors.brand.50");
  padding: theme("spacing.4");
}