Tailwind CSS — 实用优先的 CSS 框架完全指南

# 创建 Vite 项目
npm create vite@latest my-app -- --template react
cd my-app

# 安装 Tailwind CSS
npm install tailwindcss @tailwindcss/vite

# 在 vite.config.js 中添加插件
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()]
}

/* src/index.css */
@import "tailwindcss";

<div class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-lg">
  <h2 class="text-xl font-bold text-gray-900">Hello Tailwind!</h2>
  <p class="text-gray-500">快速上手，即刻体验</p>
</div>

# 创建 Next.js 项目（会自动询问是否使用 Tailwind）
npx create-next-app@latest my-app

# 如果已有项目，手动安装
npm install tailwindcss @tailwindcss/postcss postcss

/* app/globals.css */
@import "tailwindcss";

# 安装 Tailwind CLI
npm install tailwindcss @tailwindcss/cli

# 创建输入 CSS 文件
echo '@import "tailwindcss";' > src/input.css

# 编译输出
npx @tailwindcss/cli -i src/input.css -o dist/output.css --watch

<link href="/dist/output.css" rel="stylesheet">

/* style.css */
.chat-notification {
  display: flex;
  align-items: center;
  max-width: 24rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
}

<div class="flex items-center max-w-sm p-6 rounded-lg bg-white shadow-xl">
  ...
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- 手机 1 列，平板 2 列，桌面 3 列 -->
</div>

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300
               active:bg-blue-800 disabled:opacity-50 disabled:cursor-not-allowed
               transition-colors duration-200">
  点击我
</button>

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h2 class="text-xl font-bold">自动适应明暗主题</h2>
  <p class="text-gray-600 dark:text-gray-400">内容文字</p>
</div>

/* 通过 selector 策略手动控制 */
@custom-variant dark (&:where(.dark, .dark *));

<div class="w-[calc(100%-2rem)] top-[117px] bg-[#1da1f2] grid-cols-[1fr_2fr_1fr]">
  自定义宽度、定位、颜色、网格列
</div>

<div class="[mask-type:luminance] [--my-var:12px]">...</div>

<!-- 水平居中排列 -->
<div class="flex items-center justify-center gap-4">...</div>

<!-- 两端对齐 -->
<div class="flex items-center justify-between">...</div>

<!-- 垂直排列 -->
<div class="flex flex-col gap-2">...</div>

<!-- 换行 -->
<div class="flex flex-wrap gap-3">...</div>

<!-- 子项占满剩余空间 -->
<div class="flex-1">...</div>
<div class="flex-none">固定宽度</div>
<div class="flex-shrink-0">不收缩</div>

<!-- 3 列等宽网格 -->
<div class="grid grid-cols-3 gap-6">...</div>

<!-- 响应式网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">...</div>

<!-- 自适应列宽（每列至少 250px） -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">...</div>

<!-- 跨列 -->
<div class="col-span-2">占两列</div>
<div class="col-span-full">占整行</div>

<!-- 字号与行高 -->
<h1 class="text-4xl font-bold leading-tight">大标题</h1>
<p class="text-base leading-relaxed text-gray-600">正文内容</p>
<span class="text-sm text-gray-400">辅助说明</span>

<!-- 字重 -->
<span class="font-light">细体</span>
<span class="font-medium">中等</span>
<span class="font-bold">粗体</span>
<span class="font-extrabold">超粗</span>

<!-- 文本处理 -->
<p class="truncate">超长文本自动省略...</p>
<p class="line-clamp-3">限制最多 3 行</p>
<p class="uppercase tracking-wider">大写字母间距</p>

<!-- 文本颜色 -->
<p class="text-blue-500">蓝色文字</p>
<p class="text-gray-900 dark:text-gray-100">自适应文字</p>

<!-- 背景颜色 -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500">渐变背景</div>
<div class="bg-black/50">50% 透明度黑色</div>

<!-- 边框颜色 -->
<div class="border border-gray-200 hover:border-blue-500">...</div>

<!-- 环形颜色 -->
<input class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" />

<!-- 内边距 -->
<div class="p-4">四周 16px</div>
<div class="px-6 py-3">水平 24px，垂直 12px</div>
<div class="pt-8 pb-4 pl-6 pr-6">分别设置</div>

<!-- 外边距 -->
<div class="m-4">四周 16px</div>
<div class="mx-auto">水平居中</div>
<div class="mt-8 mb-4">上下不同</div>
<div class="-mt-4">负外边距</div>

<!-- 间距速查 -->
<!-- 0=0, 1=4px, 2=8px, 3=12px, 4=16px, 5=20px, 6=24px, 8=32px, 10=40px, 12=48px, 16=64px -->

<!-- 边框 -->
<div class="border">1px 边框</div>
<div class="border-2 border-blue-500">2px 蓝色边框</div>
<div class="border-b border-gray-200">仅底部边框</div>
<div class="divide-y divide-gray-200">子元素之间加分割线</div>

<!-- 圆角 -->
<div class="rounded">小圆角（4px）</div>
<div class="rounded-lg">中圆角（8px）</div>
<div class="rounded-xl">大圆角（12px）</div>
<div class="rounded-full">完全圆形</div>
<div class="rounded-t-lg rounded-b-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="opacity-50">50% 透明度</div>
<div class="bg-black/25">25% 透明度背景</div>
<div class="text-white/80">80% 透明度文字</div>

<!-- 过渡 -->
<button class="transition-colors duration-200 ease-in-out
               bg-blue-500 hover:bg-blue-700">
  平滑变色
</button>

<div class="transition-all duration-300 hover:scale-105 hover:shadow-lg">
  悬停放大 + 阴影
</div>

<!-- 内置动画 -->
<div class="animate-spin">旋转加载</div>
<div class="animate-ping">脉冲效果</div>
<div class="animate-pulse">呼吸闪烁</div>
<div class="animate-bounce">弹跳效果</div>

<!-- 缩放 -->
<div class="hover:scale-105">悬停放大 5%</div>
<div class="scale-75">缩小到 75%</div>

<!-- 旋转 -->
<div class="rotate-45">旋转 45 度</div>
<div class="hover:-rotate-6">悬停反向旋转</div>

<!-- 平移 -->
<div class="translate-x-4">右移 16px</div>
<div class="hover:-translate-y-1">悬停上移</div>

<!-- 倾斜 -->
<div class="skew-x-6">水平倾斜</div>

<!-- 变换原点 -->
<div class="origin-top-left rotate-12">以左上角为原点旋转</div>

<!-- 模糊 -->
<div class="blur-sm">轻微模糊</div>
<div class="blur-md">中等模糊</div>

<!-- 背景模糊（毛玻璃效果） -->
<div class="backdrop-blur-md bg-white/30">
  毛玻璃效果
</div>

<!-- 亮度/对比度/饱和度 -->
<img class="brightness-110 contrast-125 saturate-150" />
<img class="grayscale hover:grayscale-0 transition-all" />

<!-- 投影（适合 PNG 图片/图标） -->
<img class="drop-shadow-lg" />
<svg class="drop-shadow-md" />

<nav class="flex flex-col sm:flex-row items-center justify-between p-4">
  <div class="text-xl font-bold">Logo</div>
  <div class="flex gap-4 mt-4 sm:mt-0">
    <a class="text-gray-600 hover:text-gray-900">首页</a>
    <a class="text-gray-600 hover:text-gray-900">关于</a>
    <a class="text-gray-600 hover:text-gray-900">联系</a>
  </div>
</nav>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
  <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
    <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
    <p class="text-gray-500 text-sm">卡片内容</p>
  </div>
  <!-- 更多卡片 -->
</div>

<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
  响应式标题
</h1>

<div class="hidden md:block">桌面端显示</div>
<div class="block md:hidden">移动端显示</div>

@theme {
  --breakpoint-xs: 475px;
  --breakpoint-3xl: 1800px;
}

<div class="@container">
  <div class="flex flex-col @md:flex-row gap-4">
    <!-- 当容器宽度 >= 28rem 时变为横向排列 -->
  </div>
</div>

@import "tailwindcss";

@theme {
  /* 自定义颜色 */
  --color-primary: #4361ee;
  --color-primary-light: #6b83f2;
  --color-primary-dark: #2b45c1;

  /* 自定义字体 */
  --font-sans: "Inter", "Noto Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* 自定义间距 */
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;

  /* 自定义断点 */
  --breakpoint-xs: 475px;

  /* 自定义阴影 */
  --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07),
                 0 10px 20px -2px rgba(0, 0, 0, 0.04);

  /* 自定义动画 */
  --animate-fade-in: fade-in 0.5s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

<article class="prose prose-lg dark:prose-invert max-w-none">
  <!-- Markdown 渲染的 HTML 内容，自动获得优美排版 -->
  <h2>标题自动样式</h2>
  <p>段落自动间距和字号</p>
  <pre><code>代码块自动样式</code></pre>
</article>

/* 自定义 CSS 文件 */
@import "tailwindcss";

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg
           hover:bg-blue-700 focus:ring-2 focus:ring-blue-300
           transition-colors duration-200 font-medium;
  }

  .card {
    @apply bg-white rounded-xl shadow-md p-6
           hover:shadow-lg transition-shadow;
  }

  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }
}