Custom Configuration

Kustomisasi Konfigurasi Tailwind

Salah satu kekuatan Tailwind adalah kemampuannya untuk dikustomisasi sesuai dengan design system tim kamu melalui file tailwind.config.js.

Memperluas Theme Default

// tailwind.config.js
export default {
  theme: {
    extend: {
      // Warna custom
      colors: {
        brand: {
          50: "#f5f3ff",
          100: "#ede9fe",
          500: "#7c5cfc",
          600: "#6d4ff0",
          900: "#4c1d95",
        },
      },
      // Font custom
      fontFamily: {
        sora: ["Sora", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
      // Ukuran kustom
      spacing: {
        18: "72px",
        88: "352px",
      },
      // Border radius kustom
      borderRadius: {
        "2.5xl": "20px",
      },
    },
  },
}

Menggunakan Konfigurasi Custom

<!-- Menggunakan warna brand yang sudah dikonfigurasi -->
<button class="bg-brand-500 hover:bg-brand-600 text-white">
  Tombol Brand
</button>

<h1 class="font-sora text-brand-900">Judul dengan Font Sora</h1>

Plugin Tailwind

import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";

export default {
  plugins: [forms, typography],
}