Technical Tutorials

Modern frontend dünyasında, tasarım ile geliştirme arasındaki boşluk genellikle tasarım sistemleriyle doldurulur. Ancak, sıfırdan bir tane oluşturmak korkutucu olabilir. Güçlü kombinasyon: Tailwind CSS ve Headless UI. Bu ikili, geliştiricilerin kısıtlayıcı stillerle uğraşmadan erişilebilir, yeniden kullanılabilir ve tutarlı bileşenler oluşturmasını sağlar. Bu yazıda, yüksek kod kalitesini korurken prototipleme iş akışınızı hızlandıran sağlam bir tasarım sisteminin nasıl mimari olarak oluşturulacağı incelenecektir.

Neden Tailwind ve Headless UI Birlikte Kullanılır?

Tailwind CSS, birincil fayda (utility-first) yaklaşımıyla stillendirme konusunda mükemmeldir ve UI'nızın her yönü üzerinde ince kontrol sağlar. Ancak, açılır menüler, modal pencereler veya sekmeler gibi karmaşık widget'lar için karmaşık durum yönetimi veya erişilebilirliği (a11y) kutudan çıktığı gibi ele almaz. React Headless kütüphanesi tarafından sağlanan Headless UI bileşenleri bu sorunu çözer. JavaScript mantığını, klavye gezinimini ve aria özniteliklerini sağlarlar; görsel stillendirmeyi ise tamamen Tailwind sınıfları aracılığıyla size bırakırlar.

Bu sorumluluk ayrımı, bileşen kitaplığınızın hafif, erişilebilir ve tamamen özelleştirilebilir kalmasını sağlar; bu da ölçeklenebilir bir tasarım sisteminin kutsal kasesidir.

Adım 1: Proje Kurulumu ve Yapılandırması

Kod yazmadan önce, ortamınızın doğru yapılandırıldığından emin olun. Gerekli bağımlılıkları yükleyin. Bu örnekte, Tailwind CSS kullanan bir React ortamı varsayıyoruz.

npm install @headlessui/react @headlessui/vue
# Veya uygunsa npm/yarn/pnpm kullanın

Ardından, tailwind.config.js dosyanızı temanızı genişletecek şekilde yapılandırın. İyi bir tasarım sistemi, tutarlı bir renk paleti ve boşluk ölçeğiyle başlar.

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          700: '#1d4ed8',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Adım 2: Yeniden Kullanılabilir Temel Bileşenlerin Oluşturulması

Bir tasarım sistemi gerçekten oluşturmak için, Headless UI bileşenlerini görünüm dosyalarınızda tekrar tekrar doğrudan kullanmamalısınız. Bunun yerine, bunları kendi temel bileşenlerinizle sarın. Bu sayede, uygulamanızdaki her düğme, giriş alanı veya modal pencere marka yönergelerinize uygun kalır.

Örneğin, Tailwind'in standart düğme stillerini saran yeniden kullanılabilir bir CustomButton oluşturalım. Headless UI karmaşık etkileşimlere odaklanırken, basit öğeler merkezi stil yönetiminden faydalanır.

// components/CustomButton.jsx
import React from 'react';

const CustomButton = ({ children, variant = 'primary', className, ...props }) => {
  const baseStyles = "px-4 py-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
  
  const variants = {
    primary: "bg-primary-500 text-white hover:bg-primary-700 focus:ring-primary-500",
    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500",
  };

  return (
    
  );
};

export default CustomButton;

Adım 3: Karmaşık Headless Bileşenlerin Entegrasyonu

Şimdi daha karmaşık bir bileşene, bir Combobox'a bakalım. Headless UI, açılır menü mantığını yöneterek bu işlemi inanılmaz derecede kolaylaştırır; biz de Tailwind sınıflarımızı uygularız.

import { Combobox } from '@headlessui/react';
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';

const people = [
  { id: 1, name: 'Wade Cooper' },
  { id: 2, name: 'Arlene Mccoy' },
];

export default function UserCombobox() {
  const [selected, setSelected] = React.useState(people[0]);
  const [query, setQuery] = React.useState('');

  const filteredPeople = query === ''
    ? people
    : people.filter((person) =>
        person.name.toLowerCase().replace(/\s+,/, '').includes(query.toLowerCase())
      );

  return (
    
      
        
           setQuery(event.target.value)}
          />
          
            
          
        
        
          {filteredPeople.length === 0 && query !== '' ? (
            
              Hiçbir şey bulunamadı.
            
          ) : (
            filteredPeople.map((person) => (
              
                  `relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-blue-600 text-white' : 'text-gray-900'}`
                }
                value={person}
              >
                {({ selected, active }) => (
                  <>
                    
                      {person.name}
                    
                    {selected ? (
                      
                        
                      
                    ) : null}
                  
                )}
              
            ))
          )}
        
      
    
  );
}

Bakım İçin En İyi Uygulamalar

Bileşenleri Saf Tutun: Durum yönetimini Headless UI'ya bırakın, sunumu için Tailwind kullanın. Durum mantığını stil sınıflarına karıştırmayın.
Çeşitleri Belgelendirin: Temel bileşenlerinizdeki tüm mevcut çeşitleri göstermek için Storybook veya benzeri bir dokümantasyon sitesi oluşturun.
Erişilebilirliği Zorunlu Kılın: Headless UI aria özniteliklerini yönettiğinden, bunları asla kaldırmadığınızdan emin olun. Bileşenlerinizi düzenli olarak ekran okuyucularla test edin.

Sonuç

Tailwind CSS ve Headless UI ile bir tasarım sistemi oluşturmak, hız ve kalite arasındaki dengeyi kurmanın en verimli yollarından biridir. Mantığı stilden ayırarak, tasarımcıların ve geliştiricilerin senkronize hareket etmesini sağlayan esnek bir temel oluşturursunuz. Projeniz büyüdükçe, bu yaklaşım stil şişkinliğini önler ve arayüzünüzün erişilebilir ve tutarlı kalmasını sağlar. Küçük başlayın, temel bileşenlerinizi oluşturun ve prototipleme hızınızın uçtuğunu izleyin.