[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-tailwind-css-wanzhengzidiansuchabiaoqianduankaifachangyong":3},{"id":4,"title":5,"slug":6,"summary":7,"content":8,"contentHtml":9,"wordCount":10,"readingTime":11,"categoryId":12,"tags":13,"coverImage":13,"thumbnail":13,"status":14,"isTop":15,"isRecommended":15,"allowComments":15,"password":13,"viewCount":16,"likeCount":15,"commentCount":15,"seoTitle":5,"seoKeywords":17,"seoDescription":18,"source":13,"sourceUrl":13,"publishTime":19},"2041716173987442689","Tailwind CSS 完整字典\u002F速查表（前端开发常用）","tailwind-css-wanzhengzidiansuchabiaoqianduankaifachangyong","## 📐 布局 Layout | 类别 | 常用类 | 说明 | |:---|:---|:---| | **容器** | `container` `mx-auto` `px-4` | 居中容器 | | **显示** | `block` `inline` `inline-block` `hidden` `flex` `grid` `table` | 显示模式 | | **定位** | `static` `relative` `absolute` `fixed` `sticky` | 定位方式 | | **层级** | `z-0` ~ `z-50` | z-index | --- ## 📊 Flexbox 弹性布局 | 属性 | 类名 | 示例 | |:---|:---|:---| | 方向 | `flex-row` `flex-col` `flex-row-reverse` | 主轴方向...","\n## 📐 布局 Layout\n\n| 类别 | 常用类 | 说明 |\n|:---|:---|:---|\n| **容器** | `container` `mx-auto` `px-4` | 居中容器 |\n| **显示** | `block` `inline` `inline-block` `hidden` `flex` `grid` `table` | 显示模式 |\n| **定位** | `static` `relative` `absolute` `fixed` `sticky` | 定位方式 |\n| **层级** | `z-0` ~ `z-50` | z-index |\n\n---\n\n## 📊 Flexbox 弹性布局\n\n| 属性 | 类名 | 示例 |\n|:---|:---|:---|\n| 方向 | `flex-row` `flex-col` `flex-row-reverse` | 主轴方向 |\n| 换行 | `flex-wrap` `flex-nowrap` `flex-wrap-reverse` | 是否换行 |\n| 主轴对齐 | `justify-start` `center` `end` `between` `around` `evenly` | justify-content |\n| 交叉轴对齐 | `items-start` `center` `end` `stretch` `baseline` | align-items |\n| 自身对齐 | `self-auto` `self-start` `self-center` `self-end` | align-self |\n| 伸缩 | `flex-1` `flex-auto` `flex-initial` `flex-none` | flex属性 |\n| 增长 | `grow` `grow-0` | flex-grow |\n| 收缩 | `shrink` `shrink-0` | flex-shrink |\n\n---\n\n## 🔲 Grid 网格布局\n\n| 属性 | 类名 | 示例 |\n|:---|:---|:---|\n| 列数 | `grid-cols-1` ~ `grid-cols-12` | 1-12列 |\n| 行数 | `grid-rows-1` ~ `grid-rows-6` | 1-6行 |\n| 列宽 | `col-span-1` ~ `col-span-full` | 跨列 |\n| 行高 | `row-span-1` ~ `row-span-full` | 跨行 |\n| 起始列 | `col-start-1` ~ `col-start-13` | 列起始线 |\n| 起始行 | `row-start-1` ~ `row-start-7` | 行起始线 |\n| 间距 | `gap-0` ~ `gap-96` `gap-x-4` `gap-y-2` | 网格间距 |\n| 自动流 | `grid-flow-row` `grid-flow-col` `grid-flow-dense` | 自动排列 |\n\n---\n\n## 📏 间距 Spacing\n\n| 数值 | 尺寸 | 常用类 |\n|:---|:---|:---|\n| `0` | 0px | `p-0` `m-0` |\n| `1` | 4px (0.25rem) | `p-1` `m-1` `gap-1` |\n| `2` | 8px (0.5rem) | `p-2` `m-2` |\n| `4` | 16px (1rem) | `p-4` `m-4` |\n| `6` | 24px (1.5rem) | `p-6` `m-6` |\n| `8` | 32px (2rem) | `p-8` `m-8` |\n| `12` | 48px (3rem) | `p-12` |\n| `16` | 64px (4rem) | `p-16` |\n\n**方向修饰**：`pt-` `pr-` `pb-` `pl-` `px-` `py-`（padding 同理 margin: `mt` `mr` `mb` `ml` `mx` `my`）\n\n---\n\n## 📐 尺寸 Sizing\n\n| 属性 | 类名 | 示例 |\n|:---|:---|:---|\n| 宽度 | `w-0`~`w-96` `w-full` `w-screen` `w-fit` `w-min` `w-max` `w-1\u002F2` `w-1\u002F3` `w-1\u002F4` | 宽度 |\n| 高度 | `h-0`~`h-96` `h-full` `h-screen` `h-fit` `h-min` `h-max` `h-1\u002F2` | 高度 |\n| 最小宽 | `min-w-0` `min-w-full` `min-w-fit` `min-w-min` `min-w-max` | min-width |\n| 最大宽 | `max-w-0`~`max-w-7xl` `max-w-full` `max-w-none` `max-w-prose` | max-width |\n| 最小高 | `min-h-0` `min-h-full` `min-h-screen` `min-h-fit` | min-height |\n| 最大高 | `max-h-0`~`max-h-96` `max-h-full` `max-h-screen` `max-h-none` | max-height |\n\n---\n\n## 🎨 背景 Background\n\n| 属性 | 类名 | 示例 |\n|:---|:---|:---|\n| 颜色 | `bg-white` `bg-black` `bg-gray-500` `bg-blue-600` `bg-red-500` | 背景色 |\n| 透明度 | `bg-opacity-0`~`bg-opacity-100` | 背景透明度 |\n| 渐变 | `bg-gradient-to-t` `to-r` `to-b` `to-l` `to-tr` `to-tl` `to-br` `to-bl` | 渐变方向 |\n| 渐变色 | `from-blue-500` `via-purple-500` `to-pink-500` | 渐变色值 |\n| 图片 | `bg-[url('\u002Fimg.png')]` | 背景图 |\n| 大小 | `bg-auto` `bg-cover` `bg-contain` | 背景尺寸 |\n| 位置 | `bg-center` `bg-top` `bg-bottom` `bg-left` `bg-right` | 背景位置 |\n| 重复 | `bg-repeat` `bg-no-repeat` `bg-repeat-x` `bg-repeat-y` | 背景重复 |\n\n---\n\n## ✏️ 文字 Typography\n\n| 属性 | 类名 | 示例 |\n|:---|:---|:---|\n| 大小 | `text-xs` `text-sm` `text-base` `text-lg` `text-xl` `text-2xl`~`text-9xl` | 字体大小 |\n| 字重 | `font-thin` `font-light` `font-normal` `font-medium` `font-semibold` `font-bold` `font-black` | 粗细 |\n| 颜色 | `text-white` `text-black` `text-gray-500` `text-blue-600` | 文字颜色 |\n| 对齐 | `text-left` `text-center` `text-right` `text-justify` | 对齐方式 |\n| 行高 | `leading-3`~`leading-10` `leading-none` `leading-tight` `leading-snug` `leading-normal` `leading-relaxed` `leading-loose` | 行高 |\n| 字间距 | `tracking-tighter` `tracking-tight` `tracking-normal` `tracking-wide` `tracking-wider` `tracking-widest` | 字间距 |\n| 装饰 | `underline` `line-through` `no-underline` | 装饰线 |\n| 转换 | `uppercase` `lowercase` `capitalize` `normal-case` | 大小写 |\n| 截断 | `truncate` `text-ellipsis` `text-clip` | 溢出处理 |\n| 换行 | `break-normal` `break-words` `break-all` `break-keep` | 换行方式 |\n\n---\n\n## 🎯 边框 Border\n\n| 属性 | 类名 | 示例 |\n|:---|:---|:---|\n| 宽度 | `border-0` `border-2` `border-4` `border-8` `border` | 边框宽度 |\n| 颜色 | `border-white` `border-gray-300` `border-blue-500` | 边框颜色 |\n| 样式 | `border-solid` `border-dashed` `border-dotted` `border-double` `border-none` | 边框样式 |\n| 圆角 | `rounded-none` `rounded-sm` `rounded` `rounded-md` `rounded-lg` `rounded-xl` `rounded-2xl` `rounded-3xl` `rounded-full` | 圆角大小 |\n| 单边圆角 | `rounded-t-lg` `rounded-r-lg` `rounded-b-lg` `rounded-l-lg` `rounded-tl-lg` `rounded-tr-lg` `rounded-bl-lg` `rounded-br-lg` | 单边圆角 |\n\n---\n\n## 💫 效果 Effects\n\n| 属性 | 类名 | 示例 |\n|:---|:---|:---|\n| 阴影 | `shadow-sm` `shadow` `shadow-md` `shadow-lg` `shadow-xl` `shadow-2xl` `shadow-none` `shadow-inner` | 盒子阴影 |\n| 透明度 | `opacity-0`~`opacity-100` | 透明度 |\n| 混合模式 | `mix-blend-normal` `multiply` `screen` `overlay` `darken` `lighten` `color-dodge` `color-burn` `hard-light` `soft-light` `difference` `exclusion` `hue` `saturation` `color` `luminosity` | 混合模式 |\n| 滤镜 | `blur-none` `blur-sm` `blur` `blur-md` `blur-lg` `blur-xl` `blur-2xl` `blur-3xl` | 模糊 |\n| 亮度 | `brightness-0`~`brightness-200` | 亮度 |\n| 对比度 | `contrast-0`~`contrast-200` | 对比度 |\n| 灰度 | `grayscale` `grayscale-0` | 灰度 |\n| 色相旋转 | `hue-rotate-0`~`hue-rotate-180` | 色相旋转 |\n| 反色 | `invert` `invert-0` | 反色 |\n| 饱和度 | `saturate-0`~`saturate-200` | 饱和度 |\n| 深褐色 | `sepia` `sepia-0` | 深褐色 |\n\n---\n\n## 🔄 变换 Transform\n\n| 属性 | 类名 | 示例 |\n|:---|:---|:---|\n| 启用 | `transform` `transform-cpu` `transform-gpu` `transform-none` | 启用变换 |\n| 缩放 | `scale-0`~`scale-150` `scale-x-50` `scale-y-150` | 缩放 |\n| 旋转 | `rotate-0`~`rotate-180` `rotate-45` `rotate-90` `-rotate-45` | 旋转 |\n| 平移 | `translate-x-0`~`translate-x-full` `translate-y-4` `-translate-x-2` | 平移 |\n| 倾斜 | `skew-x-0`~`skew-x-12` `skew-y-6` `-skew-x-3` | 倾斜 |\n| 原点 | `origin-center` `origin-top` `origin-top-right` `origin-right` `origin-bottom-right` `origin-bottom` `origin-bottom-left` `origin-left` `origin-top-left` | 变换原点 |\n\n---\n\n## 🎬 过渡与动画\n\n| 属性 | 类名 | 示例 |\n|:---|:---|:---|\n| 过渡 | `transition-none` `transition-all` `transition-colors` `transition-opacity` `transition-shadow` `transition-transform` | 过渡属性 |\n| 时长 | `duration-0`~`duration-1000` `duration-75` `duration-100` `duration-150` `duration-200` `duration-300` `duration-500` `duration-700` | 过渡时长 |\n| 缓动 | `ease-linear` `ease-in` `ease-out` `ease-in-out` | 缓动函数 |\n| 延迟 | `delay-0`~`delay-1000` `delay-75` `delay-100` `delay-150` `delay-200` `delay-300` `delay-500` `delay-700` | 延迟时间 |\n| 动画 | `animate-none` `animate-spin` `animate-ping` `animate-pulse` `animate-bounce` | 预设动画 |\n\n---\n\n## 📱 响应式断点\n\n| 断点 | 前缀 | 宽度 | CSS |\n|:---|:---|:---|:---|\n| 默认 | 无 | \u003C 640px | - |\n| sm | `sm:` | ≥ 640px | `@media (min-width: 640px)` |\n| md | `md:` | ≥ 768px | `@media (min-width: 768px)` |\n| lg | `lg:` | ≥ 1024px | `@media (min-width: 1024px)` |\n| xl | `xl:` | ≥ 1280px | `@media (min-width: 1280px)` |\n| 2xl | `2xl:` | ≥ 1536px | `@media (min-width: 1536px)` |\n\n**用法示例**：`md:flex` `lg:grid-cols-4` `xl:text-xl`\n\n---\n\n## 🎨 颜色体系\n\nTailwind 提供 **22种颜色**，每种颜色 **11个色阶**（50-950）：\n\n| 颜色名 | 示例 |\n|:---|:---|\n| 灰度 | `slate` `gray` `zinc` `neutral` `stone` |\n| 彩色 | `red` `orange` `amber` `yellow` `lime` `green` `emerald` `teal` `cyan` `sky` `blue` `indigo` `violet` `purple` `fuchsia` `pink` `rose` |\n\n**色阶**：`50` `100` `200` `300` `400` `500` `600` `700` `800` `900` `950`\n\n**示例**：`bg-blue-500` `text-red-600` `border-green-400`\n\n---\n\n## 🛠️ 状态修饰符\n\n| 修饰符 | 说明 | 示例 |\n|:---|:---|:---|\n| `hover:` | 鼠标悬停 | `hover:bg-blue-600` |\n| `focus:` | 获得焦点 | `focus:ring-2` |\n| `active:` | 激活状态 | `active:bg-blue-700` |\n| `disabled:` | 禁用状态 | `disabled:opacity-50` |\n| `first:` | 第一个子元素 | `first:mt-0` |\n| `last:` | 最后一个子元素 | `last:mb-0` |\n| `odd:` | 奇数项 | `odd:bg-gray-100` |\n| `even:` | 偶数项 | `even:bg-white` |\n| `group-hover:` | 父元素悬停 | `group-hover:visible` |\n| `peer-focus:` | 兄弟元素焦点 | `peer-focus:ring-2` |\n\n---\n\n## 🔧 实用工具\n\n| 类别 | 类名 | 说明 |\n|:---|:---|:---|\n| **光标** | `cursor-auto` `default` `pointer` `wait` `text` `move` `not-allowed` | 鼠标样式 |\n| **选择** | `select-none` `text` `all` `auto` | 文本选择 |\n| **指针事件** | `pointer-events-none` `auto` | 指针事件 |\n| **可见性** | `visible` `invisible` `collapse` | 可见性 |\n| **溢出** | `overflow-auto` `hidden` `visible` `scroll` `overflow-x-auto` `overflow-y-hidden` | 溢出处理 |\n| **滚动行为** | `scroll-auto` `scroll-smooth` | 滚动行为 |\n| **调整大小** | `resize-none` `resize` `resize-y` `resize-x` | 调整大小 |\n| **外观** | `appearance-none` | 移除默认样式 |\n\n---\n\n## 📋 快速记忆口诀\n\n```\n布局：container flex grid relative absolute\n尺寸：w-full h-screen min-w-0 max-w-7xl\n间距：p-4 m-2 px-6 my-8 gap-4\n颜色：bg-blue-500 text-white border-gray-300\n文字：text-lg font-bold text-center leading-relaxed\n边框：rounded-lg border-2 border-solid\n效果：shadow-lg opacity-75 blur-md\n变换：scale-110 rotate-45 translate-x-4\n动画：transition duration-300 ease-in-out hover:scale-105\n响应：sm: md: lg: xl: 2xl:\n```\n\n如需 **PDF 版本** 或 **特定分类的详细展开**，告诉我！","\u003Ch2 data-line=\"1\" id=\"📐 布局 Layout\">📐 布局 Layout\u003C\u002Fh2>\n\u003Ctable data-line=\"3\">\n\u003Cthead data-line=\"3\">\n\u003Ctr data-line=\"3\">\n\u003Cth style=\"text-align:left\">类别\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">常用类\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">说明\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"5\">\n\u003Ctr data-line=\"5\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>容器\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>container\u003C\u002Fcode> \u003Ccode>mx-auto\u003C\u002Fcode> \u003Ccode>px-4\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">居中容器\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"6\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>显示\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>block\u003C\u002Fcode> \u003Ccode>inline\u003C\u002Fcode> \u003Ccode>inline-block\u003C\u002Fcode> \u003Ccode>hidden\u003C\u002Fcode> \u003Ccode>flex\u003C\u002Fcode> \u003Ccode>grid\u003C\u002Fcode> \u003Ccode>table\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">显示模式\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"7\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>定位\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>static\u003C\u002Fcode> \u003Ccode>relative\u003C\u002Fcode> \u003Ccode>absolute\u003C\u002Fcode> \u003Ccode>fixed\u003C\u002Fcode> \u003Ccode>sticky\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">定位方式\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"8\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>层级\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>z-0\u003C\u002Fcode> ~ \u003Ccode>z-50\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">z-index\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"10\">\n\u003Ch2 data-line=\"12\" id=\"📊 Flexbox 弹性布局\">📊 Flexbox 弹性布局\u003C\u002Fh2>\n\u003Ctable data-line=\"14\">\n\u003Cthead data-line=\"14\">\n\u003Ctr data-line=\"14\">\n\u003Cth style=\"text-align:left\">属性\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">类名\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">示例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"16\">\n\u003Ctr data-line=\"16\">\n\u003Ctd style=\"text-align:left\">方向\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>flex-row\u003C\u002Fcode> \u003Ccode>flex-col\u003C\u002Fcode> \u003Ccode>flex-row-reverse\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">主轴方向\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"17\">\n\u003Ctd style=\"text-align:left\">换行\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>flex-wrap\u003C\u002Fcode> \u003Ccode>flex-nowrap\u003C\u002Fcode> \u003Ccode>flex-wrap-reverse\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">是否换行\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"18\">\n\u003Ctd style=\"text-align:left\">主轴对齐\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>justify-start\u003C\u002Fcode> \u003Ccode>center\u003C\u002Fcode> \u003Ccode>end\u003C\u002Fcode> \u003Ccode>between\u003C\u002Fcode> \u003Ccode>around\u003C\u002Fcode> \u003Ccode>evenly\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">justify-content\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"19\">\n\u003Ctd style=\"text-align:left\">交叉轴对齐\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>items-start\u003C\u002Fcode> \u003Ccode>center\u003C\u002Fcode> \u003Ccode>end\u003C\u002Fcode> \u003Ccode>stretch\u003C\u002Fcode> \u003Ccode>baseline\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">align-items\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"20\">\n\u003Ctd style=\"text-align:left\">自身对齐\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>self-auto\u003C\u002Fcode> \u003Ccode>self-start\u003C\u002Fcode> \u003Ccode>self-center\u003C\u002Fcode> \u003Ccode>self-end\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">align-self\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"21\">\n\u003Ctd style=\"text-align:left\">伸缩\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>flex-1\u003C\u002Fcode> \u003Ccode>flex-auto\u003C\u002Fcode> \u003Ccode>flex-initial\u003C\u002Fcode> \u003Ccode>flex-none\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">flex属性\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"22\">\n\u003Ctd style=\"text-align:left\">增长\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>grow\u003C\u002Fcode> \u003Ccode>grow-0\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">flex-grow\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"23\">\n\u003Ctd style=\"text-align:left\">收缩\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>shrink\u003C\u002Fcode> \u003Ccode>shrink-0\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">flex-shrink\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"25\">\n\u003Ch2 data-line=\"27\" id=\"🔲 Grid 网格布局\">🔲 Grid 网格布局\u003C\u002Fh2>\n\u003Ctable data-line=\"29\">\n\u003Cthead data-line=\"29\">\n\u003Ctr data-line=\"29\">\n\u003Cth style=\"text-align:left\">属性\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">类名\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">示例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"31\">\n\u003Ctr data-line=\"31\">\n\u003Ctd style=\"text-align:left\">列数\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>grid-cols-1\u003C\u002Fcode> ~ \u003Ccode>grid-cols-12\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">1-12列\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"32\">\n\u003Ctd style=\"text-align:left\">行数\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>grid-rows-1\u003C\u002Fcode> ~ \u003Ccode>grid-rows-6\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">1-6行\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"33\">\n\u003Ctd style=\"text-align:left\">列宽\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>col-span-1\u003C\u002Fcode> ~ \u003Ccode>col-span-full\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">跨列\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"34\">\n\u003Ctd style=\"text-align:left\">行高\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>row-span-1\u003C\u002Fcode> ~ \u003Ccode>row-span-full\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">跨行\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"35\">\n\u003Ctd style=\"text-align:left\">起始列\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>col-start-1\u003C\u002Fcode> ~ \u003Ccode>col-start-13\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">列起始线\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"36\">\n\u003Ctd style=\"text-align:left\">起始行\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>row-start-1\u003C\u002Fcode> ~ \u003Ccode>row-start-7\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">行起始线\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"37\">\n\u003Ctd style=\"text-align:left\">间距\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>gap-0\u003C\u002Fcode> ~ \u003Ccode>gap-96\u003C\u002Fcode> \u003Ccode>gap-x-4\u003C\u002Fcode> \u003Ccode>gap-y-2\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">网格间距\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"38\">\n\u003Ctd style=\"text-align:left\">自动流\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>grid-flow-row\u003C\u002Fcode> \u003Ccode>grid-flow-col\u003C\u002Fcode> \u003Ccode>grid-flow-dense\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">自动排列\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"40\">\n\u003Ch2 data-line=\"42\" id=\"📏 间距 Spacing\">📏 间距 Spacing\u003C\u002Fh2>\n\u003Ctable data-line=\"44\">\n\u003Cthead data-line=\"44\">\n\u003Ctr data-line=\"44\">\n\u003Cth style=\"text-align:left\">数值\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">尺寸\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">常用类\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"46\">\n\u003Ctr data-line=\"46\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>0\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">0px\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>p-0\u003C\u002Fcode> \u003Ccode>m-0\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"47\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>1\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">4px (0.25rem)\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>p-1\u003C\u002Fcode> \u003Ccode>m-1\u003C\u002Fcode> \u003Ccode>gap-1\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"48\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>2\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">8px (0.5rem)\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>p-2\u003C\u002Fcode> \u003Ccode>m-2\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"49\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>4\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">16px (1rem)\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>p-4\u003C\u002Fcode> \u003Ccode>m-4\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"50\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>6\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">24px (1.5rem)\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>p-6\u003C\u002Fcode> \u003Ccode>m-6\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"51\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>8\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">32px (2rem)\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>p-8\u003C\u002Fcode> \u003Ccode>m-8\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"52\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>12\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">48px (3rem)\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>p-12\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"53\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>16\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">64px (4rem)\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>p-16\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp data-line=\"55\">\u003Cstrong>方向修饰\u003C\u002Fstrong>：\u003Ccode>pt-\u003C\u002Fcode> \u003Ccode>pr-\u003C\u002Fcode> \u003Ccode>pb-\u003C\u002Fcode> \u003Ccode>pl-\u003C\u002Fcode> \u003Ccode>px-\u003C\u002Fcode> \u003Ccode>py-\u003C\u002Fcode>（padding 同理 margin: \u003Ccode>mt\u003C\u002Fcode> \u003Ccode>mr\u003C\u002Fcode> \u003Ccode>mb\u003C\u002Fcode> \u003Ccode>ml\u003C\u002Fcode> \u003Ccode>mx\u003C\u002Fcode> \u003Ccode>my\u003C\u002Fcode>）\u003C\u002Fp>\n\u003Chr data-line=\"57\">\n\u003Ch2 data-line=\"59\" id=\"📐 尺寸 Sizing\">📐 尺寸 Sizing\u003C\u002Fh2>\n\u003Ctable data-line=\"61\">\n\u003Cthead data-line=\"61\">\n\u003Ctr data-line=\"61\">\n\u003Cth style=\"text-align:left\">属性\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">类名\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">示例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"63\">\n\u003Ctr data-line=\"63\">\n\u003Ctd style=\"text-align:left\">宽度\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>w-0\u003C\u002Fcode>~\u003Ccode>w-96\u003C\u002Fcode> \u003Ccode>w-full\u003C\u002Fcode> \u003Ccode>w-screen\u003C\u002Fcode> \u003Ccode>w-fit\u003C\u002Fcode> \u003Ccode>w-min\u003C\u002Fcode> \u003Ccode>w-max\u003C\u002Fcode> \u003Ccode>w-1\u002F2\u003C\u002Fcode> \u003Ccode>w-1\u002F3\u003C\u002Fcode> \u003Ccode>w-1\u002F4\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">宽度\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"64\">\n\u003Ctd style=\"text-align:left\">高度\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>h-0\u003C\u002Fcode>~\u003Ccode>h-96\u003C\u002Fcode> \u003Ccode>h-full\u003C\u002Fcode> \u003Ccode>h-screen\u003C\u002Fcode> \u003Ccode>h-fit\u003C\u002Fcode> \u003Ccode>h-min\u003C\u002Fcode> \u003Ccode>h-max\u003C\u002Fcode> \u003Ccode>h-1\u002F2\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">高度\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"65\">\n\u003Ctd style=\"text-align:left\">最小宽\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>min-w-0\u003C\u002Fcode> \u003Ccode>min-w-full\u003C\u002Fcode> \u003Ccode>min-w-fit\u003C\u002Fcode> \u003Ccode>min-w-min\u003C\u002Fcode> \u003Ccode>min-w-max\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">min-width\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"66\">\n\u003Ctd style=\"text-align:left\">最大宽\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>max-w-0\u003C\u002Fcode>~\u003Ccode>max-w-7xl\u003C\u002Fcode> \u003Ccode>max-w-full\u003C\u002Fcode> \u003Ccode>max-w-none\u003C\u002Fcode> \u003Ccode>max-w-prose\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">max-width\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"67\">\n\u003Ctd style=\"text-align:left\">最小高\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>min-h-0\u003C\u002Fcode> \u003Ccode>min-h-full\u003C\u002Fcode> \u003Ccode>min-h-screen\u003C\u002Fcode> \u003Ccode>min-h-fit\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">min-height\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"68\">\n\u003Ctd style=\"text-align:left\">最大高\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>max-h-0\u003C\u002Fcode>~\u003Ccode>max-h-96\u003C\u002Fcode> \u003Ccode>max-h-full\u003C\u002Fcode> \u003Ccode>max-h-screen\u003C\u002Fcode> \u003Ccode>max-h-none\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">max-height\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"70\">\n\u003Ch2 data-line=\"72\" id=\"🎨 背景 Background\">🎨 背景 Background\u003C\u002Fh2>\n\u003Ctable data-line=\"74\">\n\u003Cthead data-line=\"74\">\n\u003Ctr data-line=\"74\">\n\u003Cth style=\"text-align:left\">属性\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">类名\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">示例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"76\">\n\u003Ctr data-line=\"76\">\n\u003Ctd style=\"text-align:left\">颜色\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>bg-white\u003C\u002Fcode> \u003Ccode>bg-black\u003C\u002Fcode> \u003Ccode>bg-gray-500\u003C\u002Fcode> \u003Ccode>bg-blue-600\u003C\u002Fcode> \u003Ccode>bg-red-500\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">背景色\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"77\">\n\u003Ctd style=\"text-align:left\">透明度\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>bg-opacity-0\u003C\u002Fcode>~\u003Ccode>bg-opacity-100\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">背景透明度\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"78\">\n\u003Ctd style=\"text-align:left\">渐变\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>bg-gradient-to-t\u003C\u002Fcode> \u003Ccode>to-r\u003C\u002Fcode> \u003Ccode>to-b\u003C\u002Fcode> \u003Ccode>to-l\u003C\u002Fcode> \u003Ccode>to-tr\u003C\u002Fcode> \u003Ccode>to-tl\u003C\u002Fcode> \u003Ccode>to-br\u003C\u002Fcode> \u003Ccode>to-bl\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">渐变方向\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"79\">\n\u003Ctd style=\"text-align:left\">渐变色\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>from-blue-500\u003C\u002Fcode> \u003Ccode>via-purple-500\u003C\u002Fcode> \u003Ccode>to-pink-500\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">渐变色值\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"80\">\n\u003Ctd style=\"text-align:left\">图片\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>bg-[url('\u002Fimg.png')]\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">背景图\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"81\">\n\u003Ctd style=\"text-align:left\">大小\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>bg-auto\u003C\u002Fcode> \u003Ccode>bg-cover\u003C\u002Fcode> \u003Ccode>bg-contain\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">背景尺寸\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"82\">\n\u003Ctd style=\"text-align:left\">位置\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>bg-center\u003C\u002Fcode> \u003Ccode>bg-top\u003C\u002Fcode> \u003Ccode>bg-bottom\u003C\u002Fcode> \u003Ccode>bg-left\u003C\u002Fcode> \u003Ccode>bg-right\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">背景位置\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"83\">\n\u003Ctd style=\"text-align:left\">重复\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>bg-repeat\u003C\u002Fcode> \u003Ccode>bg-no-repeat\u003C\u002Fcode> \u003Ccode>bg-repeat-x\u003C\u002Fcode> \u003Ccode>bg-repeat-y\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">背景重复\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"85\">\n\u003Ch2 data-line=\"87\" id=\"✏️ 文字 Typography\">✏️ 文字 Typography\u003C\u002Fh2>\n\u003Ctable data-line=\"89\">\n\u003Cthead data-line=\"89\">\n\u003Ctr data-line=\"89\">\n\u003Cth style=\"text-align:left\">属性\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">类名\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">示例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"91\">\n\u003Ctr data-line=\"91\">\n\u003Ctd style=\"text-align:left\">大小\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>text-xs\u003C\u002Fcode> \u003Ccode>text-sm\u003C\u002Fcode> \u003Ccode>text-base\u003C\u002Fcode> \u003Ccode>text-lg\u003C\u002Fcode> \u003Ccode>text-xl\u003C\u002Fcode> \u003Ccode>text-2xl\u003C\u002Fcode>~\u003Ccode>text-9xl\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">字体大小\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"92\">\n\u003Ctd style=\"text-align:left\">字重\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>font-thin\u003C\u002Fcode> \u003Ccode>font-light\u003C\u002Fcode> \u003Ccode>font-normal\u003C\u002Fcode> \u003Ccode>font-medium\u003C\u002Fcode> \u003Ccode>font-semibold\u003C\u002Fcode> \u003Ccode>font-bold\u003C\u002Fcode> \u003Ccode>font-black\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">粗细\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"93\">\n\u003Ctd style=\"text-align:left\">颜色\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>text-white\u003C\u002Fcode> \u003Ccode>text-black\u003C\u002Fcode> \u003Ccode>text-gray-500\u003C\u002Fcode> \u003Ccode>text-blue-600\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">文字颜色\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"94\">\n\u003Ctd style=\"text-align:left\">对齐\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>text-left\u003C\u002Fcode> \u003Ccode>text-center\u003C\u002Fcode> \u003Ccode>text-right\u003C\u002Fcode> \u003Ccode>text-justify\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">对齐方式\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"95\">\n\u003Ctd style=\"text-align:left\">行高\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>leading-3\u003C\u002Fcode>~\u003Ccode>leading-10\u003C\u002Fcode> \u003Ccode>leading-none\u003C\u002Fcode> \u003Ccode>leading-tight\u003C\u002Fcode> \u003Ccode>leading-snug\u003C\u002Fcode> \u003Ccode>leading-normal\u003C\u002Fcode> \u003Ccode>leading-relaxed\u003C\u002Fcode> \u003Ccode>leading-loose\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">行高\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"96\">\n\u003Ctd style=\"text-align:left\">字间距\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>tracking-tighter\u003C\u002Fcode> \u003Ccode>tracking-tight\u003C\u002Fcode> \u003Ccode>tracking-normal\u003C\u002Fcode> \u003Ccode>tracking-wide\u003C\u002Fcode> \u003Ccode>tracking-wider\u003C\u002Fcode> \u003Ccode>tracking-widest\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">字间距\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"97\">\n\u003Ctd style=\"text-align:left\">装饰\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>underline\u003C\u002Fcode> \u003Ccode>line-through\u003C\u002Fcode> \u003Ccode>no-underline\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">装饰线\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"98\">\n\u003Ctd style=\"text-align:left\">转换\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>uppercase\u003C\u002Fcode> \u003Ccode>lowercase\u003C\u002Fcode> \u003Ccode>capitalize\u003C\u002Fcode> \u003Ccode>normal-case\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">大小写\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"99\">\n\u003Ctd style=\"text-align:left\">截断\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>truncate\u003C\u002Fcode> \u003Ccode>text-ellipsis\u003C\u002Fcode> \u003Ccode>text-clip\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">溢出处理\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"100\">\n\u003Ctd style=\"text-align:left\">换行\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>break-normal\u003C\u002Fcode> \u003Ccode>break-words\u003C\u002Fcode> \u003Ccode>break-all\u003C\u002Fcode> \u003Ccode>break-keep\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">换行方式\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"102\">\n\u003Ch2 data-line=\"104\" id=\"🎯 边框 Border\">🎯 边框 Border\u003C\u002Fh2>\n\u003Ctable data-line=\"106\">\n\u003Cthead data-line=\"106\">\n\u003Ctr data-line=\"106\">\n\u003Cth style=\"text-align:left\">属性\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">类名\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">示例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"108\">\n\u003Ctr data-line=\"108\">\n\u003Ctd style=\"text-align:left\">宽度\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>border-0\u003C\u002Fcode> \u003Ccode>border-2\u003C\u002Fcode> \u003Ccode>border-4\u003C\u002Fcode> \u003Ccode>border-8\u003C\u002Fcode> \u003Ccode>border\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">边框宽度\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"109\">\n\u003Ctd style=\"text-align:left\">颜色\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>border-white\u003C\u002Fcode> \u003Ccode>border-gray-300\u003C\u002Fcode> \u003Ccode>border-blue-500\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">边框颜色\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"110\">\n\u003Ctd style=\"text-align:left\">样式\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>border-solid\u003C\u002Fcode> \u003Ccode>border-dashed\u003C\u002Fcode> \u003Ccode>border-dotted\u003C\u002Fcode> \u003Ccode>border-double\u003C\u002Fcode> \u003Ccode>border-none\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">边框样式\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"111\">\n\u003Ctd style=\"text-align:left\">圆角\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>rounded-none\u003C\u002Fcode> \u003Ccode>rounded-sm\u003C\u002Fcode> \u003Ccode>rounded\u003C\u002Fcode> \u003Ccode>rounded-md\u003C\u002Fcode> \u003Ccode>rounded-lg\u003C\u002Fcode> \u003Ccode>rounded-xl\u003C\u002Fcode> \u003Ccode>rounded-2xl\u003C\u002Fcode> \u003Ccode>rounded-3xl\u003C\u002Fcode> \u003Ccode>rounded-full\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">圆角大小\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"112\">\n\u003Ctd style=\"text-align:left\">单边圆角\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>rounded-t-lg\u003C\u002Fcode> \u003Ccode>rounded-r-lg\u003C\u002Fcode> \u003Ccode>rounded-b-lg\u003C\u002Fcode> \u003Ccode>rounded-l-lg\u003C\u002Fcode> \u003Ccode>rounded-tl-lg\u003C\u002Fcode> \u003Ccode>rounded-tr-lg\u003C\u002Fcode> \u003Ccode>rounded-bl-lg\u003C\u002Fcode> \u003Ccode>rounded-br-lg\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">单边圆角\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"114\">\n\u003Ch2 data-line=\"116\" id=\"💫 效果 Effects\">💫 效果 Effects\u003C\u002Fh2>\n\u003Ctable data-line=\"118\">\n\u003Cthead data-line=\"118\">\n\u003Ctr data-line=\"118\">\n\u003Cth style=\"text-align:left\">属性\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">类名\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">示例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"120\">\n\u003Ctr data-line=\"120\">\n\u003Ctd style=\"text-align:left\">阴影\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>shadow-sm\u003C\u002Fcode> \u003Ccode>shadow\u003C\u002Fcode> \u003Ccode>shadow-md\u003C\u002Fcode> \u003Ccode>shadow-lg\u003C\u002Fcode> \u003Ccode>shadow-xl\u003C\u002Fcode> \u003Ccode>shadow-2xl\u003C\u002Fcode> \u003Ccode>shadow-none\u003C\u002Fcode> \u003Ccode>shadow-inner\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">盒子阴影\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"121\">\n\u003Ctd style=\"text-align:left\">透明度\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>opacity-0\u003C\u002Fcode>~\u003Ccode>opacity-100\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">透明度\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"122\">\n\u003Ctd style=\"text-align:left\">混合模式\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>mix-blend-normal\u003C\u002Fcode> \u003Ccode>multiply\u003C\u002Fcode> \u003Ccode>screen\u003C\u002Fcode> \u003Ccode>overlay\u003C\u002Fcode> \u003Ccode>darken\u003C\u002Fcode> \u003Ccode>lighten\u003C\u002Fcode> \u003Ccode>color-dodge\u003C\u002Fcode> \u003Ccode>color-burn\u003C\u002Fcode> \u003Ccode>hard-light\u003C\u002Fcode> \u003Ccode>soft-light\u003C\u002Fcode> \u003Ccode>difference\u003C\u002Fcode> \u003Ccode>exclusion\u003C\u002Fcode> \u003Ccode>hue\u003C\u002Fcode> \u003Ccode>saturation\u003C\u002Fcode> \u003Ccode>color\u003C\u002Fcode> \u003Ccode>luminosity\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">混合模式\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"123\">\n\u003Ctd style=\"text-align:left\">滤镜\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>blur-none\u003C\u002Fcode> \u003Ccode>blur-sm\u003C\u002Fcode> \u003Ccode>blur\u003C\u002Fcode> \u003Ccode>blur-md\u003C\u002Fcode> \u003Ccode>blur-lg\u003C\u002Fcode> \u003Ccode>blur-xl\u003C\u002Fcode> \u003Ccode>blur-2xl\u003C\u002Fcode> \u003Ccode>blur-3xl\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">模糊\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"124\">\n\u003Ctd style=\"text-align:left\">亮度\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>brightness-0\u003C\u002Fcode>~\u003Ccode>brightness-200\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">亮度\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"125\">\n\u003Ctd style=\"text-align:left\">对比度\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>contrast-0\u003C\u002Fcode>~\u003Ccode>contrast-200\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">对比度\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"126\">\n\u003Ctd style=\"text-align:left\">灰度\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>grayscale\u003C\u002Fcode> \u003Ccode>grayscale-0\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">灰度\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"127\">\n\u003Ctd style=\"text-align:left\">色相旋转\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>hue-rotate-0\u003C\u002Fcode>~\u003Ccode>hue-rotate-180\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">色相旋转\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"128\">\n\u003Ctd style=\"text-align:left\">反色\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>invert\u003C\u002Fcode> \u003Ccode>invert-0\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">反色\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"129\">\n\u003Ctd style=\"text-align:left\">饱和度\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>saturate-0\u003C\u002Fcode>~\u003Ccode>saturate-200\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">饱和度\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"130\">\n\u003Ctd style=\"text-align:left\">深褐色\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>sepia\u003C\u002Fcode> \u003Ccode>sepia-0\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">深褐色\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"132\">\n\u003Ch2 data-line=\"134\" id=\"🔄 变换 Transform\">🔄 变换 Transform\u003C\u002Fh2>\n\u003Ctable data-line=\"136\">\n\u003Cthead data-line=\"136\">\n\u003Ctr data-line=\"136\">\n\u003Cth style=\"text-align:left\">属性\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">类名\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">示例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"138\">\n\u003Ctr data-line=\"138\">\n\u003Ctd style=\"text-align:left\">启用\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>transform\u003C\u002Fcode> \u003Ccode>transform-cpu\u003C\u002Fcode> \u003Ccode>transform-gpu\u003C\u002Fcode> \u003Ccode>transform-none\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">启用变换\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"139\">\n\u003Ctd style=\"text-align:left\">缩放\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>scale-0\u003C\u002Fcode>~\u003Ccode>scale-150\u003C\u002Fcode> \u003Ccode>scale-x-50\u003C\u002Fcode> \u003Ccode>scale-y-150\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">缩放\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"140\">\n\u003Ctd style=\"text-align:left\">旋转\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>rotate-0\u003C\u002Fcode>~\u003Ccode>rotate-180\u003C\u002Fcode> \u003Ccode>rotate-45\u003C\u002Fcode> \u003Ccode>rotate-90\u003C\u002Fcode> \u003Ccode>-rotate-45\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">旋转\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"141\">\n\u003Ctd style=\"text-align:left\">平移\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>translate-x-0\u003C\u002Fcode>~\u003Ccode>translate-x-full\u003C\u002Fcode> \u003Ccode>translate-y-4\u003C\u002Fcode> \u003Ccode>-translate-x-2\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">平移\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"142\">\n\u003Ctd style=\"text-align:left\">倾斜\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>skew-x-0\u003C\u002Fcode>~\u003Ccode>skew-x-12\u003C\u002Fcode> \u003Ccode>skew-y-6\u003C\u002Fcode> \u003Ccode>-skew-x-3\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">倾斜\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"143\">\n\u003Ctd style=\"text-align:left\">原点\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>origin-center\u003C\u002Fcode> \u003Ccode>origin-top\u003C\u002Fcode> \u003Ccode>origin-top-right\u003C\u002Fcode> \u003Ccode>origin-right\u003C\u002Fcode> \u003Ccode>origin-bottom-right\u003C\u002Fcode> \u003Ccode>origin-bottom\u003C\u002Fcode> \u003Ccode>origin-bottom-left\u003C\u002Fcode> \u003Ccode>origin-left\u003C\u002Fcode> \u003Ccode>origin-top-left\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">变换原点\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"145\">\n\u003Ch2 data-line=\"147\" id=\"🎬 过渡与动画\">🎬 过渡与动画\u003C\u002Fh2>\n\u003Ctable data-line=\"149\">\n\u003Cthead data-line=\"149\">\n\u003Ctr data-line=\"149\">\n\u003Cth style=\"text-align:left\">属性\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">类名\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">示例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"151\">\n\u003Ctr data-line=\"151\">\n\u003Ctd style=\"text-align:left\">过渡\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>transition-none\u003C\u002Fcode> \u003Ccode>transition-all\u003C\u002Fcode> \u003Ccode>transition-colors\u003C\u002Fcode> \u003Ccode>transition-opacity\u003C\u002Fcode> \u003Ccode>transition-shadow\u003C\u002Fcode> \u003Ccode>transition-transform\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">过渡属性\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"152\">\n\u003Ctd style=\"text-align:left\">时长\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>duration-0\u003C\u002Fcode>~\u003Ccode>duration-1000\u003C\u002Fcode> \u003Ccode>duration-75\u003C\u002Fcode> \u003Ccode>duration-100\u003C\u002Fcode> \u003Ccode>duration-150\u003C\u002Fcode> \u003Ccode>duration-200\u003C\u002Fcode> \u003Ccode>duration-300\u003C\u002Fcode> \u003Ccode>duration-500\u003C\u002Fcode> \u003Ccode>duration-700\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">过渡时长\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"153\">\n\u003Ctd style=\"text-align:left\">缓动\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>ease-linear\u003C\u002Fcode> \u003Ccode>ease-in\u003C\u002Fcode> \u003Ccode>ease-out\u003C\u002Fcode> \u003Ccode>ease-in-out\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">缓动函数\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"154\">\n\u003Ctd style=\"text-align:left\">延迟\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>delay-0\u003C\u002Fcode>~\u003Ccode>delay-1000\u003C\u002Fcode> \u003Ccode>delay-75\u003C\u002Fcode> \u003Ccode>delay-100\u003C\u002Fcode> \u003Ccode>delay-150\u003C\u002Fcode> \u003Ccode>delay-200\u003C\u002Fcode> \u003Ccode>delay-300\u003C\u002Fcode> \u003Ccode>delay-500\u003C\u002Fcode> \u003Ccode>delay-700\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">延迟时间\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"155\">\n\u003Ctd style=\"text-align:left\">动画\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>animate-none\u003C\u002Fcode> \u003Ccode>animate-spin\u003C\u002Fcode> \u003Ccode>animate-ping\u003C\u002Fcode> \u003Ccode>animate-pulse\u003C\u002Fcode> \u003Ccode>animate-bounce\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">预设动画\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"157\">\n\u003Ch2 data-line=\"159\" id=\"📱 响应式断点\">📱 响应式断点\u003C\u002Fh2>\n\u003Ctable data-line=\"161\">\n\u003Cthead data-line=\"161\">\n\u003Ctr data-line=\"161\">\n\u003Cth style=\"text-align:left\">断点\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">前缀\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">宽度\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">CSS\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"163\">\n\u003Ctr data-line=\"163\">\n\u003Ctd style=\"text-align:left\">默认\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">无\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">< 640px\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">-\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"164\">\n\u003Ctd style=\"text-align:left\">sm\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>sm:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">≥ 640px\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>@media (min-width: 640px)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"165\">\n\u003Ctd style=\"text-align:left\">md\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>md:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">≥ 768px\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>@media (min-width: 768px)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"166\">\n\u003Ctd style=\"text-align:left\">lg\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>lg:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">≥ 1024px\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>@media (min-width: 1024px)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"167\">\n\u003Ctd style=\"text-align:left\">xl\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>xl:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">≥ 1280px\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>@media (min-width: 1280px)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"168\">\n\u003Ctd style=\"text-align:left\">2xl\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>2xl:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">≥ 1536px\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>@media (min-width: 1536px)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp data-line=\"170\">\u003Cstrong>用法示例\u003C\u002Fstrong>：\u003Ccode>md:flex\u003C\u002Fcode> \u003Ccode>lg:grid-cols-4\u003C\u002Fcode> \u003Ccode>xl:text-xl\u003C\u002Fcode>\u003C\u002Fp>\n\u003Chr data-line=\"172\">\n\u003Ch2 data-line=\"174\" id=\"🎨 颜色体系\">🎨 颜色体系\u003C\u002Fh2>\n\u003Cp data-line=\"176\">Tailwind 提供 \u003Cstrong>22种颜色\u003C\u002Fstrong>，每种颜色 \u003Cstrong>11个色阶\u003C\u002Fstrong>（50-950）：\u003C\u002Fp>\n\u003Ctable data-line=\"178\">\n\u003Cthead data-line=\"178\">\n\u003Ctr data-line=\"178\">\n\u003Cth style=\"text-align:left\">颜色名\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">示例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"180\">\n\u003Ctr data-line=\"180\">\n\u003Ctd style=\"text-align:left\">灰度\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>slate\u003C\u002Fcode> \u003Ccode>gray\u003C\u002Fcode> \u003Ccode>zinc\u003C\u002Fcode> \u003Ccode>neutral\u003C\u002Fcode> \u003Ccode>stone\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"181\">\n\u003Ctd style=\"text-align:left\">彩色\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>red\u003C\u002Fcode> \u003Ccode>orange\u003C\u002Fcode> \u003Ccode>amber\u003C\u002Fcode> \u003Ccode>yellow\u003C\u002Fcode> \u003Ccode>lime\u003C\u002Fcode> \u003Ccode>green\u003C\u002Fcode> \u003Ccode>emerald\u003C\u002Fcode> \u003Ccode>teal\u003C\u002Fcode> \u003Ccode>cyan\u003C\u002Fcode> \u003Ccode>sky\u003C\u002Fcode> \u003Ccode>blue\u003C\u002Fcode> \u003Ccode>indigo\u003C\u002Fcode> \u003Ccode>violet\u003C\u002Fcode> \u003Ccode>purple\u003C\u002Fcode> \u003Ccode>fuchsia\u003C\u002Fcode> \u003Ccode>pink\u003C\u002Fcode> \u003Ccode>rose\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp data-line=\"183\">\u003Cstrong>色阶\u003C\u002Fstrong>：\u003Ccode>50\u003C\u002Fcode> \u003Ccode>100\u003C\u002Fcode> \u003Ccode>200\u003C\u002Fcode> \u003Ccode>300\u003C\u002Fcode> \u003Ccode>400\u003C\u002Fcode> \u003Ccode>500\u003C\u002Fcode> \u003Ccode>600\u003C\u002Fcode> \u003Ccode>700\u003C\u002Fcode> \u003Ccode>800\u003C\u002Fcode> \u003Ccode>900\u003C\u002Fcode> \u003Ccode>950\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp data-line=\"185\">\u003Cstrong>示例\u003C\u002Fstrong>：\u003Ccode>bg-blue-500\u003C\u002Fcode> \u003Ccode>text-red-600\u003C\u002Fcode> \u003Ccode>border-green-400\u003C\u002Fcode>\u003C\u002Fp>\n\u003Chr data-line=\"187\">\n\u003Ch2 data-line=\"189\" id=\"🛠️ 状态修饰符\">🛠️ 状态修饰符\u003C\u002Fh2>\n\u003Ctable data-line=\"191\">\n\u003Cthead data-line=\"191\">\n\u003Ctr data-line=\"191\">\n\u003Cth style=\"text-align:left\">修饰符\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">说明\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">示例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"193\">\n\u003Ctr data-line=\"193\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>hover:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">鼠标悬停\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>hover:bg-blue-600\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"194\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>focus:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">获得焦点\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>focus:ring-2\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"195\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>active:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">激活状态\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>active:bg-blue-700\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"196\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>disabled:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">禁用状态\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>disabled:opacity-50\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"197\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>first:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">第一个子元素\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>first:mt-0\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"198\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>last:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">最后一个子元素\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>last:mb-0\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"199\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>odd:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">奇数项\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>odd:bg-gray-100\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"200\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>even:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">偶数项\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>even:bg-white\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"201\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>group-hover:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">父元素悬停\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>group-hover:visible\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"202\">\n\u003Ctd style=\"text-align:left\">\u003Ccode>peer-focus:\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">兄弟元素焦点\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>peer-focus:ring-2\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"204\">\n\u003Ch2 data-line=\"206\" id=\"🔧 实用工具\">🔧 实用工具\u003C\u002Fh2>\n\u003Ctable data-line=\"208\">\n\u003Cthead data-line=\"208\">\n\u003Ctr data-line=\"208\">\n\u003Cth style=\"text-align:left\">类别\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">类名\u003C\u002Fth>\n\u003Cth style=\"text-align:left\">说明\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody data-line=\"210\">\n\u003Ctr data-line=\"210\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>光标\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>cursor-auto\u003C\u002Fcode> \u003Ccode>default\u003C\u002Fcode> \u003Ccode>pointer\u003C\u002Fcode> \u003Ccode>wait\u003C\u002Fcode> \u003Ccode>text\u003C\u002Fcode> \u003Ccode>move\u003C\u002Fcode> \u003Ccode>not-allowed\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">鼠标样式\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"211\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>选择\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>select-none\u003C\u002Fcode> \u003Ccode>text\u003C\u002Fcode> \u003Ccode>all\u003C\u002Fcode> \u003Ccode>auto\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">文本选择\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"212\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>指针事件\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>pointer-events-none\u003C\u002Fcode> \u003Ccode>auto\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">指针事件\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"213\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>可见性\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>visible\u003C\u002Fcode> \u003Ccode>invisible\u003C\u002Fcode> \u003Ccode>collapse\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">可见性\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"214\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>溢出\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>overflow-auto\u003C\u002Fcode> \u003Ccode>hidden\u003C\u002Fcode> \u003Ccode>visible\u003C\u002Fcode> \u003Ccode>scroll\u003C\u002Fcode> \u003Ccode>overflow-x-auto\u003C\u002Fcode> \u003Ccode>overflow-y-hidden\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">溢出处理\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"215\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>滚动行为\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>scroll-auto\u003C\u002Fcode> \u003Ccode>scroll-smooth\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">滚动行为\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"216\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>调整大小\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>resize-none\u003C\u002Fcode> \u003Ccode>resize\u003C\u002Fcode> \u003Ccode>resize-y\u003C\u002Fcode> \u003Ccode>resize-x\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">调整大小\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr data-line=\"217\">\n\u003Ctd style=\"text-align:left\">\u003Cstrong>外观\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">\u003Ccode>appearance-none\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd style=\"text-align:left\">移除默认样式\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr data-line=\"219\">\n\u003Ch2 data-line=\"221\" id=\"📋 快速记忆口诀\">📋 快速记忆口诀\u003C\u002Fh2>\n\n        \u003Cdetails  data-line=\"223\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-\" language=>\u003Cspan class=\"md-editor-code-block\">布局：container \u003Cspan class=\"hljs-attribute\">flex\u003C\u002Fspan> \u003Cspan class=\"hljs-attribute\">grid\u003C\u002Fspan> relative absolute\n尺寸：w-full h-screen min-w-\u003Cspan class=\"hljs-number\">0\u003C\u002Fspan> max-w-\u003Cspan class=\"hljs-number\">7\u003C\u002Fspan>xl\n间距：\u003Cspan class=\"hljs-selector-tag\">p\u003C\u002Fspan>-\u003Cspan class=\"hljs-number\">4\u003C\u002Fspan> m-\u003Cspan class=\"hljs-number\">2\u003C\u002Fspan> px-\u003Cspan class=\"hljs-number\">6\u003C\u002Fspan> my-\u003Cspan class=\"hljs-number\">8\u003C\u002Fspan> \u003Cspan class=\"hljs-attribute\">gap\u003C\u002Fspan>-\u003Cspan class=\"hljs-number\">4\u003C\u002Fspan>\n颜色：bg-blue-\u003Cspan class=\"hljs-number\">500\u003C\u002Fspan> \u003Cspan class=\"hljs-selector-tag\">text\u003C\u002Fspan>-white \u003Cspan class=\"hljs-attribute\">border\u003C\u002Fspan>-gray-\u003Cspan class=\"hljs-number\">300\u003C\u002Fspan>\n文字：\u003Cspan class=\"hljs-selector-tag\">text\u003C\u002Fspan>-lg \u003Cspan class=\"hljs-attribute\">font\u003C\u002Fspan>-bold \u003Cspan class=\"hljs-selector-tag\">text\u003C\u002Fspan>-center leading-relaxed\n边框：rounded-lg \u003Cspan class=\"hljs-attribute\">border\u003C\u002Fspan>-\u003Cspan class=\"hljs-number\">2\u003C\u002Fspan> \u003Cspan class=\"hljs-attribute\">border\u003C\u002Fspan>-solid\n效果：shadow-lg \u003Cspan class=\"hljs-attribute\">opacity\u003C\u002Fspan>-\u003Cspan class=\"hljs-number\">75\u003C\u002Fspan> blur-md\n变换：\u003Cspan class=\"hljs-attribute\">scale\u003C\u002Fspan>-\u003Cspan class=\"hljs-number\">110\u003C\u002Fspan> \u003Cspan class=\"hljs-attribute\">rotate\u003C\u002Fspan>-\u003Cspan class=\"hljs-number\">45\u003C\u002Fspan> \u003Cspan class=\"hljs-attribute\">translate\u003C\u002Fspan>-\u003Cspan class=\"hljs-attribute\">x\u003C\u002Fspan>-\u003Cspan class=\"hljs-number\">4\u003C\u002Fspan>\n动画：\u003Cspan class=\"hljs-attribute\">transition\u003C\u002Fspan> duration-\u003Cspan class=\"hljs-number\">300\u003C\u002Fspan> ease-in-out hover:scale-\u003Cspan class=\"hljs-number\">105\u003C\u002Fspan>\n响应：sm: md: lg: xl: \u003Cspan class=\"hljs-number\">2\u003C\u002Fspan>xl:\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Cp data-line=\"236\">如需 \u003Cstrong>PDF 版本\u003C\u002Fstrong> 或 \u003Cstrong>特定分类的详细展开\u003C\u002Fstrong>，告诉我！\u003C\u002Fp>\n",8667,28,"0","",2,0,401,"示例,属性,xl,行,颜色","📐 布局 Layout\n\n\n\n类别\n常用类\n说明\n\n\n\n\n容器\ncontainer mx-auto px-4\n居中容器\n\n\n显示\nblock inline inline-block hidden flex grid table\n显示模式\n\n\n定位\nstatic relative absolute fixed sticky\n定位方式\n\n\n层级\nz-0 ~ z-50\nz-index\n\n\n\n\n📊 F","2026-04-08 11:14:02"]