原子化CSS与工具类 - 在线学习与练习平台

本章概述

本章将深入探讨原子化 CSS 的核心理念，学习 UnoCSS 提供的各种工具类，掌握如何使用这些工具类来构建现代化的用户界面。我们将从基础的布局、间距、颜色开始，逐步学习更高级的特性。

原子化CSS理念

什么是原子化CSS

原子化 CSS（Atomic CSS）是一种 CSS 架构方法，其核心思想是将样式拆分成最小的、不可再分的单元（原子），每个类只负责一个特定的样式属性。

/* 传统CSS */
.button {
  padding: 12px 24px;
  background-color: #3b82f6;
  color: white;
  border-radius: 6px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #2563eb;
}

<!-- 原子化CSS -->
<button class="px-6 py-3 bg-blue-500 text-white rounded-md font-medium border-none cursor-pointer hover:bg-blue-600">
  按钮
</button>

原子化CSS的优势

高度复用：每个类都可以在任何地方使用
样式一致性：统一的设计系统
快速开发：无需编写自定义CSS
易于维护：修改设计系统即可全局更新
性能优异：CSS文件大小可控
响应式友好：内置响应式支持

UnoCSS的原子化实现

// UnoCSS的原子化规则示例
const atomicRules = [
  // 单一职责原则
  ['p-1', { padding: '0.25rem' }],
  ['m-2', { margin: '0.5rem' }],
  ['text-red', { color: 'red' }],
  ['bg-blue', { 'background-color': 'blue' }],
  
  // 动态生成
  [/^p-(\d+)$/, ([, d]) => ({ padding: `${d / 4}rem` })],
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^text-(.+)$/, ([, color]) => ({ color })],
  [/^bg-(.+)$/, ([, color]) => ({ 'background-color': color })],
]

布局工具类

Display 显示类型

<!-- 块级元素 -->
<div class="block">块级元素</div>
<div class="inline-block">行内块元素</div>
<div class="inline">行内元素</div>

<!-- Flexbox -->
<div class="flex">Flex容器</div>
<div class="inline-flex">行内Flex容器</div>

<!-- Grid -->
<div class="grid">Grid容器</div>
<div class="inline-grid">行内Grid容器</div>

<!-- 隐藏元素 -->
<div class="hidden">隐藏元素</div>
<div class="sr-only">仅屏幕阅读器可见</div>

Position 定位

<!-- 定位类型 -->
<div class="static">静态定位</div>
<div class="relative">相对定位</div>
<div class="absolute">绝对定位</div>
<div class="fixed">固定定位</div>
<div class="sticky">粘性定位</div>

<!-- 定位值 -->
<div class="absolute top-0 left-0">左上角</div>
<div class="absolute top-0 right-0">右上角</div>
<div class="absolute bottom-0 left-0">左下角</div>
<div class="absolute bottom-0 right-0">右下角</div>

<!-- 居中定位 -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
  绝对居中
</div>

<!-- Z-index -->
<div class="relative z-10">层级10</div>
<div class="relative z-20">层级20</div>
<div class="relative z-50">层级50</div>

Flexbox 布局

<!-- Flex容器 -->
<div class="flex">
  <!-- Flex方向 -->
  <div class="flex flex-row">水平排列</div>
  <div class="flex flex-col">垂直排列</div>
  <div class="flex flex-row-reverse">水平反向</div>
  <div class="flex flex-col-reverse">垂直反向</div>
</div>

<!-- Flex换行 -->
<div class="flex flex-wrap">允许换行</div>
<div class="flex flex-nowrap">不换行</div>
<div class="flex flex-wrap-reverse">反向换行</div>

<!-- 主轴对齐 -->
<div class="flex justify-start">起始对齐</div>
<div class="flex justify-center">居中对齐</div>
<div class="flex justify-end">结束对齐</div>
<div class="flex justify-between">两端对齐</div>
<div class="flex justify-around">环绕对齐</div>
<div class="flex justify-evenly">均匀对齐</div>

<!-- 交叉轴对齐 -->
<div class="flex items-start">起始对齐</div>
<div class="flex items-center">居中对齐</div>
<div class="flex items-end">结束对齐</div>
<div class="flex items-baseline">基线对齐</div>
<div class="flex items-stretch">拉伸对齐</div>

<!-- Flex项目 -->
<div class="flex">
  <div class="flex-1">弹性增长</div>
  <div class="flex-auto">自动弹性</div>
  <div class="flex-none">不弹性</div>
  <div class="flex-shrink-0">不收缩</div>
  <div class="flex-grow">增长</div>
</div>

<!-- 实际应用示例 -->
<div class="flex items-center justify-between p-4 bg-white shadow rounded-lg">
  <div class="flex items-center space-x-3">
    <img class="w-10 h-10 rounded-full" src="avatar.jpg" alt="头像">
    <div>
      <h3 class="font-medium">用户名</h3>
      <p class="text-gray-500 text-sm">用户描述</p>
    </div>
  </div>
  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    关注
  </button>
</div>

Grid 布局

<!-- Grid容器 -->
<div class="grid">
  <!-- 网格列 -->
  <div class="grid grid-cols-1">1列</div>
  <div class="grid grid-cols-2">2列</div>
  <div class="grid grid-cols-3">3列</div>
  <div class="grid grid-cols-4">4列</div>
  <div class="grid grid-cols-12">12列</div>
  
  <!-- 网格行 -->
  <div class="grid grid-rows-2">2行</div>
  <div class="grid grid-rows-3">3行</div>
  <div class="grid grid-rows-4">4行</div>
</div>

<!-- 网格间距 -->
<div class="grid grid-cols-3 gap-4">统一间距</div>
<div class="grid grid-cols-3 gap-x-4 gap-y-2">不同间距</div>

<!-- 网格项目跨越 -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">跨越2列</div>
  <div class="col-span-1">1列</div>
  <div class="col-span-1">1列</div>
  <div class="row-span-2">跨越2行</div>
  <div>普通项目</div>
  <div>普通项目</div>
</div>

<!-- 网格项目定位 -->
<div class="grid grid-cols-4 grid-rows-4 gap-2">
  <div class="col-start-2 col-end-4 row-start-1 row-end-3">
    指定位置
  </div>
</div>

<!-- 响应式网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div class="bg-gray-200 p-4 rounded">项目1</div>
  <div class="bg-gray-200 p-4 rounded">项目2</div>
  <div class="bg-gray-200 p-4 rounded">项目3</div>
  <div class="bg-gray-200 p-4 rounded">项目4</div>
</div>

<!-- 实际应用：卡片网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="image1.jpg" alt="图片">
    <div class="p-6">
      <h3 class="text-xl font-semibold mb-2">卡片标题</h3>
      <p class="text-gray-600">卡片描述内容...</p>
    </div>
  </div>
</div>

间距工具类

Padding 内边距

<!-- 全方向内边距 -->
<div class="p-0">无内边距</div>
<div class="p-1">0.25rem内边距</div>
<div class="p-2">0.5rem内边距</div>
<div class="p-4">1rem内边距</div>
<div class="p-8">2rem内边距</div>

<!-- 水平/垂直内边距 -->
<div class="px-4">水平内边距</div>
<div class="py-2">垂直内边距</div>

<!-- 单方向内边距 -->
<div class="pt-4">上内边距</div>
<div class="pr-4">右内边距</div>
<div class="pb-4">下内边距</div>
<div class="pl-4">左内边距</div>

<!-- 逻辑属性 -->
<div class="ps-4">起始内边距</div>
<div class="pe-4">结束内边距</div>

<!-- 任意值 -->
<div class="p-[1.375rem]">自定义内边距</div>

Margin 外边距

<!-- 全方向外边距 -->
<div class="m-0">无外边距</div>
<div class="m-1">0.25rem外边距</div>
<div class="m-2">0.5rem外边距</div>
<div class="m-4">1rem外边距</div>
<div class="m-auto">自动外边距</div>

<!-- 负外边距 -->
<div class="-m-2">负外边距</div>
<div class="-mt-4">负上外边距</div>

<!-- 水平/垂直外边距 -->
<div class="mx-4">水平外边距</div>
<div class="my-2">垂直外边距</div>
<div class="mx-auto">水平居中</div>

<!-- 单方向外边距 -->
<div class="mt-4">上外边距</div>
<div class="mr-4">右外边距</div>
<div class="mb-4">下外边距</div>
<div class="ml-4">左外边距</div>

<!-- 间距组合应用 -->
<div class="container mx-auto px-4">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold mb-8">页面标题</h1>
    <div class="space-y-6">
      <div class="bg-white p-6 rounded-lg shadow">
        <h2 class="text-xl font-semibold mb-4">章节标题</h2>
        <p class="text-gray-600 leading-relaxed">内容文本...</p>
      </div>
    </div>
  </div>
</div>

Space Between 元素间距

<!-- 垂直间距 -->
<div class="space-y-4">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

<!-- 水平间距 -->
<div class="flex space-x-4">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

<!-- 反向间距 -->
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

<!-- 实际应用：导航栏 -->
<nav class="flex items-center justify-between p-4">
  <div class="flex items-center space-x-4">
    <img class="h-8" src="logo.svg" alt="Logo">
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-700 hover:text-blue-600">首页</a>
      <a href="#" class="text-gray-700 hover:text-blue-600">产品</a>
      <a href="#" class="text-gray-700 hover:text-blue-600">关于</a>
    </div>
  </div>
  <div class="flex items-center space-x-3">
    <button class="text-gray-700 hover:text-blue-600">登录</button>
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
      注册
    </button>
  </div>
</nav>

尺寸工具类

Width 宽度

<!-- 固定宽度 -->
<div class="w-0">0宽度</div>
<div class="w-1">0.25rem宽度</div>
<div class="w-4">1rem宽度</div>
<div class="w-8">2rem宽度</div>
<div class="w-16">4rem宽度</div>

<!-- 百分比宽度 -->
<div class="w-1/2">50%宽度</div>
<div class="w-1/3">33.333%宽度</div>
<div class="w-2/3">66.666%宽度</div>
<div class="w-1/4">25%宽度</div>
<div class="w-3/4">75%宽度</div>

<!-- 特殊宽度 -->
<div class="w-auto">自动宽度</div>
<div class="w-full">100%宽度</div>
<div class="w-screen">100vw宽度</div>
<div class="w-min">最小内容宽度</div>
<div class="w-max">最大内容宽度</div>
<div class="w-fit">适合内容宽度</div>

<!-- 任意值 -->
<div class="w-[350px]">自定义宽度</div>
<div class="w-[50vw]">视口宽度</div>

Height 高度

<!-- 固定高度 -->
<div class="h-0">0高度</div>
<div class="h-1">0.25rem高度</div>
<div class="h-4">1rem高度</div>
<div class="h-8">2rem高度</div>
<div class="h-16">4rem高度</div>

<!-- 百分比高度 -->
<div class="h-1/2">50%高度</div>
<div class="h-1/3">33.333%高度</div>
<div class="h-2/3">66.666%高度</div>
<div class="h-1/4">25%高度</div>
<div class="h-3/4">75%高度</div>

<!-- 特殊高度 -->
<div class="h-auto">自动高度</div>
<div class="h-full">100%高度</div>
<div class="h-screen">100vh高度</div>
<div class="h-min">最小内容高度</div>
<div class="h-max">最大内容高度</div>
<div class="h-fit">适合内容高度</div>

<!-- 实际应用：全屏布局 -->
<div class="h-screen flex flex-col">
  <header class="h-16 bg-blue-600 text-white flex items-center px-4">
    <h1 class="text-xl font-bold">网站标题</h1>
  </header>
  <main class="flex-1 overflow-auto p-4">
    <div class="max-w-4xl mx-auto">
      <!-- 主要内容 -->
    </div>
  </main>
  <footer class="h-12 bg-gray-100 flex items-center justify-center">
    <p class="text-gray-600">© 2024 版权所有</p>
  </footer>
</div>

Min/Max 尺寸

<!-- 最小宽度 -->
<div class="min-w-0">最小宽度0</div>
<div class="min-w-full">最小宽度100%</div>
<div class="min-w-min">最小内容宽度</div>
<div class="min-w-max">最大内容宽度</div>

<!-- 最大宽度 -->
<div class="max-w-xs">最大宽度20rem</div>
<div class="max-w-sm">最大宽度24rem</div>
<div class="max-w-md">最大宽度28rem</div>
<div class="max-w-lg">最大宽度32rem</div>
<div class="max-w-xl">最大宽度36rem</div>
<div class="max-w-2xl">最大宽度42rem</div>
<div class="max-w-4xl">最大宽度56rem</div>
<div class="max-w-6xl">最大宽度72rem</div>
<div class="max-w-full">最大宽度100%</div>
<div class="max-w-none">无最大宽度限制</div>

<!-- 最小/最大高度 -->
<div class="min-h-0">最小高度0</div>
<div class="min-h-full">最小高度100%</div>
<div class="min-h-screen">最小高度100vh</div>
<div class="max-h-full">最大高度100%</div>
<div class="max-h-screen">最大高度100vh</div>

<!-- 响应式容器 -->
<div class="w-full max-w-4xl mx-auto px-4">
  <div class="min-h-screen flex items-center justify-center">
    <div class="w-full max-w-md">
      <!-- 表单内容 -->
    </div>
  </div>
</div>

颜色工具类

文本颜色

<!-- 基础颜色 -->
<p class="text-black">黑色文本</p>
<p class="text-white">白色文本</p>
<p class="text-gray-500">灰色文本</p>
<p class="text-red-500">红色文本</p>
<p class="text-blue-500">蓝色文本</p>
<p class="text-green-500">绿色文本</p>

<!-- 颜色深度 -->
<p class="text-blue-50">最浅蓝色</p>
<p class="text-blue-100">浅蓝色</p>
<p class="text-blue-300">中浅蓝色</p>
<p class="text-blue-500">标准蓝色</p>
<p class="text-blue-700">中深蓝色</p>
<p class="text-blue-900">最深蓝色</p>

<!-- 透明度 -->
<p class="text-blue-500/25">25%透明度</p>
<p class="text-blue-500/50">50%透明度</p>
<p class="text-blue-500/75">75%透明度</p>

<!-- 任意颜色值 -->
<p class="text-[#1da1f2]">自定义颜色</p>
<p class="text-[rgb(29,161,242)]">RGB颜色</p>
<p class="text-[hsl(203,89%,53%)]">HSL颜色</p>

背景颜色

<!-- 基础背景色 -->
<div class="bg-white">白色背景</div>
<div class="bg-gray-100">浅灰背景</div>
<div class="bg-blue-500">蓝色背景</div>
<div class="bg-red-500">红色背景</div>

<!-- 渐变背景 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  左到右渐变
</div>
<div class="bg-gradient-to-b from-green-400 to-blue-500">
  上到下渐变
</div>
<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
  多色渐变
</div>

<!-- 背景透明度 -->
<div class="bg-blue-500/10">10%透明度背景</div>
<div class="bg-blue-500/25">25%透明度背景</div>
<div class="bg-blue-500/50">50%透明度背景</div>

<!-- 实际应用：状态指示 -->
<div class="space-y-2">
  <div class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
    ✓ 成功状态
  </div>
  <div class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">
    ⚠ 警告状态
  </div>
  <div class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">
    ✗ 错误状态
  </div>
  <div class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
    ℹ 信息状态
  </div>
</div>

边框颜色

<!-- 边框颜色 -->
<div class="border border-gray-300">灰色边框</div>
<div class="border border-blue-500">蓝色边框</div>
<div class="border border-red-500">红色边框</div>

<!-- 边框透明度 -->
<div class="border border-blue-500/50">50%透明度边框</div>

<!-- 不同边框 -->
<div class="border-t border-gray-300">上边框</div>
<div class="border-r border-gray-300">右边框</div>
<div class="border-b border-gray-300">下边框</div>
<div class="border-l border-gray-300">左边框</div>

<!-- 边框宽度 -->
<div class="border-0">无边框</div>
<div class="border">1px边框</div>
<div class="border-2">2px边框</div>
<div class="border-4">4px边框</div>
<div class="border-8">8px边框</div>

<!-- 边框样式 -->
<div class="border border-solid">实线边框</div>
<div class="border border-dashed">虚线边框</div>
<div class="border border-dotted">点线边框</div>
<div class="border border-double">双线边框</div>
<div class="border border-none">无边框</div>

字体与文本工具类

字体系列

<!-- 字体系列 -->
<p class="font-sans">无衬线字体</p>
<p class="font-serif">衬线字体</p>
<p class="font-mono">等宽字体</p>

<!-- 自定义字体 -->
<p class="font-['Inter']">Inter字体</p>
<p class="font-['Roboto','sans-serif']">Roboto字体</p>

<!-- 字体大小 -->
<p class="text-xs">超小文本 (0.75rem)</p>
<p class="text-sm">小文本 (0.875rem)</p>
<p class="text-base">基础文本 (1rem)</p>
<p class="text-lg">大文本 (1.125rem)</p>
<p class="text-xl">超大文本 (1.25rem)</p>
<p class="text-2xl">2倍大文本 (1.5rem)</p>
<p class="text-3xl">3倍大文本 (1.875rem)</p>
<p class="text-4xl">4倍大文本 (2.25rem)</p>
<p class="text-5xl">5倍大文本 (3rem)</p>
<p class="text-6xl">6倍大文本 (3.75rem)</p>

<!-- 任意大小 -->
<p class="text-[14px]">自定义像素大小</p>
<p class="text-[1.375rem]">自定义rem大小</p>

字体粗细

<!-- 字体粗细 -->
<p class="font-thin">极细 (100)</p>
<p class="font-extralight">超细 (200)</p>
<p class="font-light">细 (300)</p>
<p class="font-normal">正常 (400)</p>
<p class="font-medium">中等 (500)</p>
<p class="font-semibold">半粗 (600)</p>
<p class="font-bold">粗 (700)</p>
<p class="font-extrabold">超粗 (800)</p>
<p class="font-black">最粗 (900)</p>

<!-- 任意粗细 -->
<p class="font-[350]">自定义粗细</p>

文本对齐

<!-- 水平对齐 -->
<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>
<p class="text-start">起始对齐</p>
<p class="text-end">结束对齐</p>

<!-- 垂直对齐 -->
<span class="align-baseline">基线对齐</span>
<span class="align-top">顶部对齐</span>
<span class="align-middle">中间对齐</span>
<span class="align-bottom">底部对齐</span>
<span class="align-text-top">文本顶部对齐</span>
<span class="align-text-bottom">文本底部对齐</span>
<span class="align-sub">下标对齐</span>
<span class="align-super">上标对齐</span>

文本装饰

<!-- 文本装饰 -->
<p class="underline">下划线</p>
<p class="overline">上划线</p>
<p class="line-through">删除线</p>
<p class="no-underline">无装饰</p>

<!-- 装饰样式 -->
<p class="underline decoration-solid">实线装饰</p>
<p class="underline decoration-double">双线装饰</p>
<p class="underline decoration-dotted">点线装饰</p>
<p class="underline decoration-dashed">虚线装饰</p>
<p class="underline decoration-wavy">波浪线装饰</p>

<!-- 装饰颜色 -->
<p class="underline decoration-red-500">红色装饰</p>
<p class="underline decoration-blue-500">蓝色装饰</p>

<!-- 装饰粗细 -->
<p class="underline decoration-1">细装饰</p>
<p class="underline decoration-2">中装饰</p>
<p class="underline decoration-4">粗装饰</p>

<!-- 装饰偏移 -->
<p class="underline underline-offset-1">偏移装饰</p>
<p class="underline underline-offset-2">更大偏移</p>

文本变换

<!-- 大小写变换 -->
<p class="uppercase">大写文本</p>
<p class="lowercase">小写文本</p>
<p class="capitalize">首字母大写</p>
<p class="normal-case">正常大小写</p>

<!-- 文本溢出 -->
<div class="w-32">
  <p class="truncate">这是一段很长的文本，会被截断</p>
  <p class="text-ellipsis overflow-hidden">省略号显示</p>
  <p class="text-clip overflow-hidden">裁剪显示</p>
</div>

<!-- 换行控制 -->
<p class="whitespace-normal">正常换行</p>
<p class="whitespace-nowrap">不换行</p>
<p class="whitespace-pre">保留空白</p>
<p class="whitespace-pre-line">保留换行</p>
<p class="whitespace-pre-wrap">保留空白和换行</p>

<!-- 单词断行 -->
<p class="break-normal">正常断行</p>
<p class="break-words">单词断行</p>
<p class="break-all">强制断行</p>
<p class="break-keep">保持单词完整</p>

行高与字间距

<!-- 行高 -->
<p class="leading-none">无行高 (1)</p>
<p class="leading-tight">紧密行高 (1.25)</p>
<p class="leading-snug">紧凑行高 (1.375)</p>
<p class="leading-normal">正常行高 (1.5)</p>
<p class="leading-relaxed">宽松行高 (1.625)</p>
<p class="leading-loose">松散行高 (2)</p>

<!-- 任意行高 -->
<p class="leading-[1.75]">自定义行高</p>
<p class="leading-[28px]">像素行高</p>

<!-- 字间距 -->
<p class="tracking-tighter">更紧字间距 (-0.05em)</p>
<p class="tracking-tight">紧字间距 (-0.025em)</p>
<p class="tracking-normal">正常字间距 (0)</p>
<p class="tracking-wide">宽字间距 (0.025em)</p>
<p class="tracking-wider">更宽字间距 (0.05em)</p>
<p class="tracking-widest">最宽字间距 (0.1em)</p>

<!-- 任意字间距 -->
<p class="tracking-[0.15em]">自定义字间距</p>

实际应用示例

卡片组件

<!-- 基础卡片 -->
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" 
           src="/img/building.jpg" alt="Modern building architecture">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
        Company retreats
      </div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
        Incredible accommodation for your team
      </a>
      <p class="mt-2 text-slate-500">
        Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that.
      </p>
    </div>
  </div>
</div>

<!-- 产品卡片 -->
<div class="group relative max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
  <div class="aspect-w-16 aspect-h-9">
    <img class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" 
         src="product.jpg" alt="产品图片">
  </div>
  <div class="p-6">
    <div class="flex items-center justify-between mb-2">
      <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">
        新品
      </span>
      <span class="text-2xl font-bold text-gray-900">¥299</span>
    </div>
    <h3 class="text-lg font-semibold text-gray-900 mb-2">
      产品名称
    </h3>
    <p class="text-gray-600 text-sm mb-4">
      产品描述信息，简要介绍产品的主要特点和优势。
    </p>
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-1">
        <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
        </svg>
        <span class="text-sm text-gray-600">4.5 (128)</span>
      </div>
      <button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-colors">
        加入购物车
      </button>
    </div>
  </div>
</div>

表单组件

<!-- 登录表单 -->
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8">
    <div>
      <img class="mx-auto h-12 w-auto" src="logo.svg" alt="Logo">
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
        登录您的账户
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600">
        或者
        <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
          注册新账户
        </a>
      </p>
    </div>
    <form class="mt-8 space-y-6">
      <div class="rounded-md shadow-sm -space-y-px">
        <div>
          <label for="email-address" class="sr-only">邮箱地址</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required 
                 class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" 
                 placeholder="邮箱地址">
        </div>
        <div>
          <label for="password" class="sr-only">密码</label>
          <input id="password" name="password" type="password" autocomplete="current-password" required 
                 class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" 
                 placeholder="密码">
        </div>
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" 
                 class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900">
            记住我
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
            忘记密码？
          </a>
        </div>
      </div>

      <div>
        <button type="submit" 
                class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
            <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
            </svg>
          </span>
          登录
        </button>
      </div>
    </form>
  </div>
</div>

导航组件

<!-- 响应式导航栏 -->
<nav class="bg-white shadow-lg">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex justify-between">
      <div class="flex space-x-7">
        <!-- 网站Logo -->
        <div>
          <a href="#" class="flex items-center py-4 px-2">
            <img src="logo.png" alt="Logo" class="h-8 w-8 mr-2">
            <span class="font-semibold text-gray-500 text-lg">网站名称</span>
          </a>
        </div>
        <!-- 主导航菜单 -->
        <div class="hidden md:flex items-center space-x-1">
          <a href="#" class="py-4 px-2 text-gray-500 border-b-4 border-green-500 font-semibold">首页</a>
          <a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">服务</a>
          <a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">关于</a>
          <a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">联系</a>
        </div>
      </div>
      <!-- 次要导航菜单 -->
      <div class="hidden md:flex items-center space-x-3">
        <a href="#" class="py-2 px-2 font-medium text-gray-500 rounded hover:bg-green-500 hover:text-white transition duration-300">登录</a>
        <a href="#" class="py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300">注册</a>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden flex items-center">
        <button class="outline-none mobile-menu-button">
          <svg class="w-6 h-6 text-gray-500 hover:text-green-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端菜单 -->
  <div class="hidden mobile-menu">
    <ul class="">
      <li class="active"><a href="#" class="block text-sm px-2 py-4 text-white bg-green-500 font-semibold">首页</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">服务</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">关于</a></li>
      <li><a href="#" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">联系</a></li>
    </ul>
  </div>
</nav>

本章总结

通过本章学习，我们全面掌握了：

原子化CSS理念：单一职责、高度复用的样式架构
布局工具类：Display、Position、Flexbox、Grid等布局方式
间距工具类：Padding、Margin、Space Between等间距控制
尺寸工具类：Width、Height、Min/Max等尺寸设置
颜色工具类：文本、背景、边框等颜色应用
字体文本工具类：字体、大小、对齐、装饰等文本样式
实际应用：卡片、表单、导航等常见组件的实现

核心要点

原子化CSS提供了高效、一致的样式开发方式
工具类的组合使用可以实现复杂的设计效果
响应式设计通过断点前缀轻松实现
实际项目中要注意工具类的合理组织和复用

下一步

在下一章中，我们将学习响应式设计和断点系统，了解如何创建适配不同设备的界面。

练习题

布局练习：使用Flexbox和Grid创建一个响应式的卡片布局
组件重构：将一个传统CSS组件改写为原子化CSS
颜色系统：设计一套完整的颜色系统并应用到界面中
表单设计：创建一个包含各种表单元素的复杂表单
导航菜单：实现一个支持多级菜单的响应式导航栏

📂 分类导航

▶ 学与练
- ▶ 软件技术基础
  - ▶ 操作系统技术
    - Linux实战
    - ▶ Linux技巧
      - debug-remote-api.md
  - ▶ 容器化与编排
    - Docker实战
    - ▶ Docker高级
- ▶ 前端开发技术
  - ▶ 框架与库
    - js
    - vue
  - ▶ 前端生态
    - bootstrap
    - vue-ssr
- ▶ 后端开发技术
  - ▶ 编程语言
    - ▶ Java
    - ▶ Go
      - go-server.md
      - mini.md
    - Rust
    - Python
    - csharp
  - ▶ 中间件
    - redis
    - ▶ minio
      - minio.md
    - elasticsearch
    - kafka
    - elk
    - caddy
  - ▶ 数据库
    - MySQL
    - SQLServer
    - ▶ Dameng
      - sql.md
    - clickhouse
- ▶ 数据开发与运维
  - ▶ 数据开发
    - hadoop
  - ▶ 运维开发
    - ▶ CI/CD
      - jenkins
    - ▶ 自动化
      - allinssl.md
    - ▶ 日志处理
      - elk
    - ▶ 监控
- 软件速学教程
▶ 软件园
- AI智能体与应用
- 开发工具与环境
- AI 开发和编排
- 业务与生产力应用
- 数据和中间件
▶ 工具箱
- 内容管理
- 编码解码
- ▶ 系统监控
  - miaotixing.md
- ▶ 日常工具
- 工具命令
- 使用教程

📚 原子化CSS与工具类