Belajar Tailwind CSS - Tailwind Config Mendalam

#Pendahuluan

tailwind.config.js adalah pusat kendali seluruh project Tailwind. Di episode 8 kita membedahnya secara mendalam: token granular untuk warna, spacing, radius, font, dan z-index; presets untuk berbagi konfigurasi antar project; serta safelist untuk skenario kelas dinamis yang luput dari JIT.

Kebiasaan menulis config yang rapi terbayar di project besar. Semakin banyak token didefinisikan secara terpusat, semakin sedikit nilai ajaib yang tersebar di markup, dan semakin mudah tim desain dan engineering menyepakati satu bahasa visual.

#theme Granular

#colors

Warna bisa didefinisikan sebagai palet bernama dengan skala nilai:

Token warna di config

theme: {
  extend: {
    colors: {
      brand: {
        50: "#eff6ff",
        100: "#dbeafe",
        500: "#3b82f6",
        600: "#2563eb",
        900: "#1e3a8a",
      },
    },
  },
},

Setiap kunci menjadi utility: bg-brand-500, text-brand-600, border-brand-900. Kalian juga bisa menggabungkan objek brand dengan warna bawaan — extend tidak menghapus default.

#spacing, borderRadius, fonts, dan zIndex

Token lain mengikuti pola yang sama:

Token granular lain

theme: {
  extend: {
    spacing: {
      128: "32rem",
      144: "36rem",
    },
    borderRadius: {
      "4xl": "2rem",
    },
    fontFamily: {
      sans: ["Inter", "system-ui", "sans-serif"],
    },
    zIndex: {
      max: "9999",
    },
  },
},

Spacing baru langsung tersedia sebagai p-128, m-144, w-128. borderRadius 4xl dipakai sebagai rounded-4xl. Font sans mengganti family bawaan, dan z-max memberi nilai z-index ekstrem. Semua utility mengalir otomatis dari token ini.

#Presets dan Sharing Config

Untuk beberapa project yang berbagi design language, ekstrak token ke preset:

Tailwind preset

// tailwind-preset.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: "#3b82f6",
        },
      },
    },
  },
};

Lalu pakai di setiap project:

Memakai preset

const preset = require("@org/tailwind-preset");
 
module.exports = {
  presets: [preset],
  content: ["./src/**/*.{html,js,ts,jsx}"],
  theme: { extend: {} },
  plugins: [],
};

presets: [preset] membuat konfigurasi theme, plugin, dan variants bisa dibagikan antar project — fondasi dari design system yang akan kita bangun di episode 10. Preset bisa di-override per project lewat extend.

#safelist dan Dynamic Class Handling

JIT hanya membangkitkan kelas yang ditemukan sebagai string utuh di content. Kelas yang disusun secara dinamis di runtime tidak akan terbaca. Solusinya safelist:

Menggunakan safelist

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx}"],
  safelist: [
    "bg-red-500",
    "text-center",
    {
      pattern: /bg-(red|green|blue)-(500|600)/,
    },
  ],
};

bg-red-500 dibangkitkan selalu. Pola regex pattern: /bg-(red|green|blue)-(500|600)/ mencakup seluruh kombinasi yang cocok — cocok untuk set kelas yang terbatas dan diketahui.

Safelist bukan solusi untuk membangun kelas secara sembarangan seperti bg- digabung nama warna dari database. Untuk itu, gunakan mapping eksplisit: simpan string kelas lengkap di sebuah map, bukan menyusun nama kelas potongan demi potongan. Strategi ini juga merupakan benteng keamanan — dibahas penuh di episode 11.

#Penutup

Episode 8 melengkapi pemahaman config: token granular untuk warna, spacing, radius, font, dan z-index; presets untuk berbagi konfigurasi; serta safelist untuk menangani kelas dinamis yang terbatas dan diketahui.

Inti yang harus dibawa pulang:

• Token di theme.extend langsung menjadi utility yang bisa dipakai.
• Palet warna memakai objek berskala: brand.500, brand.900.
• Presets membagikan theme dan plugin antar project.
• safelist memaksa kelas dibangkitkan meski tidak terdeteksi JIT.
• Pola regex di safelist hanya untuk set kelas yang terbatas.
• Untuk kelas dinamis, gunakan mapping eksplisit, bukan merangkai nama.

Di episode 9 selanjutnya kita akan membahas plugins & extending Tailwind — menulis plugin custom untuk utility, component, dan variant, memanfaatkan plugin official seperti forms dan typography, serta mengenal ecosystem publik seperti Tailwind UI, Headless UI, dan daisyUI.