𝗥𝗲𝗮𝗹 𝗪𝗼𝗿𝗹𝗱 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦: 𝗧𝗵𝗲 𝗚𝗮𝘁𝗲𝗸𝗲𝗲𝗽𝗲𝗿 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲
Large organizations do not let everyone style every page. They use a specific structure to keep their code clean.
Mature design systems like Shopify Polaris use two separate roles:
Component Authors (The Gatekeepers): This team builds the core UI. They write the Tailwind classes. They manage accessibility, dark mode, and design tokens.
Feature Developers (The Assemblers): This team builds products and dashboards. They focus on business logic and layout. They do not choose colors or spacing.
Organizations enforce this boundary with lint rules and code reviews.
What you should do: • Use layout utilities like flex, grid, and gap.
What you should avoid: • Adding new visual styles like bg-indigo-600 or text-lg directly inside feature pages. Use an existing component instead.
Here is how it works in code.
The Design System Team creates a reusable button in @/components/ui/button.tsx. They centralize the visual styles:
import React from 'react';
interface ButtonProps extends React.ButtonHTMLAttributes
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}
);
}
The Feature Developer then builds the page by assembling these blocks:
import { Button } from "@/components/ui/button";
export default function Dashboard() { return (
This structure offers three main benefits:
- Easier maintenance. If you remove a button, you do not leave dead CSS behind.
- Fast updates. If your brand changes from indigo to violet, you change one file. The change flows through the whole app.
- Consistency. Every developer uses the same design tokens.
Celem nie jest tylko Tailwind. Chodzi o stworzenie granicy między tymi, którzy budują system, a tymi, którzy go używają.
W części 2 omówię, jak radzić sobie z wyjątkami projektowymi, nie naruszając architektury.