官网 https://tailwindcss.com/docs/installation/using-viteTailwind CSS 是一个实用优先的 CSS 框架特色原子化样式类名可深度定制主题插件丰富安装配置导入vite 中pnpm add tailwindcss tailwindcss/vite或npm i tailwindcss tailwindcss/vitevite.config.ts 中配置importtailwindcssfromtailwindcss/viteplugins:[tailwindcss(),],全局 css 文件中导入importtailwindcss;Nuxt.js 中https://nuxt.com/modules/tailwindcssnpx nuxilatest module add tailwindcss安装 vscode 插件Tailwind CSS IntelliSense【重要】单位的规则TailwindCSS 中的数字是一个索引值其对应的单位并不是 px计算规则如下实际间距 数字 × 0.25rem浏览器默认字体大小是 16px1rem16px则实际px值 数字 × 4px如 p-4 的含义是 padding:16px常用样式类定位Tailwind 类原生 CSS说明staticposition: static默认文档流默认值relativeposition: relative相对定位不脱离文档流以自身的文档流位置为标准偏移原文档流位置保留会覆盖邻近元素相对定位的元素在上面absoluteposition: absolute绝对定位脱离文档流以最近的已定位父级元素「relative/absolute/fixed」为标准偏移原文档流位置不保留fixedposition: fixed固定定位相对于浏览器视口固定不动stickyposition: 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 4pxinset-0 0pxinset-2 8pxinset-4 16px层级控制 z-index定位元素重叠时用z-*控制层级z-0、z-10、z-20、z-30、z-50、z-auto实战案例【绝对定位居中】任意元素divclassrelative w-80 h-80 borderdivclassabsolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2任意元素完美居中/div/div实战案例【铺满居中】divclassabsolute 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/2flex 布局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%;1flex-grow可以增长占多余空间1flex-shrink可以缩小适应容器空间变化0%flex-basis初始宽度为 0不预留空间实战案例“左边自适应 右边定宽”的布局divclassflexdivclassflex-1 bg-blue-500左边自适应/divdivclassbg-red-500 w-40右边定宽/div/divflex-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 - xl1.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-mdrounded-lg - 大圆角 (0.5rem)rounded-xl - 特大圆角 (0.75rem)rounded-full - 完全圆形响应式TailwindCSS 的策略是小屏优先sm小屏幕宽度≥640px。md中等屏幕宽度≥768px。lg大屏幕宽度≥1024px。xl特大屏幕宽度≥1280px。divclassw - full sm:w - 1/2 md:w - 1/3 lg:w - 1/4 xl:w - 1/5这个元素的宽度会根据屏幕大小变化。/div交互hover:悬停状态。focus:聚焦状态。active:激活状态。buttonclassbg - 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 标记触发器 --inputclassNamepeer/!-- 第二步用 peer-* 类响应触发器状态 --labelclassNamepeer-focus:text-blue-500标签文字/label常用的peer-*状态类类名触发条件peer-focus:当 peer 元素获得焦点时peer-hover:当鼠标悬停在 peer 元素上时peer-active:当 peer 元素被激活时点击中peer-disabled:当 peer 元素被禁用时peer-checked:当 peer 元素如 checkbox被选中时实战范例按钮buttonclassNamebg-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 版divclassNameflex flex-col h-full{/* 图片部分固定高度保持原始比例 */}imgclassNamew-full h-48 object-cover flex-nonesrchttps://img0.baidu.com/it/u2236720789,2725222071fm253fmtautoapp138fJPEG?w1220h500alt商品图片/{/* 内容区自适应高度占据剩余空间 */}divclassNameflex-1 p-4h3classNametext-lg font-bold mb-2商品标题/h3pclassNametext-gray-600 mb-4商品描述.../p{/* 底部栏价格与按钮行水平排列 */}divclassNameflex items-center justify-betweenspanclassNametext-2xl text-red-500¥299/spanbuttonclassNamepx-4 py-2 bg-blue-600 text-white rounded立即购买/button/div/div/div