Tailwind CSS 3 设计系统与工程实践概述Tailwind CSS 3 通过 JIT 引擎与可扩展的主题系统，帮助团队快速搭建一致的设计系统与组件库。本文提供稳定配置、`@layer`/`@apply` 用法与常见工程优化策略。核心配置// tailwind.config.js module.exports = { content: [ './index.html', './src/**/*.{ts,tsx,js,jsx,vue,svelte}', ], darkMode: 'class', theme: { extend: { colors: { primary: { DEFAULT: '#2563eb', 50: '#eff6ff', 600: '#2563eb', 700: '#1d4ed8', }, }, spacing: { 18: '4.5rem', }, }, }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), ], } 要点：`content` 路径确保类名扫描准确；按需扩展主题，避免过度定制导致维护成本上升。设计系统与组件/* src/styles/index.css */ @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --color-brand: 37 99 235; /* RGB 拆分便于透明度控制 */ } } @layer components { .btn { @apply inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors; } .btn-primary { @apply btn bg-primary text-white hover:bg-primary-700; } } @layer utilities { .text-balance { text-wrap: balance; } } 建议：使用 `@layer components` 定义可复用的组件类；避免在组件内部滥用 `@apply` 覆盖大量原子类，保持原子化优势。暗色模式与排版<html class="dark"> <body class="prose dark:prose-invert"> <button class="btn btn-primary">提交</button> </body> </html> 通过 `darkMode: 'class'` 与 `@tailwindcss/typography` 快速获得一致排版与暗色支持。工程优化类名稳定：避免动态字符串拼接类名，使用显式映射或条件类库。构建体积：生产环境下结合构建器的压缩与 CSS 摇树（由 JIT 与 `content` 控制）。设计 Token：优先用 CSS 变量承载品牌色与间距，提升跨框架可移植性。验证要点配置与指令为 Tailwind 3 稳定特性；在 Vite、Next 等环境可直接运行。通过产物体积与样式覆盖率检查（例如浏览器开发者工具）验证类名扫描效果。
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复