TailwindCSS【实用教程】
官网 https://tailwindcss.com/docs/installation/using-vite
Tailwind CSS 是一个实用优先的 CSS 框架
特色
- 原子化样式类名
- 可深度定制主题
- 插件丰富
安装+配置+导入
vite 中
pnpm add tailwindcss @tailwindcss/vite或
npm i tailwindcss @tailwindcss/vitevite.config.ts 中配置
importtailwindcssfrom'@tailwindcss/vite'plugins:[tailwindcss(),],全局 css 文件中导入
@import"tailwindcss";Nuxt.js 中
https://nuxt.com/modules/tailwindcss
npx nuxi@latest module add tailwindcss安装 vscode 插件
Tailwind CSS IntelliSense【重要】单位的规则
TailwindCSS 中的数字是一个索引值，其对应的单位并不是 px，计算规则如下：
实际间距 = 数字 × 0.25rem浏览器默认字体大小是 16px（1rem=16px），则
实际px值 = 数字 × 4px如 p-4 的含义是 padding:16px
常用样式类
定位
| Tailwind 类 | 原生 CSS | 说明 |
|---|---|---|
static | position: static | 默认文档流，默认值 |
relative | position: relative | 相对定位，不脱离文档流，以自身的文档流位置为标准偏移，原文档流位置保留，会覆盖邻近元素（相对定位的元素在上面） |
absolute | position: absolute | 绝对定位，脱离文档流，以最近的已定位父级元素「relative/absolute/fixed」为标准偏移，原文档流位置不保留 |
fixed | position: fixed | 固定定位，相对于浏览器视口，固定不动 |
sticky | position: sticky | 粘性定位，滚动到阈值变固定（吸顶/吸底） |
top-*上边距bottom-*下边距left-*左边距right-*右边距
inset 用法
inset-4 → top/right/bottom/left 全都 16px inset-x-4 → left + right inset-y-4 → top + bottomTailwind 默认：1单位 = 0.25rem = 4px
inset-0= 0pxinset-2= 8pxinset-4= 16px
层级控制 z-index
定位元素重叠时，用z-*控制层级
z-0、z-10、z-20、z-30、z-50、z-auto实战案例【绝对定位居中】（任意元素）
<divclass="relative w-80 h-80 border"><divclass="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">任意元素完美居中</div></div>实战案例【铺满居中】
<divclass="absolute inset-0 flex items-center justify-center">全屏居中</div>常用速记
- 子绝父相：
父 relative+子 absolute - 盒子全覆盖：
absolute inset-0 - 四周留白：
absolute inset-4 - 悬浮按钮：
fixed bottom-4 right-4 - 导航吸顶：
sticky top-0 z-10 - 元素居中：
top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
flex 布局
- flex：将元素设置为 flex 布局。
- flex - [direction]：设置 flex 子项的排列方向，如flex - row（水平排列）、flex - col（垂直排列）。
- justify - [content]：设置 flex 子项的水平对齐方式，如justify - center（水平居中）。
- items - [align]：设置 flex 子项的垂直对齐方式，如items - center（垂直居中）。
flex-1
用于自适应撑满剩余空间
flex:1 1 0%;- 1（flex-grow）：可以增长，占多余空间
- 1（flex-shrink）：可以缩小，适应容器空间变化
- 0%（flex-basis）：初始宽度为 0，不预留空间！
实战案例：“左边自适应 + 右边定宽”的布局
<divclass="flex"><divclass="flex-1 bg-blue-500">左边自适应</div><divclass="bg-red-500 w-40">右边定宽</div></div>flex-none
用于保持固定宽度，不被挤压
flex:0 0 auto;- flex-grow: 0 → 不参与增长
- flex-shrink: 0 → 不参与缩小
- flex-basis: auto → 宽度由内容或 w-xx 决定
grid 布局
- grid：将元素设置为 grid 布局。
- grid - cols - [number]：设置网格列数，如grid - cols - 3（三列网格）。
文本
- text - [size]：设置文本大小，如text - xl（1.25rem）。
- text - [color]：设置文本颜色，如text - blue - 500。
- font - [weight]：设置字体粗细，如font - bold。
- italic：设置字体为斜体。
背景与边框
- bg - [color]：设置背景颜色，如bg - gray - 100。
- border - [width]：设置边框宽度，如border - 2。
- border - [color]：设置边框颜色，如border - red - 400。
圆角
- rounded - [size]：设置边框圆角
- rounded-sm - 小圆角 (0.125rem)
- rounded - 同 rounded-md
- rounded-lg - 大圆角 (0.5rem)
- rounded-xl - 特大圆角 (0.75rem)
- rounded-full - 完全圆形
响应式
TailwindCSS 的策略是小屏优先
- sm：小屏幕（宽度≥640px）。
- md：中等屏幕（宽度≥768px）。
- lg：大屏幕（宽度≥1024px）。
- xl：特大屏幕（宽度≥1280px）。
<divclass="w - full sm:w - 1/2 md:w - 1/3 lg:w - 1/4 xl:w - 1/5">这个元素的宽度会根据屏幕大小变化。</div>交互
- hover:：悬停状态。
- focus:：聚焦状态。
- active:：激活状态。
<buttonclass="bg - blue - 500 text - white p - 2 rounded hover:bg - blue - 600 focus:outline - none focus:ring - 2 focus:ring - blue - 400">悬停和聚焦有不同效果的按钮</button>特殊工具类
peer 兄弟元素状态关联
peer本身不产生任何视觉效果，它的作用是标记一个元素，让其他兄弟元素可以通过peer-*前缀类来响应它的状态变化。
工作原理：
<!-- 第一步：用 peer 标记触发器 --><inputclassName="peer"/><!-- 第二步：用 peer-* 类响应触发器状态 --><labelclassName="peer-focus:text-blue-500">标签文字</label>常用的peer-*状态类：
| 类名 | 触发条件 |
|---|---|
peer-focus: | 当 peer 元素获得焦点时 |
peer-hover: | 当鼠标悬停在 peer 元素上时 |
peer-active: | 当 peer 元素被激活时（点击中） |
peer-disabled: | 当 peer 元素被禁用时 |
peer-checked: | 当 peer 元素（如 checkbox）被选中时 |
实战范例
按钮
<buttonclassName="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 cursor-pointer">点击按钮</button>鼠标悬停时，背景色加深，用 transition-colors 实现性能最佳的过渡效果
focus:outline-none- 移除浏览器默认的焦点轮廓
- 避免默认轮廓与自定义焦点样式冲突
focus:ring-2- 添加 2px 宽的环形效果
- 提供清晰的视觉焦点指示
focus:ring-blue-400- 设置环形的颜色为蓝色 400
- 与按钮的蓝色主题保持一致
focus:ring-opacity-50- 设置环形的透明度为 50%
- 使焦点效果更加柔和自然
商品
react 版
<divclassName="flex flex-col h-full">{/* 图片部分：固定高度，保持原始比例 */}<imgclassName="w-full h-48 object-cover flex-none"src="https://img0.baidu.com/it/u=2236720789,2725222071&fm=253&fmt=auto&app=138&f=JPEG?w=1220&h=500"alt="商品图片"/>{/* 内容区：自适应高度，占据剩余空间 */}<divclassName="flex-1 p-4"><h3className="text-lg font-bold mb-2">商品标题</h3><pclassName="text-gray-600 mb-4">商品描述...</p>{/* 底部栏：价格与按钮行水平排列 */}<divclassName="flex items-center justify-between"><spanclassName="text-2xl text-red-500">¥299</span><buttonclassName="px-4 py-2 bg-blue-600 text-white rounded">立即购买</button></div></div></div>