C54. 原子化 CSS

4.1. 原子化解决 CSS 手写工具类过多的问题

原子化 CSS 是一种将样式拆分为最小单元（如 p-4、text-red）的开发模式，通过组合这些原子类实现 UI 设计，避免重复编写样式。

🔥 传统 VS 原子化 CSS

传统 CSS	原子化 CSS
需为每个组件编写专属样式（如 .card { padding: 1rem; }）	直接复用原子类（如 <div class="p-4">）
样式耦合度高，修改需全局搜索	样式独立，修改只需调整类名

🛠️ 优势：

1. 零重复代码：所有样式通过工具类实现，减少冗余。
2. 快速迭代：无需等待 CSS 编译，直接通过类名组合调整样式。
3. 团队一致性：统一的类名规范避免样式冲突。

4.2. Tailwind CSS 的环境搭建与插件配置

🚀 快速上手步骤

1. 安装依赖

   npm install -D tailwindcss postcss postcss-cli
   npx tailwindcss init -p

2. 配置 tailwind.config.js

   module.exports = {
     content: [
       './src/**/*.{html,js,jsx,ts,tsx}', // 需扫描的文件路径
     ],
     theme: {
       extend: {}, // 自定义主题（如颜色、间距）
     },
     plugins: [],
   }

3. 创建 CSS 文件

   /* src/input.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

4. 构建命令

   npx postcss src/input.css -o dist/style.css

🔧 插件扩展示例

npm install -D @tailwindcss/forms @tailwindcss/typography

在 tailwind.config.js 中启用插件：

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
],

4.3. Tailwind CSS 通过类名控制样式

🌟 基础类名结构

类名类型	示例类名	作用
间距	p-4（padding）	控制元素内外边距
排版	text-2xl、font-bold	字体大小、加粗
颜色	bg-blue-500	背景色、文本色
布局	flex、grid	Flex/Grid 布局
过渡	transition-all	添加 CSS 过渡效果

🛠️ 示例：卡片组件

<div class="max-w-sm p-6 bg-white rounded-lg shadow-lg">
  <h3 class="text-xl font-bold mb-2 text-gray-800">标题</h3>
  <p class="text-gray-600">内容...</p>
</div>

4.4. Tailwind CSS 的响应式设计

通过在类名前添加 断点前缀（如 sm:, md:），实现响应式样式。

🌐 断点配置（默认）

前缀	宽度阈值
sm	≥640px
md	≥768px
lg	≥1024px
xl	≥1280px

🛠️ 示例：响应式边距

<!-- 桌面端右侧边距2rem，移动端无 -->
<div class="md:mr-8">...</div>

🛠️ 响应式布局切换

<div class="flex md:flex-row md:space-x-4 md:items-center md:justify-between">
  <!-- 桌面端水平排列，移动端垂直排列 -->
</div>

4.5. Tailwind CSS 的动态属性

🛠️ 通过 @apply 组合类名

在 CSS 文件中定义自定义类：

/* src/components/card.css */
.card {
  @apply p-4 bg-white rounded shadow;
}

🛠️ 自定义主题配置

// tailwind.config.js
theme: {
  extend: {
    colors: {
      'primary': '#3B82F6',
      'danger': '#EF4444',
    },
    spacing: {
      '128': '32rem', // 新增间距值
    },
  },
},

4.6. Tailwind CSS 通过 Tree-shaking 减小打包体积

Tailwind 默认包含 2000+ 工具类，但未使用的类会被 Tree-shaking 移除。

🔧 关键配置

在 tailwind.config.js 中启用 content 配置：

content: [
  './src/**/*.{html,js,jsx,ts,tsx}',
],

📦 构建优化

• 使用 postcss 或构建工具（如 Vite）直接输出压缩后的 CSS。
• 默认体积：约 120KB（压缩后约 15KB）。

4.7. 在 Tailwind CSS 中使用 Layers 封装组件样式

Layers（层）将样式分为三部分：base、components、utilities，避免样式冲突。

🛠️ 配置示例

// tailwind.config.js
layers: ['base', 'components', 'utilities'],

🛠️ 使用 @layer 指令

/* 定义全局基础样式 */
@layer base {
  h1 { @apply text-3xl; }
}

/* 封装组件样式 */
@layer components {
  .button {
    @apply py-2 px-4 rounded;
  }
}

/* 工具类样式 */
@layer utilities {
  .max-w-8xl { @apply max-w-[1920px]; }
}

知识回顾

1. 原子化 CSS 核心思想：将样式拆分为最小单元，通过组合复用减少冗余。
2. Tailwind 核心优势：
   • 零配置快速上手。
   • 响应式前缀简化适配。
   • Tree-shaking 减小体积。
3. 关键配置与技巧：
   • tailwind.config.js 定义主题与插件。
   • @layer 分层管理样式优先级。
   • @apply 组合类名，避免重复代码。

课后练习

1. （单选）以下哪个类名能实现元素在 ≥768px 宽度时右侧边距为 4rem？ A. md:mr-4 B. sm:mr-4 C. lg:mr-4 D. xl:mr-4

2. （填空）在 Tailwind 中定义一个红色背景色 bg-red-500，需在 tailwind.config.js 的 colors 中添加：

   theme: {
     extend: {
       colors: {
         red: {
           500: '#______', // 红色十六进制值
         },
       },
     },
   },

3. （代码题）使用 @layer 封装一个 card 组件样式，要求：

   • 基础样式：p-4、rounded-lg
   • 悬停时阴影加深：hover:shadow-md

   @layer components {
     .card {
       @apply p-4 rounded-lg shadow;
       @apply hover:shadow-md;
     }
   }

4. （实践题）创建一个响应式导航栏，要求：

   • 桌面端水平排列，间距 2rem
   • 移动端垂直排列，居中对齐

   <nav class="flex flex-col md:flex-row md:space-x-8 md:items-center">
     <!-- 导航项 -->
   </nav>