Gerçek Dünyada Tailwind CSS: Gatekeeper Mimarisi

Büyük organizasyonlar, herkesin her sayfayı stillendirmesine izin vermez. Kodlarını temiz tutmak için belirli bir yapı kullanırlar.

Shopify Polaris gibi olgun tasarım sistemleri iki ayrı rol kullanır:

  • Bileşen Yazarları (Gatekeeper'lar): Bu ekip temel kullanıcı arayüzünü (UI) oluşturur. Tailwind sınıflarını onlar yazar. Erişilebilirlik, karanlık mod ve tasarım jetonlarını (design tokens) onlar yönetir.

  • Özellik Geliştiricileri (Birleştiriciler): Bu ekip ürünleri ve panelleri (dashboard) oluşturur. İş mantığına ve yerleşime odaklanırlar. Renkleri veya boşlukları (spacing) onlar seçmezler.

Organizasyonlar bu sınırı lint kuralları ve kod incelemeleri (code reviews) ile uygular.

Yapmanız gerekenler: • flex, grid ve gap gibi yerleşim yardımcılarını (layout utilities) kullanın.

Kaçınmanız gerekenler: • Özellik sayfalarının içine doğrudan bg-indigo-600 veya text-lg gibi yeni görsel stiller eklemekten kaçının. Bunun yerine mevcut bir bileşen kullanın.

Kod tarafında işleyiş şu şekildedir.

Tasarım Sistemi Ekibi, @/components/ui/button.tsx dosyasında yeniden kullanılabilir bir buton oluşturur. Görsel stilleri merkezileştirirler:

import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes { 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} ); }

Özellik Geliştiricisi daha sonra bu blokları birleştirerek sayfayı oluşturur:

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

export default function Dashboard() { return (

); }

Bu yapı üç ana avantaj sunar:

  1. Daha kolay bakım. Bir butonu kaldırdığınızda, geride ölü (dead) CSS bırakmazsınız.
  2. Hızlı güncellemeler. Markanız indigo renginden violet rengine dönerse, tek bir dosyayı değiştirirsiniz. Değişiklik tüm uygulamaya yayılır.
  3. Tutarlılık. Her geliştirici aynı tasarım jetonlarını (design tokens) kullanır.

Amaç sadece Tailwind ile ilgili değil. Amaç, sistemi inşa edenler ile onu kullananlar arasında bir sınır oluşturmaktır.

  1. Bölümde, mimarinizi bozmadan tasarım istisnalarının nasıl ele alınacağını tartışacağım.

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