Tailwind CSS en conditions réelles : L'architecture Gatekeeper

Les grandes organisations ne permettent pas à tout le monde de styliser chaque page. Elles utilisent une structure spécifique pour garder leur code propre.

Les systèmes de design matures comme Shopify Polaris utilisent deux rôles distincts :

  • Auteurs de composants (Les Gatekeepers) : Cette équipe construit l'UI de base. Elle écrit les classes Tailwind. Elle gère l'accessibilité, le mode sombre et les design tokens.

  • Développeurs de fonctionnalités (Les Assembleurs) : Cette équipe construit les produits et les tableaux de bord. Elle se concentre sur la logique métier et la mise en page. Elle ne choisit ni les couleurs ni l'espacement.

Les organisations imposent cette limite grâce à des règles de lint et des revues de code.

Ce que vous devriez faire : • Utiliser des utilitaires de mise en page comme flex, grid et gap.

Ce que vous devriez éviter : • Ajouter de nouveaux styles visuels comme bg-indigo-600 ou text-lg directement à l'intérieur des pages de fonctionnalités. Utilisez plutôt un composant existant.

Voici comment cela fonctionne dans le code.

L'équipe Design System crée un bouton réutilisable dans @/components/ui/button.tsx. Elle centralise les styles visuels :

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

Le développeur de fonctionnalités construit ensuite la page en assemblant ces blocs :

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

export default function Dashboard() { return (

); }

Cette structure offre trois avantages principaux :

  1. Maintenance facilitée. Si vous supprimez un bouton, vous ne laissez pas de CSS mort derrière vous.
  2. Mises à jour rapides. Si votre marque passe de l'indigo au violet, vous ne modifiez qu'un seul fichier. Le changement se propage dans toute l'application.
  3. Cohérence. Chaque développeur utilise les mêmes design tokens.

L'objectif ne se limite pas à Tailwind. Il s'agit de créer une frontière entre ceux qui construisent le système et ceux qui l'utilisent.

Dans la partie 2, j'aborderai la manière de gérer les exceptions de design sans compromettre votre architecture.

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