使用 Tailwind CSS 构建设计系统

I’m happy to translate the article for you, but I don’t have the content of the post itself. Could you please paste the text you’d like translated (excluding any code blocks or URLs you want to keep unchanged)? Once I have the material, I’ll provide a Simplified‑Chinese version while preserving the original formatting and source link.

概述

“Tailwind 是实用类。它适用于设计系统吗？”
回答： 是的。实际上，它表现非常好。

设计系统的核心是 一致性——颜色、间距、排版以及其他遵循定义规则的标记。Tailwind 强制保持这种一致性：

• p-4 始终为 16 px。
• text-sm 始终为 14 px。

没有开发者差异。

基本结构

Design Tokens (CSS Variables)
    ↓
Tailwind Config (tailwind.config)
    ↓
Utility Classes (bg-primary, text-sm)
    ↓
Components

1. 颜色标记

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6', // base
          600: '#2563eb', // hover
          700: '#1d4ed8', // active
        },
        gray: {
          50: '#f9fafb',
          100: '#f3f4f6',
          500: '#6b7280',
          900: '#111827',
        },
      },
    },
  },
};

现在可以使用 bg-primary-500、text-gray-900。

CSS 变量更好

/* globals.css */
:root {
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
}

.dark {
  --color-primary-500: #60a5fa;
  --color-primary-600: #3b82f6;
}

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          500: 'var(--color-primary-500)',
          600: 'var(--color-primary-600)',
        },
      },
    },
  },
};

暗色模式切换现在会自动生效。

2. 排版

// tailwind.config.ts
export default {
  theme: {
    extend: {
      fontSize: {
        'display-lg': ['48px', { lineHeight: '1.2', fontWeight: '700' }],
        'display-md': ['36px', { lineHeight: '1.2', fontWeight: '700' }],
        'heading-lg': ['24px', { lineHeight: '1.4', fontWeight: '600' }],
        'heading-md': ['20px', { lineHeight: '1.4', fontWeight: '600' }],
        'body-lg':    ['18px', { lineHeight: '1.6' }],
        'body-md':    ['16px', { lineHeight: '1.6' }],
        'body-sm':    ['14px', { lineHeight: '1.6' }],
      },
    },
  },
};

// Example usage in a component
<h1 className="text-display-lg">Large Title</h1>
<h2 className="text-display-md">Medium Title</h2>
<p className="text-body-md">Body text</p>

响应式排版

CSS 变量使响应式变得容易：

:root {
  --fs-display-lg: 36px;
}

@media (min-width: 1024px) {
  :root {
    --fs-display-lg: 48px;
  }
}

// tailwind.config.ts
export default {
  theme: {
    extend: {
      fontSize: {
        'display-lg': ['var(--fs-display-lg)', { lineHeight: '1.2' }],
      },
    },
  },
};

现在，一个 text-display-lg 类即可同时处理移动端和桌面端的尺寸。

3. Spacing

Tailwind 的默认间距适用于大多数情况，但你可以自定义比例：

// tailwind.config.ts
export default {
  theme: {
    extend: {
      spacing: {
        xs: '4px',
        sm: '8px',
        md: '16px',
        lg: '24px',
        xl: '32px',
        '2xl': '48px',
        '3xl': '64px',
      },
    },
  },
};

{/* padding: 16px, margin‑bottom: 24px */}

实际上，Tailwind 内置的间距（p-4、mb-6 等）——基于 8 像素网格——通常已经足够。

4. 构建组件

在设置好 tokens 后，你可以创建可复用的组件。

// Button.tsx
const variants = {
  primary:   'bg-primary-500 text-white hover:bg-primary-600',
  secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
  outline:   'border border-primary-500 text-primary-500 hover:bg-primary-50',
};

const sizes = {
  sm: 'h-8  px-3 text-body-sm',
  md: 'h-10 px-4 text-body-md',
  lg: 'h-12 px-6 text-body-lg',
};

export function Button({ variant = 'primary', size = 'md', ...props }) {
  return (
    // component implementation here
  );
}

使用 cva 实现类型安全

import { cva, type VariantProps } from 'class-variance-authority';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium',
  {
    variants: {
      variant: {
        primary:   'bg-primary-500 text-white hover:bg-primary-600',
        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
      },
      size: {
        sm: 'h-8  px-3 text-body-sm',
        md: 'h-10 px-4 text-body-md',
        lg: 'h-12 px-6 text-body-lg',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size:    'md',
    },
  }
);

type ButtonProps = VariantProps<typeof buttonVariants>;
// { variant?: 'primary' | 'secondary'; size?: 'sm' | 'md' | 'lg' }

自动完成和类型检查现在已内置。

5. 作为预设分发

为多个项目或团队创建可重复使用的预设：

// my-preset.ts
const myPreset = {
  theme: {
    extend: {
      colors:   { /* … */ },
      fontSize: { /* … */ },
    },
  },
};

export default myPreset;

// tailwind.config.ts
import myPreset from './my-preset';

export default {
  presets: [myPreset],
  // project‑specific additions go here
};

设计系统检查清单

• 颜色标记（primary, secondary, gray, danger, success）
• 排版比例（display, heading, body, label）
• 间距系统（推荐使用 8 px 网格）
• 边框圆角
• 阴影
• 基础组件（Button, Input, Card 等）

政府项目

在韩国政府项目中，需要遵循 KRDS（Korean Design System）。所有颜色代码、字体大小、间距等都有严格定义，手动设置可能需要整整一天的时间。

HANUI – TailwindCSS 的 KRDS 预设

HANUI 提供了预先应用 KRDS 令牌的 Tailwind 预设，让你可以立即启动符合规范的 UI。

Tailwind 配置

// tailwind.config.ts
import hanuiPreset from '@hanui/react/tailwind.preset';

export default {
  presets: [hanuiPreset],
};

在组件中使用 KRDS 类

// Example component
<div className="text-krds-body">
  KRDS styled text
</div>

<button className="krds-button">
  KRDS button
</button>

你将获得

• 颜色 – 完全符合 KRDS 的调色板
• 排版 – 正确的字体族、大小和行高
• 响应式设计 – 内置断点遵循 KRDS 指南
• 技术栈 – TailwindCSS、React、CSS 变量、CVA（class‑variance‑authority）

上述所有内容让你可以专注于功能开发，而无需费力重新创建设计系统。