Tailwind CSS Dunia Nyata: Arsitektur Gatekeeper

Organisasi besar tidak membiarkan semua orang mengatur gaya (styling) setiap halaman. Mereka menggunakan struktur khusus untuk menjaga kode tetap bersih.

Sistem desain yang matang seperti Shopify Polaris menggunakan dua peran terpisah:

  • Penulis Komponen (The Gatekeepers): Tim ini membangun UI inti. Mereka menulis kelas-kelas Tailwind. Mereka mengelola aksesibilitas, mode gelap, dan token desain.

  • Pengembang Fitur (The Assemblers): Tim ini membangun produk dan dasbor. Mereka fokus pada logika bisnis dan tata letak. Mereka tidak memilih warna atau jarak (spacing).

Organisasi menegakkan batasan ini dengan aturan lint dan peninjauan kode (code reviews).

Apa yang harus Anda lakukan: • Gunakan utilitas tata letak seperti flex, grid, dan gap.

Apa yang harus Anda hindari: • Menambahkan gaya visual baru seperti bg-indigo-600 atau text-lg secara langsung di dalam halaman fitur. Gunakan komponen yang sudah ada sebagai gantinya.

Berikut adalah cara kerjanya dalam kode.

Tim Sistem Desain membuat tombol yang dapat digunakan kembali di @/components/ui/button.tsx. Mereka memusatkan gaya visual:

import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
  className?: string;
}

export function Button({
  variant = 'primary',
  className = '',
  children,
  ...props
}: ButtonProps) {
  const baseStyles = "px-4 py-2 rounded-lg font-medium text-sm transition-all focus:outline-none focus:ring-2 focus:ring-offset-2";

  const variants = {
    primary: "bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500",
    secondary: "bg-slate-100 text-slate-700 hover:bg-slate-200 focus:ring-slate-500"
  };

  return (
    <button className={`${baseStyles} ${variants[variant]} ${className}`} {...props}>
      {children}
    </button>
  );
}

Pengembang Fitur kemudian membangun halaman dengan menyusun blok-blok ini:

import { Button } from "@/components/ui/button";

export default function Dashboard() {
  return (
    <div>
      <Button variant="primary" className="mt-4">
        Save Changes
      </Button>
    </div>
  );
}

Struktur ini menawarkan tiga manfaat utama:

  1. Pemeliharaan yang lebih mudah. Jika Anda menghapus sebuah tombol, Anda tidak meninggalkan CSS yang tidak terpakai (dead CSS).
  2. Pembaruan yang cepat. Jika merek Anda berubah dari indigo ke violet, Anda hanya perlu mengubah satu file. Perubahan tersebut akan mengalir ke seluruh aplikasi.
  3. Konsistensi. Setiap pengembang menggunakan token desain yang sama.

Tujuannya bukan sekadar tentang Tailwind. Ini adalah tentang menciptakan batasan antara mereka yang membangun sistem dan mereka yang menggunakannya.

Di Bagian 2, saya akan membahas cara menangani pengecualian desain tanpa merusak arsitektur Anda.

Sumber: https://dev.to/cathylai/real-world-tailwind-css-the-gatekeeper-architecture-a-senior-developers-guide-part-12-m36