> ## Content Index > Fetch the complete content index at: https://blog.vercanti.com/llms.txt > Use this file to discover other available public pages before exploring further. # TailwindCSS 完全指南 - URL: https://blog.vercanti.com/tailwindcss-wan-quan-zhi-nan/ - Published: 2026-08-28T14:35:19.000Z - Updated: 2026-08-28T14:58:33.000Z - Description: 相关文档：HTML与CSS入门(/html-yu-css-ru-men/) Vue3入门(/vue-3-ru-men-zhi-nan/) 1. Tailwind 是什么(#tailwind-%E6%98%AF%E4%BB%80%E4%B9%88) 2. 安装与配置(#%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE) 3. 核心工具类速查表(#%E6%A0%B8%E5%BF%83%E5%B7%A5%E5%85%B7%E7%B1%BB%E9%80%9F%E6%9F%A5%E8%A1%A8) 4. 自定义配置(#%E - Author: yellowdog - Tags: 前端开发 > 官方文档： > 适用版本：Tailwind CSS 4.x（2026-05-07 核实） 相关文档：[HTML与CSS入门](https://blog.vercanti.com/html-yu-css-ru-men/) [Vue3入门](https://blog.vercanti.com/vue-3-ru-men-zhi-nan/) --- ## 目录 1. [Tailwind 是什么](#tailwind-%E6%98%AF%E4%BB%80%E4%B9%88) 2. [安装与配置](#%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE) 3. [核心工具类速查表](#%E6%A0%B8%E5%BF%83%E5%B7%A5%E5%85%B7%E7%B1%BB%E9%80%9F%E6%9F%A5%E8%A1%A8) 4. [自定义配置](#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%85%8D%E7%BD%AE) 5. [最佳实践](#%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5) 6. [100 个常用工具类速查表](#100-%E4%B8%AA%E5%B8%B8%E7%94%A8%E5%B7%A5%E5%85%B7%E7%B1%BB%E9%80%9F%E6%9F%A5%E8%A1%A8) 7. [综合实战示例](#%E7%BB%BC%E5%90%88%E5%AE%9E%E6%88%98%E7%A4%BA%E4%BE%8B) --- ## Tailwind 是什么 ### 工具类优先（Utility-First）理念 Tailwind CSS 是一个工具类优先（Utility-First）的 CSS 框架。它不提供预先设计好的组件（如 Bootstrap 的 `.btn`、`.card`），而是提供大量低层级的工具类，每个工具类只做一件事。 ```html
...
...
...
``` ### 与传统 CSS / Bootstrap 的对比 | 维度 | 传统 CSS | Bootstrap | Tailwind CSS | | ---- | ----------------------- | --------- | --------------- | | 写法 | 自定义类名 + CSS 文件 | 预设组件类名 | 工具类直接写在 HTML | | 定制性 | 完全自由 | 需覆盖变量或重写 | 通过配置文件扩展 | | 包体积 | 手写多少就多少 | 引入全部组件样式 | PurgeCSS 按需打包 | | 学习曲线 | 需要懂 CSS | 记住组件名 | 需要记住工具类名 | | 一致性 | 依赖开发者自律 | 组件一致 | 设计系统约束一致 | | 响应式 | 手写 media query | 内置断点类 | 前缀断点类（sm/md/lg） | | 暗色模式 | 手写 prefers-color-scheme | 需额外插件 | dark: 变体内置支持 | 核心优势： - 不需要在 HTML 和 CSS 文件之间来回切换 - 不需要绞尽脑汁起类名 - CSS 文件大小不随项目增长而无限膨胀（工具类是复用的） - 设计约束来自配置文件，全局一致 --- ## 安装与配置 ### 方式一：CDN（仅用于开发调试） ```html

Hello Tailwind

``` 注意：CDN 方式会加载完整的 Tailwind CSS（约 4MB），不适合生产环境。 ### 方式二：Vite 项目集成（推荐） ```bash # 创建 Vite 项目（以 Vue3 为例） npm create vite@latest my-project -- --template vue cd my-project # 安装 Tailwind CSS 及依赖 npm install -D tailwindcss postcss autoprefixer # 生成配置文件 npx tailwindcss init -p ``` 生成的 `postcss.config.js`： ```js // postcss.config.js export default { plugins: { tailwindcss: {}, // 处理 Tailwind 指令 autoprefixer: {}, // 自动添加浏览器前缀 }, } ``` 在 `tailwind.config.js` 中配置内容扫描路径： ```js // tailwind.config.js /** @type {import('tailwindcss').Config} */ export default { // content：告诉 Tailwind 扫描哪些文件，提取使用到的工具类 content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } ``` 在主 CSS 文件中引入 Tailwind 指令： ```css /* src/style.css 或 src/assets/main.css */ /* 引入 Tailwind 的基础样式（reset + 基础排版） */ @tailwind base; /* 引入所有工具类 */ @tailwind components; /* 引入所有工具类 */ @tailwind utilities; ``` 在 `main.js` 中引入 CSS： ```js // src/main.js import { createApp } from 'vue' import App from './App.vue' import './style.css' // 引入包含 Tailwind 指令的 CSS 文件 createApp(App).mount('#app') ``` ### 方式三：PostCSS 配置（非 Vite 项目） ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init ``` 在构建工具（Webpack/Rollup 等）的 PostCSS 配置中添加 Tailwind 插件，与方式二类似。 ### tailwind.config.js 完整结构说明 ```js // tailwind.config.js /** @type {import('tailwindcss').Config} */ export default { // content：文件扫描路径，Tailwind 会从这些文件中提取用到的类名 // 生产构建时会删除未使用的工具类 content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx,html}", ], // darkMode：暗色模式策略 // 'media' → 跟随系统 prefers-color-scheme（默认） // 'class' → 手动在 上添加 .dark 类来切换 darkMode: 'class', theme: { // theme 直接赋值会覆盖默认主题（谨慎使用） // fontFamily: { sans: ['Arial', 'sans-serif'] } // 完全替换字体 // extend 在默认主题基础上追加，推荐使用 extend: { colors: { brand: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a', }, }, fontFamily: { custom: ['"Microsoft YaHei"', 'sans-serif'], }, spacing: { '18': '4.5rem', // 追加 m-18, p-18 等工具类 '72': '18rem', }, borderRadius: { '4xl': '2rem', }, screens: { 'xs': '475px', // 追加 xs: 断点 }, }, }, // plugins：引入第三方插件 plugins: [ // require('@tailwindcss/forms'), // 表单样式重置 // require('@tailwindcss/typography'), // 文章排版（prose 类） // require('@tailwindcss/aspect-ratio'), ], } ``` --- ## 核心工具类速查表 ### 布局 #### Container | 类名 | 说明 | | --------- | ----------------------------------- | | container | 设置 max-width 并自动响应断点，需配合 mx-auto 居中 | ```html
``` #### Box Sizing | 类名 | CSS 等价 | | ----------- | ----------------------- | | box-border | box-sizing: border-box | | box-content | box-sizing: content-box | #### Display | 类名 | CSS 等价 | | ------------ | --------------------- | | block | display: block | | inline | display: inline | | inline-block | display: inline-block | | flex | display: flex | | inline-flex | display: inline-flex | | grid | display: grid | | inline-grid | display: inline-grid | | hidden | display: none | | table | display: table | | table-cell | display: table-cell | | contents | display: contents | #### Overflow | 类名 | CSS 等价 | | ----------------- | ----------------------------------------------------------- | | overflow-auto | overflow: auto | | overflow-hidden | overflow: hidden | | overflow-visible | overflow: visible | | overflow-scroll | overflow: scroll | | overflow-x-auto | overflow-x: auto | | overflow-y-auto | overflow-y: auto | | overflow-x-hidden | overflow-x: hidden | | truncate | 单行文字截断（overflow-hidden + text-ellipsis + whitespace-nowrap） | #### Position | 类名 | CSS 等价 | | -------- | ------------------ | | static | position: static | | relative | position: relative | | absolute | position: absolute | | fixed | position: fixed | | sticky | position: sticky | 定位偏移（与 position 配合使用）： | 类名 | CSS 等价 | | --------- | ---------------------------------- | | top-0 | top: 0 | | top-4 | top: 1rem | | right-0 | right: 0 | | bottom-0 | bottom: 0 | | left-0 | left: 0 | | inset-0 | top/right/bottom/left: 0（常用于覆盖层） | | inset-x-0 | left: 0; right: 0 | | inset-y-0 | top: 0; bottom: 0 | | top-1/2 | top: 50%（配合 -translate-y-1/2 垂直居中） | #### Z-Index | 类名 | CSS 等价 | | ------ | ------------- | | z-0 | z-index: 0 | | z-10 | z-index: 10 | | z-20 | z-index: 20 | | z-30 | z-index: 30 | | z-40 | z-index: 40 | | z-50 | z-index: 50 | | z-auto | z-index: auto | | \-z-10 | z-index: -10 | --- ### Flexbox ```html
左侧内容
右侧内容
``` #### flex-direction（主轴方向） | 类名 | CSS 等价 | | ---------------- | ------------------------------ | | flex-row | flex-direction: row（默认，水平从左到右） | | flex-row-reverse | flex-direction: row-reverse | | flex-col | flex-direction: column（垂直从上到下） | | flex-col-reverse | flex-direction: column-reverse | #### justify-content（主轴对齐） | 类名 | CSS 等价 | | --------------- | ------------------------------ | | justify-start | justify-content: flex-start | | justify-end | justify-content: flex-end | | justify-center | justify-content: center | | justify-between | justify-content: space-between | | justify-around | justify-content: space-around | | justify-evenly | justify-content: space-evenly | #### align-items（交叉轴对齐） | 类名 | CSS 等价 | | -------------- | ----------------------- | | items-start | align-items: flex-start | | items-end | align-items: flex-end | | items-center | align-items: center | | items-baseline | align-items: baseline | | items-stretch | align-items: stretch | #### align-self（单个子项交叉轴对齐） | 类名 | CSS 等价 | | ------------ | ---------------------- | | self-auto | align-self: auto | | self-start | align-self: flex-start | | self-end | align-self: flex-end | | self-center | align-self: center | | self-stretch | align-self: stretch | #### flex-wrap | 类名 | CSS 等价 | | ----------------- | ----------------------- | | flex-nowrap | flex-wrap: nowrap（默认） | | flex-wrap | flex-wrap: wrap | | flex-wrap-reverse | flex-wrap: wrap-reverse | #### gap（间距） | 类名 | CSS 等价 | | ------- | ---------------- | | gap-0 | gap: 0 | | gap-1 | gap: 0.25rem | | gap-2 | gap: 0.5rem | | gap-4 | gap: 1rem | | gap-6 | gap: 1.5rem | | gap-8 | gap: 2rem | | gap-x-4 | column-gap: 1rem | | gap-y-4 | row-gap: 1rem | #### flex-grow / flex-shrink | 类名 | CSS 等价 | | --------- | ----------------------------- | | flex-1 | flex: 1 1 0%（等比分配剩余空间） | | flex-auto | flex: 1 1 auto | | flex-none | flex: none（不参与弹性计算） | | grow | flex-grow: 1 | | grow-0 | flex-grow: 0 | | shrink | flex-shrink: 1 | | shrink-0 | flex-shrink: 0（不压缩，常用于固定宽度元素） | #### order（排列顺序） | 类名 | CSS 等价 | | ------------------- | --------------------- | | order-first | order: -9999 | | order-last | order: 9999 | | order-none | order: 0 | | order-1 \~ order-12 | order: 1 \~ order: 12 | --- ### Grid ```html
列1
列2
列3
``` #### grid-cols（列数） | 类名 | CSS 等价 | | -------------- | ------------------------------------------------- | | grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)) | | grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)) | | grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)) | | grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)) | | grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)) | | grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)) | | grid-cols-none | grid-template-columns: none | #### col-span（列跨越） | 类名 | CSS 等价 | | ------------- | ---------------------------- | | col-span-1 | grid-column: span 1 / span 1 | | col-span-2 | grid-column: span 2 / span 2 | | col-span-3 | grid-column: span 3 / span 3 | | col-span-full | grid-column: 1 / -1（跨越所有列） | | col-start-1 | grid-column-start: 1 | | col-end-4 | grid-column-end: 4 | #### grid-rows（行数） | 类名 | CSS 等价 | | ----------- | --------------------------------------------- | | grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)) | | grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)) | | grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)) | #### row-span（行跨越） | 类名 | CSS 等价 | | ------------- | ------------------------- | | row-span-1 | grid-row: span 1 / span 1 | | row-span-2 | grid-row: span 2 / span 2 | | row-span-full | grid-row: 1 / -1 | --- ### Spacing（间距） #### 间距尺寸表 | 比例值 N | rem 值 | px 值（16px 基准） | | ----- | -------- | ------------- | | 0 | 0 | 0 | | 0.5 | 0.125rem | 2px | | 1 | 0.25rem | 4px | | 1.5 | 0.375rem | 6px | | 2 | 0.5rem | 8px | | 2.5 | 0.625rem | 10px | | 3 | 0.75rem | 12px | | 3.5 | 0.875rem | 14px | | 4 | 1rem | 16px | | 5 | 1.25rem | 20px | | 6 | 1.5rem | 24px | | 7 | 1.75rem | 28px | | 8 | 2rem | 32px | | 9 | 2.25rem | 36px | | 10 | 2.5rem | 40px | | 11 | 2.75rem | 44px | | 12 | 3rem | 48px | | 14 | 3.5rem | 56px | | 16 | 4rem | 64px | | 20 | 5rem | 80px | | 24 | 6rem | 96px | | 28 | 7rem | 112px | | 32 | 8rem | 128px | | 36 | 9rem | 144px | | 40 | 10rem | 160px | | 44 | 11rem | 176px | | 48 | 12rem | 192px | | 52 | 13rem | 208px | | 56 | 14rem | 224px | | 60 | 15rem | 240px | | 64 | 16rem | 256px | | 72 | 18rem | 288px | | 80 | 20rem | 320px | | 96 | 24rem | 384px | #### Margin 工具类 | 类名 | 说明 | | ------- | ----------------------------- | | m-{N} | 四边 margin | | mx-{N} | 水平方向 margin（left + right） | | my-{N} | 垂直方向 margin（top + bottom） | | mt-{N} | margin-top | | mb-{N} | margin-bottom | | ml-{N} | margin-left | | mr-{N} | margin-right | | ms-{N} | margin-inline-start（支持 RTL） | | me-{N} | margin-inline-end（支持 RTL） | | mx-auto | 水平居中（margin-left/right: auto） | | \-m-{N} | 负 margin（如 -m-4） | #### Padding 工具类 | 类名 | 说明 | | ------ | -------------------------- | | p-{N} | 四边 padding | | px-{N} | 水平方向 padding（left + right） | | py-{N} | 垂直方向 padding（top + bottom） | | pt-{N} | padding-top | | pb-{N} | padding-bottom | | pl-{N} | padding-left | | pr-{N} | padding-right | --- ### Sizing（尺寸） #### Width | 类名 | CSS 等价 | | -------- | ----------------------------- | | w-0 | width: 0 | | w-{N} | width: {N 对应的 rem 值} | | w-auto | width: auto | | w-full | width: 100% | | w-screen | width: 100vw | | w-svw | width: 100svw（small viewport） | | w-fit | width: fit-content | | w-min | width: min-content | | w-max | width: max-content | | w-1/2 | width: 50% | | w-1/3 | width: 33.333% | | w-2/3 | width: 66.667% | | w-1/4 | width: 25% | | w-3/4 | width: 75% | #### Max-Width / Min-Width | 类名 | CSS 等价 | | --------------- | ------------------------ | | max-w-xs | max-width: 20rem（320px） | | max-w-sm | max-width: 24rem（384px） | | max-w-md | max-width: 28rem（448px） | | max-w-lg | max-width: 32rem（512px） | | max-w-xl | max-width: 36rem（576px） | | max-w-2xl | max-width: 42rem（672px） | | max-w-3xl | max-width: 48rem（768px） | | max-w-4xl | max-width: 56rem（896px） | | max-w-5xl | max-width: 64rem（1024px） | | max-w-6xl | max-width: 72rem（1152px） | | max-w-7xl | max-width: 80rem（1280px） | | max-w-full | max-width: 100% | | max-w-screen-sm | max-width: 640px | | max-w-screen-lg | max-width: 1024px | | min-w-0 | min-width: 0 | | min-w-full | min-width: 100% | #### Height | 类名 | CSS 等价 | | ------------ | -------------------------- | | h-{N} | height: {N 对应的 rem 值} | | h-auto | height: auto | | h-full | height: 100% | | h-screen | height: 100vh | | h-svh | height: 100svh | | h-dvh | height: 100dvh（动态视口，推荐移动端） | | h-fit | height: fit-content | | h-min | height: min-content | | h-max | height: max-content | | min-h-0 | min-height: 0 | | min-h-full | min-height: 100% | | min-h-screen | min-height: 100vh | | max-h-full | max-height: 100% | | max-h-screen | max-height: 100vh | --- ### Typography（排版） #### Font Size | 类名 | font-size | line-height | | --------- | --------------- | ----------- | | text-xs | 0.75rem (12px) | 1rem | | text-sm | 0.875rem (14px) | 1.25rem | | text-base | 1rem (16px) | 1.5rem | | text-lg | 1.125rem (18px) | 1.75rem | | text-xl | 1.25rem (20px) | 1.75rem | | text-2xl | 1.5rem (24px) | 2rem | | text-3xl | 1.875rem (30px) | 2.25rem | | text-4xl | 2.25rem (36px) | 2.5rem | | text-5xl | 3rem (48px) | 1 | | text-6xl | 3.75rem (60px) | 1 | | text-7xl | 4.5rem (72px) | 1 | | text-8xl | 6rem (96px) | 1 | | text-9xl | 8rem (128px) | 1 | #### Font Weight | 类名 | font-weight | | --------------- | ----------- | | font-thin | 100 | | font-extralight | 200 | | font-light | 300 | | font-normal | 400 | | font-medium | 500 | | font-semibold | 600 | | font-bold | 700 | | font-extrabold | 800 | | font-black | 900 | #### Font Family | 类名 | CSS 等价 | | ---------- | ----------------- | | font-sans | 系统 sans-serif 字体栈 | | font-serif | 系统 serif 字体栈 | | font-mono | 系统等宽字体栈 | #### Text Align | 类名 | CSS 等价 | | ------------ | ------------------- | | text-left | text-align: left | | text-center | text-align: center | | text-right | text-align: right | | text-justify | text-align: justify | #### Text Color 颜色格式：`text-{color}-{shade}`，shade 范围 50/100/200/300/400/500/600/700/800/900/950 ```html

灰色文字

蓝色文字

红色文字

深绿文字

白色文字

黑色文字

透明文字

``` 内置颜色：slate / gray / zinc / neutral / stone / red / orange / amber / yellow / lime / green / emerald / teal / cyan / sky / blue / indigo / violet / purple / fuchsia / pink / rose #### Line Height（leading） | 类名 | line-height | | --------------- | ----------- | | leading-none | 1 | | leading-tight | 1.25 | | leading-snug | 1.375 | | leading-normal | 1.5 | | leading-relaxed | 1.625 | | leading-loose | 2 | | leading-3 | 0.75rem | | leading-4 | 1rem | | leading-5 | 1.25rem | #### Letter Spacing（tracking） | 类名 | letter-spacing | | ---------------- | -------------- | | tracking-tighter | \-0.05em | | tracking-tight | \-0.025em | | tracking-normal | 0em | | tracking-wide | 0.025em | | tracking-wider | 0.05em | | tracking-widest | 0.1em | #### Text Decoration | 类名 | CSS 等价 | | ------------ | ----------------------------- | | underline | text-decoration: underline | | overline | text-decoration: overline | | line-through | text-decoration: line-through | | no-underline | text-decoration: none | #### Text Transform | 类名 | CSS 等价 | | ----------- | -------------------------- | | uppercase | text-transform: uppercase | | lowercase | text-transform: lowercase | | capitalize | text-transform: capitalize | | normal-case | text-transform: none | #### Whitespace & Word Break | 类名 | CSS 等价 | | ------------------- | ------------------------- | | whitespace-normal | white-space: normal | | whitespace-nowrap | white-space: nowrap | | whitespace-pre | white-space: pre | | whitespace-pre-wrap | white-space: pre-wrap | | break-normal | overflow-wrap: normal | | break-words | overflow-wrap: break-word | | break-all | word-break: break-all | --- ### Background（背景） #### Background Color ```html
蓝色背景
浅灰背景
白色背景
透明背景
``` 格式：`bg-{color}-{shade}`，与文字颜色体系一致。 #### Background Opacity（Tailwind v3 用法） ```html
50% 透明度的蓝色背景
30% 透明度的黑色（常用于遮罩层）
``` #### Background Gradient ```html
渐变背景
三色渐变
对角渐变
``` 渐变方向：`to-t`（上）/ `to-tr`（右上）/ `to-r`（右）/ `to-br`（右下）/ `to-b`（下）/ `to-bl`（左下）/ `to-l`（左）/ `to-tl`（左上） #### Background Size / Position | 类名 | CSS 等价 | | ------------ | ---------------------------- | | bg-auto | background-size: auto | | bg-cover | background-size: cover | | bg-contain | background-size: contain | | bg-center | background-position: center | | bg-top | background-position: top | | bg-bottom | background-position: bottom | | bg-left | background-position: left | | bg-right | background-position: right | | bg-no-repeat | background-repeat: no-repeat | --- ### Border（边框） #### Border Width | 类名 | CSS 等价 | | -------- | ------------------------ | | border | border-width: 1px | | border-0 | border-width: 0 | | border-2 | border-width: 2px | | border-4 | border-width: 4px | | border-8 | border-width: 8px | | border-t | border-top-width: 1px | | border-b | border-bottom-width: 1px | | border-l | border-left-width: 1px | | border-r | border-right-width: 1px | | border-x | 左右各 1px | | border-y | 上下各 1px | #### Border Color ```html
灰色边框
蓝色边框
``` 格式：`border-{color}-{shade}` #### Border Style | 类名 | CSS 等价 | | ------------- | -------------------- | | border-solid | border-style: solid | | border-dashed | border-style: dashed | | border-dotted | border-style: dotted | | border-double | border-style: double | | border-none | border-style: none | #### Border Radius（圆角） | 类名 | CSS 等价 | | ------------- | ---------------------------- | | rounded-none | border-radius: 0 | | rounded-sm | border-radius: 0.125rem | | rounded | border-radius: 0.25rem | | rounded-md | border-radius: 0.375rem | | rounded-lg | border-radius: 0.5rem | | rounded-xl | border-radius: 0.75rem | | rounded-2xl | border-radius: 1rem | | rounded-3xl | border-radius: 1.5rem | | rounded-full | border-radius: 9999px（圆形/胶囊） | | rounded-t-lg | 上方两角 | | rounded-b-lg | 下方两角 | | rounded-l-lg | 左侧两角 | | rounded-r-lg | 右侧两角 | | rounded-tl-lg | 左上角 | | rounded-tr-lg | 右上角 | #### Outline | 类名 | CSS 等价 | | ---------------- | -------------------------------------- | | outline | outline-style: solid | | outline-none | outline: 2px solid transparent（消除默认轮廓） | | outline-dashed | outline-style: dashed | | outline-2 | outline-width: 2px | | outline-offset-2 | outline-offset: 2px | --- ### Effects（效果） #### Box Shadow | 类名 | 说明 | | ------------ | ---- | | shadow-sm | 细微阴影 | | shadow | 基础阴影 | | shadow-md | 中等阴影 | | shadow-lg | 较大阴影 | | shadow-xl | 大阴影 | | shadow-2xl | 超大阴影 | | shadow-inner | 内阴影 | | shadow-none | 无阴影 | #### Opacity | 类名 | CSS 等价 | | ----------- | ------------- | | opacity-0 | opacity: 0 | | opacity-5 | opacity: 0.05 | | opacity-10 | opacity: 0.1 | | opacity-25 | opacity: 0.25 | | opacity-50 | opacity: 0.5 | | opacity-75 | opacity: 0.75 | | opacity-90 | opacity: 0.9 | | opacity-100 | opacity: 1 | #### Ring（焦点轮廓，常用于交互反馈） | 类名 | 说明 | | ------------- | ----------------------- | | ring | 3px 蓝色轮廓（box-shadow 实现） | | ring-0 | 无轮廓 | | ring-1 | 1px 轮廓 | | ring-2 | 2px 轮廓 | | ring-4 | 4px 轮廓 | | ring-blue-500 | 蓝色轮廓 | | ring-offset-2 | 轮廓与元素间距 2px | --- ### Transitions & Animation（过渡与动画） #### Transition | 类名 | 说明 | | -------------------- | ------------------------------------------------------- | | transition | 过渡 color/background/border/opacity/box-shadow/transform | | transition-all | 过渡所有可动画属性 | | transition-colors | 仅过渡颜色相关属性 | | transition-opacity | 仅过渡透明度 | | transition-transform | 仅过渡变换 | | transition-none | 禁用过渡 | #### Duration（过渡时长） | 类名 | CSS 等价 | | ------------- | --------------------------- | | duration-75 | transition-duration: 75ms | | duration-100 | transition-duration: 100ms | | duration-150 | transition-duration: 150ms | | duration-200 | transition-duration: 200ms | | duration-300 | transition-duration: 300ms | | duration-500 | transition-duration: 500ms | | duration-700 | transition-duration: 700ms | | duration-1000 | transition-duration: 1000ms | #### Easing（缓动函数） | 类名 | CSS 等价 | | ----------- | -------------------------------------------------------- | | ease-linear | transition-timing-function: linear | | ease-in | transition-timing-function: cubic-bezier(0.4, 0, 1, 1) | | ease-out | transition-timing-function: cubic-bezier(0, 0, 0.2, 1) | | ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) | #### Transform（变换） | 类名 | CSS 等价 | | ----------------- | ----------------------------------- | | scale-0 | transform: scale(0) | | scale-50 | transform: scale(0.5) | | scale-100 | transform: scale(1) | | scale-105 | transform: scale(1.05) | | scale-110 | transform: scale(1.1) | | rotate-0 | transform: rotate(0deg) | | rotate-45 | transform: rotate(45deg) | | rotate-90 | transform: rotate(90deg) | | rotate-180 | transform: rotate(180deg) | | translate-x-4 | transform: translateX(1rem) | | translate-y-4 | transform: translateY(1rem) | | \-translate-y-1/2 | transform: translateY(-50%)（垂直居中常用） | | skew-x-6 | transform: skewX(6deg) | #### Animation（预设动画） | 类名 | 效果 | | -------------- | ------------- | | animate-spin | 持续旋转（常用于加载图标） | | animate-ping | 扩散消失（常用于通知红点） | | animate-pulse | 呼吸明暗（常用于骨架屏） | | animate-bounce | 上下弹跳 | | animate-none | 禁用动画 | ```html ...
``` --- ### Interactivity（交互） #### Cursor | 类名 | CSS 等价 | | ------------------ | ------------------- | | cursor-auto | cursor: auto | | cursor-default | cursor: default | | cursor-pointer | cursor: pointer（手型） | | cursor-wait | cursor: wait | | cursor-text | cursor: text | | cursor-move | cursor: move | | cursor-not-allowed | cursor: not-allowed | | cursor-grab | cursor: grab | | cursor-grabbing | cursor: grabbing | #### User Select | 类名 | CSS 等价 | | ----------- | ----------------- | | select-none | user-select: none | | select-text | user-select: text | | select-all | user-select: all | | select-auto | user-select: auto | #### Pointer Events | 类名 | CSS 等价 | | ------------------- | -------------------------- | | pointer-events-none | pointer-events: none（穿透点击） | | pointer-events-auto | pointer-events: auto | --- ### 响应式前缀（断点） Tailwind 采用移动端优先策略：不加前缀 = 所有屏幕，加前缀 = 该断点及以上。 #### 断点表格 | 前缀 | 最小宽度 | 对应设备参考 | | ---- | ------ | ------------- | | 无前缀 | 0px | 手机（移动端优先基础样式） | | sm: | 640px | 大屏手机 / 小平板 | | md: | 768px | 平板 | | lg: | 1024px | 笔记本 | | xl: | 1280px | 桌面显示器 | | 2xl: | 1536px | 大型显示器 | ```html
...
仅移动端可见

标题

``` --- ### 状态变体（State Variants） 格式：`{变体}:{工具类}`，可叠加多个变体。 #### 常用状态变体 | 变体 | 触发条件 | | -------------- | ------------------ | | hover: | 鼠标悬停 | | focus: | 元素获得焦点 | | focus-within: | 子元素获得焦点 | | focus-visible: | 键盘焦点（非鼠标） | | active: | 鼠标按下 | | visited: | 链接已访问 | | disabled: | 元素被禁用 | | checked: | checkbox/radio 被选中 | | placeholder: | input 的占位符 | | required: | 必填表单元素 | | invalid: | 验证失败的表单元素 | | valid: | 验证通过的表单元素 | | dark: | 暗色模式 | | print: | 打印时 | ```html
自适应明暗模式
``` #### Group 变体（父级悬停影响子级） ```html
图标区域
文字描述
``` #### Peer 变体（兄弟元素状态影响当前元素） ```html ``` --- ### 伪元素变体 | 变体 | 说明 | | -------------- | ------------ | | before: | ::before 伪元素 | | after: | ::after 伪元素 | | first: | 第一个子元素 | | last: | 最后一个子元素 | | odd: | 奇数子元素 | | even: | 偶数子元素 | | first-of-type: | 同类型第一个 | | last-of-type: | 同类型最后一个 | | only-child: | 唯一子元素 | | placeholder: | input 占位符样式 | | selection: | 用户选中的文字 | ```html
带前置装饰的元素
列表项
``` --- ## 自定义配置 ### 扩展主题（extend） ```js // tailwind.config.js export default { theme: { extend: { // 扩展颜色（追加，不替换默认颜色） colors: { brand: { light: '#60a5fa', DEFAULT: '#3b82f6', // 使用时写 text-brand（无需加 -DEFAULT） dark: '#1d4ed8', }, 'custom-gray': '#6b7280', }, // 扩展字体 fontFamily: { heading: ['"Noto Serif SC"', 'serif'], body: ['"Noto Sans SC"', 'sans-serif'], }, // 扩展间距（追加到默认间距尺寸中） spacing: { '13': '3.25rem', '15': '3.75rem', '128': '32rem', '144': '36rem', }, // 扩展断点 screens: { 'xs': '475px', '3xl': '1920px', }, // 扩展圆角 borderRadius: { '4xl': '2rem', '5xl': '2.5rem', }, // 扩展阴影 boxShadow: { 'card': '0 2px 8px rgba(0, 0, 0, 0.08)', 'popup': '0 10px 40px rgba(0, 0, 0, 0.16)', }, // 扩展 z-index zIndex: { '60': '60', '70': '70', '80': '80', '90': '90', '100': '100', }, // 扩展动画 animation: { 'fade-in': 'fadeIn 0.3s ease-in-out', 'slide-up': 'slideUp 0.3s ease-out', }, // 扩展 keyframes（配合 animation 使用） keyframes: { fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' }, }, slideUp: { '0%': { transform: 'translateY(10px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' }, }, }, }, }, } ``` ### @layer 指令 `@layer` 将自定义样式注入到 Tailwind 的层级中，确保正确的优先级顺序。 ```css /* src/style.css */ @tailwind base; @tailwind components; @tailwind utilities; /* @layer base：基础重置样式，优先级最低 */ @layer base { /* 全局字体设置 */ html { font-family: "Noto Sans SC", sans-serif; } /* 重置标题样式 */ h1, h2, h3, h4, h5, h6 { @apply font-bold leading-tight; } /* 重置链接样式 */ a { @apply text-blue-600 hover:text-blue-800 transition-colors; } } /* @layer components：组件级样式，可被工具类覆盖 */ @layer components { /* 使用 @apply 抽取重复的工具类组合 */ .btn { @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2; } .btn-primary { @apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500; } .btn-secondary { @apply btn bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-400; } .card { @apply bg-white rounded-xl shadow-md overflow-hidden; } .input { @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition; } } /* @layer utilities：自定义工具类，优先级最高 */ @layer utilities { /* 自定义工具类，可被响应式/状态变体修饰 */ .text-balance { text-wrap: balance; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } } ``` ### @apply 抽取可复用样式 ```css /* 将常用的工具类组合提取为语义化类名 */ @layer components { /* 导航栏链接 */ .nav-link { @apply text-gray-600 hover:text-blue-600 font-medium px-3 py-2 rounded-md transition-colors duration-150; } /* 标签/徽章 */ .badge { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; } .badge-blue { @apply badge bg-blue-100 text-blue-800; } .badge-green { @apply badge bg-green-100 text-green-800; } } ``` 注意事项： - `@apply` 会在构建时内联展开，不会生成额外的 CSS 类引用 - 避免用 `@apply` 复制大量工具类，应优先通过组件化解决复用问题 - `@apply` 只能在 CSS 文件中使用，不能在 `style` 属性中使用 ### Arbitrary Values（任意值） 当预设值不满足需求时，使用方括号语法输入任意值： ```html
固定 200px 宽度
计算宽度

自定义红色文字

自定义背景色

13px 字体

高层级定位
不等宽三列

1.8 倍行高

使用 CSS 变量
``` --- ## 最佳实践 ### 组件化：避免重复的工具类堆叠 ```vue /* @layer components { .btn-primary { @apply ... } } */ ``` ### 暗色模式 **class 策略（推荐，可手动切换）：** ```js // tailwind.config.js export default { darkMode: 'class', // 通过 .dark 类控制 // ... } ``` ```js // 切换暗色模式 function toggleDarkMode() { document.documentElement.classList.toggle('dark') // 持久化到 localStorage localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light' ) } // 初始化时读取用户偏好 const savedTheme = localStorage.getItem('theme') const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches if (savedTheme === 'dark' || (!savedTheme && prefersDark)) { document.documentElement.classList.add('dark') } ``` ```html
``` **media 策略（跟随系统，无法手动切换）：** ```js // tailwind.config.js export default { darkMode: 'media', // 跟随系统 prefers-color-scheme } ``` ### 响应式设计：移动端优先 ```html
主内容
``` ### 与 Vue3 结合的动态 class 绑定 ```vue ``` ### 生产环境：PurgeCSS / content 配置 Tailwind 通过扫描 `content` 配置的文件来确定哪些工具类被用到，未使用的类在生产构建时会被删除。 ```js // tailwind.config.js export default { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", // 如果有独立的工具函数生成类名，也要包含 "./src/utils/classNames.ts", ], } ``` 注意事项： - 不要在代码中动态拼接类名（Tailwind 通过字符串匹配扫描，动态拼接会被删除） - 动态类名必须完整写出： ```js // 错误：Tailwind 扫描不到 bg-blue-500、bg-red-500 const color = 'blue' const className = `bg-${color}-500` // 正确：完整的类名字符串 const classMap = { blue: 'bg-blue-500', red: 'bg-red-500', green: 'bg-green-500', } const className = classMap[color] ``` - 如果使用了第三方组件库，将其路径也加入 content 扫描 ### clsx 和 tailwind-merge 工具 ```bash npm install clsx tailwind-merge ``` ```ts // utils/cn.ts import { type ClassValue, clsx } from 'clsx' import { twMerge } from 'tailwind-merge' // cn 函数：合并类名，自动解决 Tailwind 类冲突 export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } ``` ```vue ``` clsx 解决条件类名的可读性问题，tailwind-merge 解决 Tailwind 类名冲突（如同时有 `px-2` 和 `px-4` 时自动保留后者）。 --- ## 100 个常用工具类速查表 ### 布局类 | 类名 | CSS 等价 | 用途 | | --------------- | ------------------------ | ------ | | container | max-width + 断点适配 | 内容区域容器 | | flex | display: flex | 弹性布局 | | grid | display: grid | 网格布局 | | hidden | display: none | 隐藏元素 | | block | display: block | 块级显示 | | inline-flex | display: inline-flex | 行内弹性布局 | | relative | position: relative | 相对定位 | | absolute | position: absolute | 绝对定位 | | fixed | position: fixed | 固定定位 | | sticky | position: sticky | 粘性定位 | | inset-0 | top/right/bottom/left: 0 | 覆盖父元素 | | overflow-hidden | overflow: hidden | 裁剪溢出内容 | | overflow-auto | overflow: auto | 按需滚动 | | z-10 | z-index: 10 | 层级 | | truncate | 单行溢出省略 | 文字截断 | ### Flexbox 类 | 类名 | CSS 等价 | 用途 | | --------------- | ------------------------------ | ------ | | flex-col | flex-direction: column | 垂直排列 | | flex-row | flex-direction: row | 水平排列 | | flex-wrap | flex-wrap: wrap | 允许换行 | | items-center | align-items: center | 交叉轴居中 | | items-start | align-items: flex-start | 交叉轴顶对齐 | | items-end | align-items: flex-end | 交叉轴底对齐 | | justify-center | justify-content: center | 主轴居中 | | justify-between | justify-content: space-between | 两端对齐 | | justify-end | justify-content: flex-end | 主轴末端 | | flex-1 | flex: 1 1 0% | 均分剩余空间 | | shrink-0 | flex-shrink: 0 | 禁止压缩 | | gap-4 | gap: 1rem | 子元素间距 | | gap-2 | gap: 0.5rem | 小间距 | | gap-6 | gap: 1.5rem | 中等间距 | | gap-8 | gap: 2rem | 大间距 | ### Grid 类 | 类名 | CSS 等价 | 用途 | | ------------- | --------------- | ----- | | grid-cols-2 | repeat(2, 1fr) | 两列网格 | | grid-cols-3 | repeat(3, 1fr) | 三列网格 | | grid-cols-4 | repeat(4, 1fr) | 四列网格 | | grid-cols-12 | repeat(12, 1fr) | 十二列栅格 | | col-span-2 | span 2 | 跨越两列 | | col-span-full | 1 / -1 | 跨越所有列 | ### Spacing 类 | 类名 | CSS 等价 | 用途 | | --------- | ------------------------ | ------------ | | p-4 | padding: 1rem | 四边内边距 | | px-4 | padding-left/right: 1rem | 水平内边距 | | py-4 | padding-top/bottom: 1rem | 垂直内边距 | | pt-4 | padding-top: 1rem | 上内边距 | | pb-4 | padding-bottom: 1rem | 下内边距 | | m-4 | margin: 1rem | 四边外边距 | | mx-auto | margin-left/right: auto | 水平居中 | | mt-4 | margin-top: 1rem | 上外边距 | | mb-4 | margin-bottom: 1rem | 下外边距 | | space-y-4 | 子元素垂直间距 1rem | 垂直间距（不含 gap） | ### Sizing 类 | 类名 | CSS 等价 | 用途 | | ------------ | ----------------- | -------- | | w-full | width: 100% | 全宽 | | w-auto | width: auto | 自动宽度 | | w-screen | width: 100vw | 视口宽度 | | h-full | height: 100% | 全高 | | h-screen | height: 100vh | 视口高度 | | min-h-screen | min-height: 100vh | 最小视口高度 | | max-w-7xl | max-width: 80rem | 最大宽度限制 | | max-w-lg | max-width: 32rem | 表单常用最大宽度 | ### Typography 类 | 类名 | CSS 等价 | 用途 | | --------------- | ------------------------- | ---- | | text-sm | font-size: 0.875rem | 小字体 | | text-base | font-size: 1rem | 正文字体 | | text-lg | font-size: 1.125rem | 略大字体 | | text-xl | font-size: 1.25rem | 副标题 | | text-2xl | font-size: 1.5rem | 标题 | | text-3xl | font-size: 1.875rem | 大标题 | | font-normal | font-weight: 400 | 正常字重 | | font-medium | font-weight: 500 | 中等字重 | | font-semibold | font-weight: 600 | 半粗 | | font-bold | font-weight: 700 | 粗体 | | text-center | text-align: center | 居中 | | text-left | text-align: left | 左对齐 | | leading-relaxed | line-height: 1.625 | 宽松行高 | | tracking-wide | letter-spacing: 0.025em | 宽字距 | | uppercase | text-transform: uppercase | 大写 | ### 颜色类 | 类名 | 用途 | | ------------- | ------------ | | text-gray-500 | 辅助文字 | | text-gray-900 | 主要文字 | | text-white | 白色文字（用于深色背景） | | text-blue-600 | 链接/主色文字 | | bg-white | 白色背景 | | bg-gray-50 | 浅灰背景 | | bg-gray-100 | 次级背景 | | bg-blue-600 | 主色背景 | ### Border 类 | 类名 | CSS 等价 | 用途 | | --------------- | ----------------------- | ----- | | border | border-width: 1px solid | 默认边框 | | border-gray-200 | 边框颜色 | 浅灰边框 | | border-gray-300 | 边框颜色 | 中灰边框 | | rounded | border-radius: 0.25rem | 小圆角 | | rounded-lg | border-radius: 0.5rem | 中圆角 | | rounded-xl | border-radius: 0.75rem | 大圆角 | | rounded-2xl | border-radius: 1rem | 更大圆角 | | rounded-full | border-radius: 9999px | 圆形 | | divide-y | 子元素间水平分割线 | 列表分割 | | divide-gray-200 | 分割线颜色 | 浅灰分割线 | ### Effects 类 | 类名 | CSS 等价 | 用途 | | ------------- | ------------ | ---- | | shadow | 基础阴影 | 卡片阴影 | | shadow-md | 中阴影 | 浮层阴影 | | shadow-lg | 大阴影 | 弹窗阴影 | | ring-2 | 2px 轮廓 | 焦点样式 | | ring-blue-500 | 蓝色轮廓 | 主色焦点 | | opacity-50 | opacity: 0.5 | 禁用态 | ### Transition 类 | 类名 | CSS 等价 | 用途 | | -------------------- | -------- | ---------- | | transition | 常用属性过渡 | 通用过渡 | | transition-colors | 颜色过渡 | hover 颜色变化 | | transition-transform | 变换过渡 | 缩放/移动动画 | | duration-200 | 200ms 时长 | 快速交互 | | duration-300 | 300ms 时长 | 标准过渡 | | ease-in-out | 缓入缓出 | 通用缓动 | | hover:scale-105 | 悬停放大 5% | 卡片悬停效果 | --- ## 综合实战示例 ### 响应式导航栏 ```html ``` ### 响应式卡片列表 ```html

精选内容

浏览我们精心筛选的内容，发现更多可能

技术
查看详情
2026-03-05 · 5 分钟阅读

Tailwind CSS 实战技巧：构建现代化 UI 组件

本文介绍如何使用 Tailwind CSS 工具类快速搭建响应式用户界面，包含常用模式和最佳实践。

A
作者名
``` ### Vue3 综合组件示例 ```vue ``` ```vue ``` --- ## 踩坑与注意事项 ### 动态类名必须完整书写 Tailwind 通过静态分析扫描文件中的完整类名字符串。任何动态拼接都会导致生产构建中类名被删除。 ```js // 错误：构建后 bg-blue-500 会消失 const color = 'blue' el.className = `bg-${color}-500` // 正确：完整写出所有可能的类名 const colorClasses = { blue: 'bg-blue-500', red: 'bg-red-500' } el.className = colorClasses[color] ``` ### 不要在 style 属性中使用 @apply `@apply` 只能在 CSS 文件（.css/.scss/.vue 的 `