بناء نظام تصميم باستخدام Tailwind CSS ومكونات Headless UI للتصميم الأولي السريع

في مشهد الواجهات الأمامية الحديث، غالباً ما يتم سد الفجوة بين التصميم والتطوير من خلال أنظمة التصميم. ومع ذلك، يمكن أن يكون بناء نظام من الصفر أمرًا شاقًا. هنا يأتي دور المزيج القوي بين Tailwind CSS و Headless UI. يسمح هذا الجمع للمطورين بإنشاء مكونات قابلة للوصول إليها وقابلة لإعادة الاستخدام ومتسقة دون أن تكون مقيدة بأنماط محددة مسبقاً. تستكشف هذه المقالة كيفية هندسة نظام تصميم قوي يسرع سير عملك في التصميم الأولي مع الحفاظ على جودة عالية للكود.

لماذا نجمع بين Tailwind و Headless UI؟

يتفوق Tailwind CSS في النمذجة القائمة على الأدوات (utility-first)، مما يمنحك تحكماً دقيقاً في كل جانب من جوانب واجهة المستخدم الخاصة بك. ومع ذلك، لا يتعامل مع إدارة الحالة المعقدة أو إمكانية الوصول (a11y) بشكل افتراضي للأدوات المعقدة مثل القوائم المنسدلة، أو النوافذ المنبثقة (modals)، أو علامات التبويب. تحل مكونات Headless UI هذه المشكلة. فهي توفر منطق JavaScript، والتنقل بلوحة المفاتيح، وسمات ARIA، بينما تترك التنسيق البصري بالكامل لك من خلال فئات Tailwind.

يعني هذا الفصل في الاهتمامات أن مكتبة المكونات الخاصة بك تظل خفيفة الوزن، وقابلة للوصول إليها، وقابلة للتخصيص بالكامل، وهو ما يُعد الكأس المقدسة لنظام تصميم قابل للتوسع.

الخطوة 1: إعداد المشروع والتكوين

قبل كتابة الكود، تأكد من تكوين بيئتك بشكل صحيح. قم بتثبيت التبعيات اللازمة. لهذا المثال، نفترض بيئة React تستخدم Tailwind CSS.

npm install @headlessui/react @headlessui/vue
# أو إذا كنت تستخدم npm/yarn/pnpm حسب المناسب

بعد ذلك، قم بتكوين ملف tailwind.config.js لتوسيع موضوعك. يبدأ نظام التصميم الجيد بلوحة ألوان متسقة ومقياس مسافات.

// 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: [],
}

الخطوة 2: إنشاء عناصر أولية قابلة لإعادة الاستخدام

لبناء نظام تصميم حقاً، لا ينبغي عليك استخدام مكونات Headless UI مباشرة في ملفات العرض بشكل متكرر. بدلاً من ذلك، قم بتغليفها في مكونات أولية خاصة بك. يضمن ذلك أن كل زر، أو حقل إدخال، أو نافذة منبثقة في تطبيقك يلتزم بإرشادات علامتك التجارية.

على سبيل المثال، دعنا ننشئ مكوناً قابلاً لإعادة الاستخدام يسمى CustomButton يغلف أنماط الأزرار القياسية في Tailwind. بينما يركز Headless UI على التفاعلات المعقدة، فإن العناصر البسيطة تستفيد من إدارة الأنماط المركزية.

// 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 (
    
      {children}
    
  );
};

export default CustomButton;

الخطوة 3: دمج مكونات Headless المعقدة

الآن، دعنا ننظر إلى مكون أكثر تعقيداً: Combobox. يجعل Headless UI هذا سهلاً للغاية من خلال التعامل مع منطق القائمة المنسدلة، بينما نطبق فئات Tailwind الخاصة بنا.

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 !== '' ? (
            

              Nothing found.
            
          ) : (
            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}
                  
                )}
              
            ))
          )}
        
      
    
  );
}

أفضل الممارسات للصيانة

• حافظ على نقاء المكونات: دع Headless UI يتولى إدارة الحالة، واستخدم Tailwind للعرض. تجنب خلط منطق الحالة مع فئات التنسيق.
• وثق المتغيرات: أنشئ موقع توثيق مثل Storybook أو ما شابه لعناصرك الأولية لإظهار جميع المتغيرات المتاحة.
• فرض إمكانية الوصول: بما أن Headless UI يدير سمات ARIA، تأكد من عدم إزالتها أبداً. اختبر مكوناتك بانتظام باستخدام قارئات الشاشة.

الخاتمة

يُعد بناء نظام تصميم باستخدام Tailwind CSS و Headless UI أحد أكثر الطرق كفاءة لتحقيق التوازن بين السرعة والجودة. من خلال فصل المنطق عن التنسيق، تنشئ أساساً مرناً يسمح لمصممي المطورين والمطورين بالتحرك بتناسق. مع توسع مشروعك، يمنع هذا النهج تضخم الأنماط ويضمن أن تظل واجهتك قابلة للوصول إليها ومتسقة. ابدأ بشكل صغير، وابنِ عناصرك الأولية، وشاهد سرعة التصميم الأولي لديك ترتفع.