Tailwind CSS 完整学习笔记

m0_738820202026-03-25 8:26

一、基础语法与安装

1.1 什么是 Tailwind CSS

Tailwind CSS 是一个原子化 CSS 框架，提供低级实用程序类，允许您在标记中构建完全自定义的设计，而无需离开您的 HTML。

1.2 安装步骤

使用 npm 安装
bash 复制代码 
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
配置 tailwind.config.js
javascript 复制代码 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
在 CSS 中引入 Tailwind
css 复制代码 
@tailwind base;
@tailwind components;
@tailwind utilities;

1.3 核心概念

  • 原子化: 每个类只做一件事
  • 实用程序优先: 直接在 HTML 中编写样式
  • 可配置: 通过配置文件自定义设计系统

二、布局工具类

2.1 容器 (Container)

html 复制代码 
<div class="container">居中对齐的容器</div>
<div class="container mx-auto">自动外边距居中</div>
<div class="container px-4">自定义内边距</div>

<!-- 响应式断点 -->
<div class="container sm:px-6 md:px-8 lg:px-12 xl:px-24">

2.2 网格布局 (Grid)

html 复制代码 
<!-- 基础网格 -->
<div class="grid grid-cols-3 gap-4">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

<!-- 列数配置 -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
  <div>响应式列数</div>
</div>

<!-- 跨列/跨行 -->
<div class="grid grid-cols-4 grid-rows-2 gap-4">
  <div class="col-span-2">跨2列</div>
  <div class="row-span-2">跨2行</div>
  <div>普通项</div>
</div>

<!-- 自动填充 -->
<div class="grid grid-cols-auto-fit gap-4">
  <div class="min-w-[200px]">自动适应</div>
</div>

2.3 弹性布局 (Flex)

html 复制代码 
<!-- 基础弹性容器 -->
<div class="flex">
  <div class="flex-1">弹性项目</div>
  <div>固定大小</div>
</div>

<!-- 方向控制 -->
<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 class="flex justify-start">左对齐</div>
<div class="flex justify-center">居中对齐</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-stretch">拉伸对齐</div>

<div class="flex content-start">多行起点对齐</div>
<div class="flex content-center">多行居中对齐</div>
<div class="flex content-between">多行两端对齐</div>

<!-- 自对齐 -->
<div class="flex">
  <div class="self-start">单独对齐</div>
  <div class="self-center">居中</div>
  <div class="self-end">终点</div>
  <div class="self-stretch">拉伸</div>
</div>

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

三、间距与尺寸

3.1 外边距 (Margin)

html 复制代码 
<!-- 单轴 -->
<div class="mx-4">左右外边距</div>
<div class="my-4">上下外边距</div>
<div class="ml-4">左外边距</div>
<div class="mr-4">右外边距</div>
<div class="mt-4">上外边距</div>
<div class="mb-4">下外边距</div>

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

<!-- 负值 -->
<div class="-mt-4">负上边距</div>
<div class="-ml-4">负左边距</div>

3.2 内边距 (Padding)

html 复制代码 
<!-- 单轴 -->
<div class="px-4">左右内边距</div>
<div class="py-4">上下内边距</div>
<div class="pl-4">左内边距</div>
<div class="pr-4">右内边距</div>
<div class="pt-4">上内边距</div>
<div class="pb-4">下内边距</div>

<!-- 四边统一 -->
<div class="p-4">四边内边距</div>
<div class="p-0">无内边距</div>

3.3 尺寸控制

html 复制代码 
<!-- 宽度 -->
<div class="w-full">100%宽度</div>
<div class="w-1/2">50%宽度</div>
<div class="w-1/3">33.333%宽度</div>
<div class="w-1/4">25%宽度</div>
<div class="w-2/3">66.666%宽度</div>
<div class="w-3/4">75%宽度</div>
<div class="w-auto">自动宽度</div>
<div class="w-16">4rem宽度</div>
<div class="w-96">24rem宽度</div>
<div class="w-min">最小内容宽度</div>
<div class="w-max">最大内容宽度</div>
<div class="w-screen">视口宽度</div>

<!-- 高度 -->
<div class="h-full">100%高度</div>
<div class="h-16">4rem高度</div>
<div class="h-96">24rem高度</div>
<div class="h-auto">自动高度</div>
<div class="h-min">最小内容高度</div>
<div class="h-max">最大内容高度</div>
<div class="h-screen">视口高度</div>

<!-- 最小/最大尺寸 -->
<div class="min-w-0">最小宽度0</div>
<div class="min-w-full">最小宽度100%</div>
<div class="max-w-md">最大宽度36rem</div>
<div class="max-w-2xl">最大宽度48rem</div>
<div class="max-w-4xl">最大宽度56rem</div>
<div class="max-w-full">最大宽度100%</div>
<div class="min-h-screen">最小高度视口</div>
<div class="h-screen">高度视口</div>

四、排版样式

4.1 字体族

html 复制代码 
<div class="font-sans">无衬线字体</div>
<div class="font-serif">衬线字体</div>
<div class="font-mono">等宽字体</div>

<!-- 自定义字体 -->
<div class="font-primary">主字体</div>
<div class="font-secondary">辅助字体</div>

4.2 字体粗细

html 复制代码 
<div class="font-thin">100</div>
<div class="font-extralight">200</div>
<div class="font-light">300</div>
<div class="font-normal">400</div>
<div class="font-medium">500</div>
<div class="font-semibold">600</div>
<div class="font-bold">700</div>
<div class="font-extrabold">800</div>
<div class="font-black">900</div>

4.3 字号

html 复制代码 
<div class="text-xs">0.75rem (12px)</div>
<div class="text-sm">0.875rem (14px)</div>
<div class="text-base">1rem (16px)</div>
<div class="text-lg">1.125rem (18px)</div>
<div class="text-xl">1.25rem (20px)</div>
<div class="text-2xl">1.5rem (24px)</div>
<div class="text-3xl">1.875rem (30px)</div>
<div class="text-4xl">2.25rem (36px)</div>
<div class="text-5xl">3rem (48px)</div>
<div class="text-6xl">3.75rem (60px)</div>
<div class="text-7xl">4.5rem (72px)</div>
<div class="text-8xl">6rem (96px)</div>
<div class="text-9xl">8rem (128px)</div>

4.4 文本对齐

html 复制代码 
<div class="text-left">左对齐</div>
<div class="text-center">居中对齐</div>
<div class="text-right">右对齐</div>
<div class="text-justify">两端对齐</div>

4.5 行高

html 复制代码 
<div class="leading-none">1行高(无额外间距)</div>
<div class="leading-tight">1.25行高</div>
<div class="leading-snug">1.375行高</div>
<div class="leading-normal">1.5行高</div>
<div class="leading-relaxed">1.625行高</div>
<div class="leading-loose">2行高</div>
<div class="leading-[1.5]">自定义行高</div>

4.6 字间距

html 复制代码 
<div class="tracking-tighter">更紧的字间距</div>
<div class="tracking-tight">紧的字间距</div>
<div class="tracking-normal">正常字间距</div>
<div class="tracking-wide">宽的字间距</div>
<div class="tracking-wider">更宽的字间距</div>
<div class="tracking-widest">最宽的字间距</div>
<div class="tracking-[0.1em]">自定义字间距</div>

4.7 单词间距

html 复制代码 
<div class="word-break-normal">正常单词断行</div>
<div class="word-break-break-all">任意位置断行</div>
<div class="word-break-keep-all">保持单词</div>
<div class="truncate">文本截断(单行)</div>
<div class="line-clamp-3">文本截断(3行)</div>

4.8 文本样式

html 复制代码 
<div class="uppercase">全大写</div>
<div class="lowercase">全小写</div>
<div class="capitalize">首字母大写</div>
<div class="normal-case">正常大小写</div>

<div class="italic">斜体</div>
<div class="not-italic">非斜体</div>
<div class="underline">下划线</div>
<div class="overline">上划线</div>
<div class="line-through">删除线</div>
<div class="no-underline">无下划线</div>

<div class="antialiased">抗锯齿渲染</div>
<div class="subpixel-antialiased">子像素抗锯齿</div>

五、背景与边框

5.1 背景颜色

html 复制代码 
<div class="bg-transparent">透明</div>
<div class="bg-current">当前颜色</div>
<div class="bg-black">黑色</div>
<div class="bg-white">白色</div>
<div class="bg-gray-50">灰色50</div>
<div class="bg-gray-100">灰色100</div>
<div class="bg-gray-200">灰色200</div>
<div class="bg-gray-300">灰色300</div>
<div class="bg-gray-400">灰色400</div>
<div class="bg-gray-500">灰色500</div>
<div class="bg-gray-600">灰色600</div>
<div class="bg-gray-700">灰色700</div>
<div class="bg-gray-800">灰色800</div>
<div class="bg-gray-900">灰色900</div>

<!-- 主题色 -->
<div class="bg-red-500">红色500</div>
<div class="bg-blue-500">蓝色500</div>
<div class="bg-green-500">绿色500</div>
<div class="bg-yellow-500">黄色500</div>
<div class="bg-purple-500">紫色500</div>
<div class="bg-pink-500">粉色500</div>

5.2 背景渐变

html 复制代码 
<!-- 线性渐变 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">从左到右</div>
<div class="bg-gradient-to-l from-blue-500 to-purple-500">从右到左</div>
<div class="bg-gradient-to-t from-blue-500 to-purple-500">从下到上</div>
<div class="bg-gradient-to-b from-blue-500 to-purple-500">从上到下</div>
<div class="bg-gradient-to-br from-blue-500 to-purple-500">右下角</div>
<div class="bg-gradient-to-tr from-blue-500 to-purple-500">右上角</div>
<div class="bg-gradient-to-bl from-blue-500 to-purple-500">左下角</div>
<div class="bg-gradient-to-tl from-blue-500 to-purple-500">左上角</div>

<!-- 径向渐变 -->
<div class="bg-radial-gradient from-blue-500 to-purple-500">径向渐变</div>

<!-- conic-gradient -->
<div class="bg-conic-gradient from-blue-500 to-purple-500">锥形渐变</div>

5.3 背景附件与位置

html 复制代码 
<div class="bg-fixed">固定背景</div>
<div class="bg-local">本地背景</div>
<div class="bg-scroll">滚动背景(默认)</div>

<div class="bg-center">中心位置</div>
<div class="bg-top">顶部位置</div>
<div class="bg-right">右侧位置</div>
<div class="bg-bottom">底部位置</div>
<div class="bg-left">左侧位置</div>
<div class="bg-right-top">右上角</div>
<div class="bg-right-bottom">右下角</div>
<div class="bg-left-top">左上角</div>
<div class="bg-left-bottom">左下角</div>

<div class="bg-repeat">重复背景</div>
<div class="bg-no-repeat">不重复背景</div>
<div class="bg-repeat-x">水平重复</div>
<div class="bg-repeat-y">垂直重复</div>
<div class="bg-repeat-round">智能重复</div>
<div class="bg-repeat-space">空间重复</div>

<div class="bg-auto">自动背景大小</div>
<div class="bg-cover">覆盖背景</div>
<div class="bg-contain">包含背景</div>

5.4 边框

html 复制代码 
<!-- 边框宽度 -->
<div class="border-0">无边框</div>
<div class="border-2">2px边框</div>
<div class="border-4">4px边框</div>
<div class="border">默认边框(1px)</div>

<!-- 边框颜色 -->
<div class="border-gray-200">灰色边框</div>
<div class="border-blue-500">蓝色边框</div>
<div class="border-current">当前颜色边框</div>
<div class="border-transparent">透明边框</div>

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

<!-- 单边边框 -->
<div class="border-t">上边框</div>
<div class="border-r">右边框</div>
<div class="border-b">下边框</div>
<div class="border-l">左边框</div>
<div class="border-x">左右边框</div>
<div class="border-y">上下边框</div>

<!-- 边框半径 -->
<div class="rounded-none">无圆角</div>
<div class="rounded-sm">小圆角(0.125rem)</div>
<div class="rounded">默认圆角(0.25rem)</div>
<div class="rounded-md">中等圆角(0.375rem)</div>
<div class="rounded-lg">大圆角(0.5rem)</div>
<div class="rounded-xl">超大圆角(0.75rem)</div>
<div class="rounded-2xl">超超大圆角(1.5rem)</div>
<div class="rounded-full">完全圆角</div>

<!-- 单角圆角 -->
<div class="rounded-t-lg">上圆角</div>
<div class="rounded-r-lg">右圆角</div>
<div class="rounded-b-lg">下圆角</div>
<div class="rounded-l-lg">左圆角</div>
<div class="rounded-tl-lg">左上圆角</div>
<div class="rounded-tr-lg">右上圆角</div>
<div class="rounded-br-lg">右下圆角</div>
<div class="rounded-bl-lg">左下圆角</div>

5.5 阴影

html 复制代码 
<!-- 阴影大小 -->
<div class="shadow-none">无阴影</div>
<div class="shadow-sm">小阴影</div>
<div class="shadow">默认阴影</div>
<div class="shadow-md">中等阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">超大阴影</div>
<div class="shadow-2xl">超超大阴影</div>
<div class="shadow-inner">内阴影</div>

<!-- 自定义阴影 -->
<div class="shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]">自定义阴影</div>

<!-- 阴影颜色 -->
<div class="shadow-blue-500/50">蓝色半透明阴影</div>

六、颜色系统

6.1 颜色透明度

html 复制代码 
<div class="text-red-500">红色</div>
<div class="text-red-500/50">50%透明度</div>
<div class="text-red-500/25">25%透明度</div>
<div class="text-red-500/75">75%透明度</div>

<div class="bg-blue-500/10">10%背景透明度</div>
<div class="border-green-500/20">20%边框透明度</div>

6.2 颜色变量

html 复制代码 
<!-- 使用CSS变量 -->
<div class="text-[var(--color-primary)]">自定义颜色</div>
<div class="bg-[#ff0000]">十六进制颜色</div>
<div class="border-[rgb(255,0,0)]">RGB颜色</div>
<div class="text-[hsl(0,100%,50%)]">HSL颜色</div>

6.3 混合模式

html 复制代码 
<div class="mix-blend-normal">正常</div>
<div class="mix-blend-multiply">正片叠底</div>
<div class="mix-blend-screen">滤色</div>
<div class="mix-blend-overlay">叠加</div>
<div class="mix-blend-darken">变暗</div>
<div class="mix-blend-lighten">变亮</div>
<div class="mix-blend-color-dodge">颜色减淡</div>
<div class="mix-blend-color-burn">颜色加深</div>
<div class="mix-blend-hard-light">强光</div>
<div class="mix-blend-soft-light">柔光</div>
<div class="mix-blend-difference">差值</div>
<div class="mix-blend-exclusion">排除</div>
<div class="mix-blend-hue">色相</div>
<div class="mix-blend-saturation">饱和度</div>
<div class="mix-blend-color">颜色</div>
<div class="mix-blend-luminosity">明度</div>
<div class="mix-blend-plus-lighter">更亮</div>

七、响应式设计

7.1 断点系统

html 复制代码 
<!-- 默认(移动优先) -->
<div class="text-base">默认字体</div>

<!-- sm: 640px及以上 -->
<div class="sm:text-lg">小屏幕及以上</div>

<!-- md: 768px及以上 -->
<div class="md:text-xl">中等屏幕及以上</div>

<!-- lg: 1024px及以上 -->
<div class="lg:text-2xl">大屏幕及以上</div>

<!-- xl: 1280px及以上 -->
<div class="xl:text-3xl">超大屏幕及以上</div>

<!-- 2xl: 1536px及以上 -->
<div class="2xl:text-4xl">超超大屏幕及以上</div>

7.2 响应式布局示例

html 复制代码 
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="p-4 bg-white rounded-lg shadow">
    <h3 class="text-lg font-semibold mb-2">响应式卡片</h3>
    <p class="text-gray-600">在移动设备上单列显示，平板双列，桌面三列</p>
  </div>
</div>

<div class="flex flex-col md:flex-row items-center">
  <div class="w-full md:w-1/2 p-4">
    <h2 class="text-2xl font-bold mb-4">标题</h2>
    <p class="text-gray-600">内容</p>
  </div>
  <div class="w-full md:w-1/2 p-4">
    <img src="image.jpg" alt="图片" class="w-full rounded-lg">
  </div>
</div>

7.3 响应式工具类组合

html 复制代码 
<div class="
  p-4 
  sm:p-6 
  md:p-8 
  lg:p-12
  text-sm 
  sm:text-base 
  md:text-lg
  bg-white
">
  响应式内边距和字体大小
</div>

八、自定义配置与主题扩展

8.1 配置文件结构

javascript 复制代码 
// tailwind.config.js
module.exports = {
  // 内容路径，用于检测使用的类
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  
  // 主题扩展
  theme: {
    extend: {
      // 颜色
      colors: {
        primary: '#3b82f6',
        secondary: '#6b7280',
      },
      
      // 字体族
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        serif: ['Georgia', 'serif'],
        mono: ['Menlo', 'Monaco', 'Courier New', 'monospace'],
      },
      
      // 字体大小
      fontSize: {
        'xs': '0.75rem',
        'sm': '0.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '3.75rem',
        '7xl': '4.5rem',
        '8xl': '6rem',
        '9xl': '8rem',
      },
      
      // 间距
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      
      // 边框半径
      borderRadius: {
        '4xl': '2rem',
        '5xl': '3rem',
      },
      
      // 阴影
      boxShadow: {
        'custom': '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
      },
      
      // 透明度
      opacity: {
        '15': '0.15',
        '25': '0.25',
        '35': '0.35',
        '45': '0.45',
        '55': '0.55',
        '65': '0.65',
        '75': '0.75',
        '85': '0.85',
        '95': '0.95',
      },
      
      // z-index
      zIndex: {
        '-1': '-1',
        '100': '100',
        '200': '200',
      },
    },
  },
  
  // 插件
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

8.2 创建自定义类

javascript 复制代码 
// 在配置中添加
theme: {
  extend: {
    keyframes: {
      'fade-in': {
        '0%': { opacity: '0' },
        '100%': { opacity: '1' },
      },
    },
    animation: {
      'fade-in': 'fade-in 0.3s ease-out',
    },
  },
}

8.3 使用 @apply 自定义组件

css 复制代码 
/* 在全局CSS中 */
.btn-primary {
  @apply px-4 py-2 rounded-lg bg-blue-500 text-white font-medium
         hover:bg-blue-600 focus:outline-none focus:ring-2 
         focus:ring-blue-500 focus:ring-offset-2 transition;
}

.btn-secondary {
  @apply px-4 py-2 rounded-lg bg-gray-500 text-white font-medium
         hover:bg-gray-600 focus:outline-none focus:ring-2 
         focus:ring-gray-500 focus:ring-offset-2 transition;
}

.card {
  @apply bg-white rounded-xl shadow-md overflow-hidden;
}

.form-input {
  @apply w-full px-4 py-2 border border-gray-300 rounded-lg
         focus:outline-none focus:ring-2 focus:ring-blue-500
         focus:border-transparent transition;
}

九、常用组件示例

9.1 按钮组件

html 复制代码 
<!-- 基础按钮 -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
  基础按钮
</button>

<!-- 不同颜色 -->
<button class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
  危险按钮
</button>
<button class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
  成功按钮
</button>
<button class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition">
  警告按钮
</button>

<!-- 边框按钮 -->
<button class="px-4 py-2 border border-blue-500 text-blue-500 rounded-lg hover:bg-blue-50 transition">
  边框按钮
</button>

<!-- 禁用按钮 -->
<button class="px-4 py-2 bg-gray-400 text-white rounded-lg cursor-not-allowed opacity-50" disabled>
  禁用按钮
</button>

<!-- 加载中按钮 -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center gap-2">
  <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  加载中...
</button>

<!-- 大小变体 -->
<button class="px-2 py-1 text-sm bg-blue-500 text-white rounded">小按钮</button>
<button class="px-4 py-2 bg-blue-500 text-white rounded">中按钮</button>
<button class="px-6 py-3 text-lg bg-blue-500 text-white rounded">大按钮</button>

<!-- 宽度变体 -->
<button class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg">全宽按钮</button>

9.2 卡片组件

html 复制代码 
<!-- 基础卡片 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900 mb-2">卡片标题</h3>
    <p class="text-gray-600 mb-4">卡片内容描述，这里可以放一些文本内容来说明卡片的主题。</p>
    <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
      查看详情
    </button>
  </div>
</div>

<!-- 图片卡片 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
  <img src="https://via.placeholder.com/600x300" alt="图片描述" class="w-full h-48 object-cover">
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900 mb-2">图片卡片</h3>
    <p class="text-gray-600 mb-4">带图片的卡片布局。</p>
  </div>
</div>

<!-- 列表卡片 -->
<div class="bg-white rounded-xl shadow-md p-6">
  <h3 class="text-lg font-bold text-gray-900 mb-4">列表内容</h3>
  <ul class="space-y-3">
    <li class="flex items-center gap-3">
      <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
      <span class="text-gray-700">列表项一</span>
    </li>
    <li class="flex items-center gap-3">
      <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
      <span class="text-gray-700">列表项二</span>
    </li>
    <li class="flex items-center gap-3">
      <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
      <span class="text-gray-700">列表项三</span>
    </li>
  </ul>
</div>

<!-- 悬停效果卡片 -->
<div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6">
  <h3 class="text-xl font-bold text-gray-900 mb-2">悬停效果</h3>
  <p class="text-gray-600">鼠标悬停时阴影会变大</p>
</div>

9.3 表单组件

html 复制代码 
<!-- 输入框 -->
<div class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
    <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
  </div>
  
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
    <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
  </div>
  
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
    <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
  </div>
</div>

<!-- 多行文本框 -->
<div class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
    <textarea rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"></textarea>
  </div>
</div>

<!-- 下拉选择框 -->
<div class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">选择选项</label>
    <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
      <option>选项一</option>
      <option>选项二</option>
      <option>选项三</option>
    </select>
  </div>
</div>

<!-- 复选框和单选框 -->
<div class="space-y-4">
  <div class="flex items-center gap-2">
    <input type="checkbox" id="checkbox1" class="w-4 h-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
    <label for="checkbox1" class="text-gray-700">复选框</label>
  </div>
  
  <div class="flex items-center gap-2">
    <input type="radio" id="radio1" name="radio" class="w-4 h-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
    <label for="radio1" class="text-gray-700">单选框</label>
  </div>
</div>

<!-- 带图标的输入框 -->
<div class="relative">
  <label class="block text-sm font-medium text-gray-700 mb-1">搜索</label>
  <div class="relative">
    <input type="text" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
    <svg class="absolute left-3 top-2.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
  </div>
</div>

<!-- 表单验证状态 -->
<div class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">成功状态</label>
    <input type="text" class="w-full px-4 py-2 border border-green-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition">
    <p class="mt-1 text-sm text-green-600">输入有效</p>
  </div>
  
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">错误状态</label>
    <input type="text" class="w-full px-4 py-2 border border-red-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition">
    <p class="mt-1 text-sm text-red-600">请输入有效内容</p>
  </div>
</div>

<!-- 表单布局 -->
<form class="space-y-6">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
      <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">电话</label>
      <input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
    </div>
  </div>
  
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">地址</label>
    <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
  </div>
  
  <div class="flex items-center justify-end gap-4">
    <button type="button" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
      取消
    </button>
    <button type="submit" class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
      提交
    </button>
  </div>
</form>

9.4 导航栏组件

html 复制代码 
<!-- 简单导航 -->
<nav class="bg-white shadow-md">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div class="text-xl font-bold text-gray-900">Logo</div>
      <div class="flex items-center space-x-4">
        <a href="#" class="text-gray-700 hover:text-blue-500 transition">首页</a>
        <a href="#" class="text-gray-700 hover:text-blue-500 transition">产品</a>
        <a href="#" class="text-gray-700 hover:text-blue-500 transition">关于</a>
        <a href="#" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">登录</a>
      </div>
    </div>
  </div>
</nav>

<!-- 响应式导航 -->
<nav class="bg-white shadow-md">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div class="text-xl font-bold text-gray-900">Logo</div>
      
      <!-- 移动端菜单按钮 -->
      <button class="md:hidden text-gray-700 focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
      
      <!-- 导航链接 -->
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-700 hover:text-blue-500 transition">首页</a>
        <a href="#" class="text-gray-700 hover:text-blue-500 transition">产品</a>
        <a href="#" class="text-gray-700 hover:text-blue-500 transition">关于</a>
        <a href="#" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">登录</a>
      </div>
    </div>
  </div>
</nav>

9.5 通知/消息组件

html 复制代码 
<!-- 成功通知 -->
<div class="bg-green-50 border-l-4 border-green-500 p-4 rounded-lg flex items-center gap-3">
  <div class="text-green-500">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
  </div>
  <div>
    <h4 class="text-green-800 font-semibold">操作成功</h4>
    <p class="text-green-600 text-sm">数据已成功保存</p>
  </div>
  <button class="ml-auto text-green-500 hover:text-green-700">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>

<!-- 错误通知 -->
<div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-lg flex items-center gap-3">
  <div class="text-red-500">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
  </div>
  <div>
    <h4 class="text-red-800 font-semibold">操作失败</h4>
    <p class="text-red-600 text-sm">请检查输入内容</p>
  </div>
  <button class="ml-auto text-red-500 hover:text-red-700">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>

<!-- 警告通知 -->
<div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded-lg flex items-center gap-3">
  <div class="text-yellow-500">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
    </svg>
  </div>
  <div>
    <h4 class="text-yellow-800 font-semibold">注意</h4>
    <p class="text-yellow-600 text-sm">请确认信息后再提交</p>
  </div>
  <button class="ml-auto text-yellow-500 hover:text-yellow-700">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>

<!-- 信息通知 -->
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg flex items-center gap-3">
  <div class="text-blue-500">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
  </div>
  <div>
    <h4 class="text-blue-800 font-semibold">信息</h4>
    <p class="text-blue-600 text-sm">系统将在维护后重启</p>
  </div>
  <button class="ml-auto text-blue-500 hover:text-blue-700">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>

9.6 加载/骨架屏组件

html 复制代码 
<!-- 骨架屏加载 -->
<div class="bg-white rounded-xl shadow-md p-6">
  <div class="flex items-center gap-4 mb-4">
    <div class="w-12 h-12 bg-gray-200 rounded-full animate-pulse"></div>
    <div class="flex-1 space-y-2">
      <div class="h-4 bg-gray-200 rounded w-3/4 animate-pulse"></div>
      <div class="h-3 bg-gray-200 rounded w-1/2 animate-pulse"></div>
    </div>
  </div>
  <div class="space-y-3">
    <div class="h-4 bg-gray-200 rounded animate-pulse"></div>
    <div class="h-4 bg-gray-200 rounded animate-pulse"></div>
    <div class="h-4 bg-gray-200 rounded w-5/6 animate-pulse"></div>
  </div>
</div>

<!-- 圆形加载动画 -->
<div class="flex items-center justify-center p-4">
  <div class="relative w-16 h-16">
    <div class="absolute inset-0 border-4 border-blue-200 rounded-full"></div>
    <div class="absolute inset-0 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
  </div>
</div>

<!-- 条形加载动画 -->
<div class="flex items-center gap-2 p-4">
  <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s"></div>
  <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.15s"></div>
  <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.3s"></div>
</div>

9.7 模态框组件

html 复制代码 
<!-- 简单模态框 -->
<div class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-black bg-opacity-50 backdrop-blur-sm p-4">
  <div class="relative bg-white rounded-xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto">
    <div class="flex items-center justify-between p-6 border-b border-gray-200">
      <h3 class="text-xl font-bold text-gray-900">模态框标题</h3>
      <button class="text-gray-400 hover:text-gray-600 transition">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <div class="p-6">
      <p class="text-gray-600">这里是模态框内容区域。您可以在此放置任何内容，包括文本、图片、表单等。</p>
    </div>
    <div class="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
      <button class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
        取消
      </button>
      <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
        确认
      </button>
    </div>
  </div>
</div>

9.8 进度条组件

html 复制代码 
<!-- 基础进度条 -->
<div class="w-full bg-gray-200 rounded-full h-2">
  <div class="bg-blue-500 h-2 rounded-full" style="width: 75%"></div>
</div>

<!-- 带文本的进度条 -->
<div class="space-y-2">
  <div class="flex justify-between text-sm font-medium">
    <span class="text-gray-700">上传进度</span>
    <span class="text-blue-500">75%</span>
  </div>
  <div class="w-full bg-gray-200 rounded-full h-3">
    <div class="bg-blue-500 h-3 rounded-full transition-all duration-500" style="width: 75%"></div>
  </div>
</div>

<!-- 多色进度条 -->
<div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden flex">
  <div class="bg-green-500 h-full" style="width: 40%"></div>
  <div class="bg-yellow-500 h-full" style="width: 30%"></div>
  <div class="bg-red-500 h-full" style="width: 30%"></div>
</div>

<!-- 条纹进度条 -->
<div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
  <div class="bg-gradient-to-r from-blue-400 to-blue-600 h-3 rounded-full bg-[length:20px_100%] animate-[shimmer_2s_infinite]" style="width: 60%"></div>
</div>

9.9 标签/徽章组件

html 复制代码 
<!-- 基础标签 -->
<span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded">默认标签</span>

<!-- 不同颜色 -->
<span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded">蓝色标签</span>
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">绿色标签</span>
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">红色标签</span>
<span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">黄色标签</span>
<span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded">紫色标签</span>

<!-- 圆形标签 -->
<span class="px-3 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">圆形标签</span>

<!-- 带图标的标签 -->
<span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded flex items-center gap-1">
  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
  </svg>
  已完成
</span>

<!-- 可关闭标签 -->
<span class="px-3 py-1 text-sm bg-gray-100 text-gray-800 rounded flex items-center gap-2">
  标签名称
  <button class="text-gray-500 hover:text-gray-700">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</span>

9.10 卡片网格布局

html 复制代码 
<!-- 响应式卡片网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6">
    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
      <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
      </svg>
    </div>
    <h3 class="text-lg font-bold text-gray-900 mb-2">快速处理</h3>
    <p class="text-gray-600 text-sm">系统响应速度快，处理效率高</p>
  </div>
  
  <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6">
    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
      <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
    </div>
    <h3 class="text-lg font-bold text-gray-900 mb-2">安全可靠</h3>
    <p class="text-gray-600 text-sm">数据加密存储，保障用户信息安全</p>
  </div>
  
  <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6">
    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
      <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
      </svg>
    </div>
    <h3 class="text-lg font-bold text-gray-900 mb-2">易于集成</h3>
    <p class="text-gray-600 text-sm">提供完善的API文档，快速集成</p>
  </div>
  
  <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6">
    <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
      <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
      </svg>
    </div>
    <h3 class="text-lg font-bold text-gray-900 mb-2">灵活配置</h3>
    <p class="text-gray-600 text-sm">支持多种配置选项，满足不同需求</p>
  </div>
</div>

十、最佳实践

10.1 代码组织

html 复制代码 
<!-- 保持类名有序 -->
<div class="
  bg-white
  rounded-xl
  shadow-md
  p-6
  hover:shadow-xl
  transition-shadow
  duration-300
">
  内容
</div>

10.2 性能优化

  • 使用 @apply 减少重复类名
  • 启用 purge 删除未使用的类
  • 使用 CDN 版本减少打包体积

10.3 可访问性

html 复制代码 
<!-- 焦点状态 -->
<button class="
  px-4 py-2
  bg-blue-500 text-white
  rounded-lg
  focus:outline-none
  focus:ring-2
  focus:ring-blue-500
  focus:ring-offset-2
">
  可访问的按钮
</button>

<!-- 语义化标签 -->
<nav aria-label="主导航">
  <ul class="flex space-x-4">
    <li><a href="#" class="text-gray-700 hover:text-blue-500">首页</a></li>
  </ul>
</nav>

<!-- 适当的对比度 -->
<div class="text-gray-900 bg-white">高对比度文本</div>

10.4 响应式设计技巧

html 复制代码 
<!-- 移动优先 -->
<div class="text-center md:text-left">
  移动端居中，桌面端左对齐
</div>

<!-- 灵活的间距 -->
<div class="space-y-4 md:space-y-6 lg:space-y-8">
  响应式垂直间距
</div>

<!-- 响应式字体大小 -->
<div class="text-2xl md:text-3xl lg:text-4xl">
  响应式字体大小
</div>
相关推荐
中屹指纹浏览器1 小时前
2026小程序与Web生态跨端设备指纹一致性检测及对抗技术研究
经验分享·笔记
左左右右左右摇晃1 小时前
Java并发——Lock锁
java·开发语言·笔记
<花开花落>2 小时前
AI 时代下，思考阅读方式的改变
经验分享·笔记·学习方法
似水明俊德2 小时前
16-C#.Net-自研ORM框架-学习笔记
windows·笔记·学习·c#·.net
人邮异步社区2 小时前
大一学生如何入门机器学习，深度学习，学习顺序如何？
深度学习·学习·机器学习
_李小白2 小时前
【OSG学习笔记】Day 4: 矩阵变换
笔记·学习·矩阵·图形渲染
2201_754864782 小时前
学习日记（2026年3月24日）
学习
sensen_kiss2 小时前
CPT304 SoftwareEngineeringII 软件工程 2 Pt.1软件危机
学习·软件工程
xw-busy-code3 小时前
sass学习笔记整理
笔记·学习·sass
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03围棋-html版本04小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）05班级宠物园部署指南06OpenClaw 使用和管理 MCP 完全指南07UV安装并设置国内源08“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）09AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南