Tailwind CSS no Mundo Real: A Arquitetura Gatekeeper

Grandes organizações não permitem que todos estilizem todas as páginas. Elas utilizam uma estrutura específica para manter o código limpo.

Sistemas de design maduros, como o Shopify Polaris, utilizam dois papéis distintos:

  • Autores de Componentes (Os Gatekeepers): Esta equipe constrói a UI principal. Eles escrevem as classes do Tailwind. Eles gerenciam acessibilidade, dark mode e design tokens.

  • Desenvolvedores de Funcionalidades (Os Montadores): Esta equipe constrói produtos e dashboards. Eles focam na lógica de negócio e no layout. Eles não escolhem cores ou espaçamentos.

As organizações impõem esse limite com regras de lint e revisões de código.

O que você deve fazer: • Use utilitários de layout como flex, grid e gap.

O que você deve evitar: • Adicionar novos estilos visuais como bg-indigo-600 ou text-lg diretamente dentro das páginas de funcionalidades. Em vez disso, use um componente existente.

Veja como isso funciona no código.

A equipe de Design System cria um botão reutilizável em @/components/ui/button.tsx. Eles centralizam os estilos visuais:

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

O Desenvolvedor de Funcionalidades então constrói a página montando esses blocos:

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

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

Esta estrutura oferece três benefícios principais:

  1. Manutenção mais fácil. Se você remover um botão, não deixará CSS morto para trás.
  2. Atualizações rápidas. Se sua marca mudar de indigo para violet, você altera apenas um arquivo. A mudança se propaga por todo o app.
  3. Consistência. Cada desenvolvedor utiliza os mesmos design tokens.

O objetivo não é apenas sobre o Tailwind. Trata-se de criar uma fronteira entre aqueles que constroem o sistema e aqueles que o utilizam.

Na Parte 2, discutirei como lidar com exceções de design sem quebrar sua arquitetura.

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