Реальний Tailwind CSS: Архітектура Gatekeeper

Великі організації не дозволяють кожному стилізувати кожну сторінку. Вони використовують певну структуру, щоб підтримувати чистоту коду.

Зрілі дизайн-системи, такі як Shopify Polaris, використовують дві окремі ролі:

  • Автори компонентів (Gatekeepers): Ця команда створює основний UI. Вони пишуть класи Tailwind. Вони керують доступністю, темною темою та дизайн-токенами.

  • Розробники функціоналу (Assemblers): Ця команда створює продукти та дашборди. Вони зосереджуються на бізнес-логіці та макеті. Вони не обирають кольори чи відступи.

Організації забезпечують дотримання цієї межі за допомогою правил лінтера та рев'ю коду.

Що варто робити: • Використовуйте утиліти макетування, такі як flex, grid та gap.

Чого слід уникати: • Додавання нових візуальних стилів, таких як bg-indigo-600 або text-lg, безпосередньо на сторінках функціоналу. Замість цього використовуйте існуючий компонент.

Ось як це працює в коді.

Команда дизайн-системи створює багаторазовий компонент кнопки у @/components/ui/button.tsx. Вони централізують візуальні стилі:

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>
  );
}

Потім розробник функціоналу створює сторінку, збираючи ці блоки:

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

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

Ця структура дає три основні переваги:

  1. Легша підтримка. Якщо ви видаляєте кнопку, ви не залишаєте після себе «мертвий» CSS.
  2. Швидкі оновлення. Якщо ваш бренд змінює колір з індиго на фіолетовий, ви змінюєте лише один файл. Зміна застосовується до всього додатка.
  3. Консистентність. Кожен розробник використовує однакові дизайн-токени.

Мета полягає не лише в Tailwind. Йдеться про створення межі між тими, хто розробляє систему, і тими, хто нею користується.

У частині 2 я розповім, як обробляти винятки в дизайні, не порушуючи вашу архітектуру.

Джерело: https://dev.to/cathylai/real-world-tailwind-css-the-gatekeeper-architecture-a-senior-developers-guide-part-12-m36