Tailwind CSS Thực tế: Kiến trúc Gatekeeper

Các tổ chức lớn không cho phép mọi người tự ý định dạng (style) mọi trang web. Họ sử dụng một cấu trúc cụ thể để giữ cho mã nguồn luôn sạch sẽ.

Các hệ thống thiết kế (design system) trưởng thành như Shopify Polaris sử dụng hai vai trò riêng biệt:

  • Tác giả Thành phần (Component Authors - Những người gác cổng): Nhóm này xây dựng giao diện người dùng (UI) cốt lõi. Họ viết các class Tailwind. Họ quản lý khả năng truy cập (accessibility), chế độ tối (dark mode) và các design tokens.

  • Nhà phát triển Tính năng (Feature Developers - Những người lắp ráp): Nhóm này xây dựng các sản phẩm và bảng điều khiển (dashboards). Họ tập trung vào logic nghiệp vụ và bố cục (layout). Họ không chọn màu sắc hay khoảng cách (spacing).

Các tổ chức thực thi ranh giới này bằng các quy tắc lint và quy trình kiểm duyệt mã (code review).

Những gì bạn nên làm: • Sử dụng các tiện ích bố cục như flex, grid, và gap.

Những gì bạn nên tránh: • Thêm các kiểu dáng hình ảnh mới như bg-indigo-600 hoặc text-lg trực tiếp bên trong các trang tính năng. Thay vào đó, hãy sử dụng một component đã có sẵn.

Dưới đây là cách nó hoạt động trong mã nguồn.

Nhóm Hệ thống Thiết kế tạo một button có thể tái sử dụng tại @/components/ui/button.tsx. Họ tập trung hóa các kiểu dáng hình ảnh:

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

Sau đó, Nhà phát triển Tính năng sẽ xây dựng trang bằng cách lắp ráp các khối này:

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

export default function Dashboard() { return (

); }

Cấu trúc này mang lại ba lợi ích chính:

  1. Bảo trì dễ dàng hơn. Nếu bạn xóa một button, bạn sẽ không để lại các đoạn CSS thừa (dead CSS).
  2. Cập nhật nhanh chóng. Nếu thương hiệu của bạn thay đổi từ màu indigo sang violet, bạn chỉ cần thay đổi một tệp duy nhất. Thay đổi đó sẽ được áp dụng cho toàn bộ ứng dụng.
  3. Tính nhất quán. Mọi nhà phát triển đều sử dụng cùng một bộ design tokens.

Mục tiêu không chỉ đơn thuần là về Tailwind. Đó là việc tạo ra một ranh giới giữa những người xây dựng hệ thống và những người sử dụng nó.

Trong Phần 2, tôi sẽ thảo luận về cách xử lý các ngoại lệ thiết kế mà không làm phá vỡ kiến trúc của bạn.

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