622 Tailwind CSS 实用工具速查¶

# Vite 项目（推荐）
npm install tailwindcss @tailwindcss/vite  # 安装 Tailwind 和 Vite 插件

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';  // 导入 Vite 插件

export default {
    plugins: [tailwindcss()]               // 注册插件（自动处理所有 CSS）
};

/* src/app.css - 只需一行导入 */
@import "tailwindcss";                     /* v4 新方式：一行搞定（不再需要 @tailwind base/components/utilities） */

/* src/app.css - 所有配置都在 CSS 中 */
@import "tailwindcss";

/* 自定义主题：用 @theme 指令（替代 tailwind.config.js 的 theme.extend） */
@theme {
    --color-primary: #3b82f6;              /* 自定义颜色 */
    --color-secondary: #10b981;
    --font-family-display: "Inter", sans-serif;  /* 自定义字体 */
    --breakpoint-3xl: 1920px;              /* 自定义断点 */
}

/* 添加插件 */
@plugin "@tailwindcss/typography";         /* 排版插件 */
@plugin "@tailwindcss/forms";              /* 表单样式插件 */

<!-- Flexbox 布局 -->
<div class="flex items-center justify-between gap-4">
    <!--
        flex            → display: flex（弹性布局）
        items-center    → align-items: center（垂直居中）
        justify-between → justify-content: space-between（两端对齐）
        gap-4           → gap: 1rem（子元素间距）
    -->
    <span>左边</span>
    <span>右边</span>
</div>

<!-- Grid 网格布局 -->
<div class="grid grid-cols-3 gap-6">
    <!--
        grid          → display: grid
        grid-cols-3   → 3列等宽
        gap-6         → gap: 1.5rem
    -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<!-- 容器查询（v4 内置） -->
<div class="@container">
    <!--
        @container      → 声明为容器查询上下文
        @md:grid-cols-2 → 当容器宽度 >= 28rem 时变成2列
        @lg:grid-cols-3 → 当容器宽度 >= 32rem 时变成3列
    -->
    <div class="grid @md:grid-cols-2 @lg:grid-cols-3 gap-4">
        <div>响应式内容</div>
    </div>
</div>

<!-- 间距规则：数字 × 0.25rem（1 = 4px, 2 = 8px, 4 = 16px, 8 = 32px） -->
<div class="p-4 m-2 px-6 py-3 mt-8 mb-4">
    <!--
        p-4   → padding: 1rem（内边距）
        m-2   → margin: 0.5rem（外边距）
        px-6  → padding-left/right: 1.5rem（水平内边距）
        py-3  → padding-top/bottom: 0.75rem（垂直内边距）
        mt-8  → margin-top: 2rem（上外边距）
        mb-4  → margin-bottom: 1rem（下外边距）
    -->
</div>

<!-- 宽高 -->
<div class="w-full h-screen max-w-lg min-h-[200px]">
    <!--
        w-full      → width: 100%
        h-screen    → height: 100vh（屏幕高度）
        max-w-lg    → max-width: 32rem（最大宽度）
        min-h-[200px] → min-height: 200px（任意值用方括号）
    -->
</div>

<h1 class="text-3xl font-bold text-gray-900 leading-tight tracking-wide">
    <!--
        text-3xl      → font-size: 1.875rem（字号）
        font-bold     → font-weight: 700（加粗）
        text-gray-900 → color: 深灰色（文字颜色）
        leading-tight → line-height: 1.25（行高紧凑）
        tracking-wide → letter-spacing: 0.025em（字间距宽）
    -->
    标题文字
</h1>

<p class="text-sm text-gray-600 truncate">
    <!--
        text-sm    → font-size: 0.875rem（小号字）
        truncate   → 单行溢出显示省略号 ...
    -->
    很长很长的文字会被截断...
</p>

<div class="bg-blue-500 text-white border border-gray-300 rounded-lg shadow-md">
    <!--
        bg-blue-500    → 蓝色背景（500 是中间色阶，100最浅 900最深）
        text-white     → 白色文字
        border         → 1px 边框
        border-gray-300 → 灰色边框
        rounded-lg     → border-radius: 0.5rem（圆角）
        shadow-md      → 中等阴影
    -->
</div>

<!-- 渐变背景 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8">
    <!--
        bg-gradient-to-r → 从左到右渐变
        from-blue-500    → 起始色蓝色
        to-purple-600    → 终止色紫色
    -->
    渐变背景
</div>

<!-- 移动优先：默认样式 → sm → md → lg → xl → 2xl -->
<div class="
    grid grid-cols-1          
    sm:grid-cols-2            
    md:grid-cols-3            
    lg:grid-cols-4            
">
    <!--
        默认（<640px）     → 1列（手机）
        sm:（≥640px）      → 2列（大手机/小平板）
        md:（≥768px）      → 3列（平板）
        lg:（≥1024px）     → 4列（电脑）
    -->
    <div class="p-4">卡片1</div>
    <div class="p-4">卡片2</div>
    <div class="p-4">卡片3</div>
    <div class="p-4">卡片4</div>
</div>

<!-- 隐藏/显示 -->
<nav class="hidden md:flex">
    <!-- 手机隐藏，平板以上显示 -->
</nav>
<button class="md:hidden">
    <!-- 平板以上隐藏（汉堡菜单按钮） -->
    ☰ 菜单
</button>

<!-- 悬停、焦点、激活 -->
<button class="
    bg-blue-500 text-white px-6 py-2 rounded
    hover:bg-blue-600
    focus:ring-2 focus:ring-blue-300
    active:bg-blue-700
    disabled:opacity-50 disabled:cursor-not-allowed
    transition duration-200
">
    <!--
        hover:bg-blue-600   → 悬停时变深蓝
        focus:ring-2        → 聚焦时显示蓝色光环
        active:bg-blue-700  → 按下时更深蓝
        disabled:opacity-50 → 禁用时半透明
        transition          → 添加过渡动画
        duration-200        → 200ms 过渡时间
    -->
    按钮
</button>

<!-- 暗色模式 -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
    <!--
        dark: 前缀 → 暗色模式下的样式
        自动跟随系统设置（或手动控制 class="dark"）
    -->
    支持暗色模式的内容
</div>

<!-- 组合状态 -->
<div class="group">
    <!-- group 配合 group-hover 实现父元素悬停时改变子元素 -->
    <h2 class="group-hover:text-blue-500">标题</h2>
    <p class="group-hover:underline">悬停卡片时，标题和文字都变化</p>
</div>

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
    <img src="/photo.jpg" alt="照片" class="w-full h-48 object-cover" />
    <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-900 mb-2">卡片标题</h2>
        <p class="text-gray-600 text-sm mb-4">卡片描述文字，简要介绍内容。</p>
        <button class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition">
            查看详情
        </button>
    </div>
</div>

<nav class="bg-white shadow-sm border-b">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16 items-center">
            <a href="/" class="text-xl font-bold text-gray-900">Logo</a>
            <div class="hidden md:flex space-x-8">
                <a href="/" class="text-gray-600 hover:text-gray-900">首页</a>
                <a href="/about" class="text-gray-600 hover:text-gray-900">关于</a>
                <a href="/contact" class="text-gray-600 hover:text-gray-900">联系</a>
            </div>
        </div>
    </div>
</nav>