ImQi1 常用库指南

主题

Tailwind CSS ​

传统的网页需要使用 HTML + CSS 构建，而我们一般将 CSS 文件单独存放，然后在 HTML 代码中引用。拿我的主站 ImQi1 来说，我的 CSS 放在了云存储中还有各种缓存，若样式有更新，最新的代码同步到客户端需要很费劲。有一种方法就是使用已经封装好的组件库，只需要记住 CSS 类名，然后在 CSS 中写好样式，再改变 HTML 代码中的结构，即可改变样式，这类 CSS 有一套很出名的框架叫 BootStrap。但是 BootStrap 是已经封装好的组件库，它和这里的 Tailwind CSS 不同。

Tailwind CSS 为每个 CSS 属性封装成了一个类，一个类就对应一种或多种 CSS 属性和值的组合。

比如我们想让一个盒子位于父盒子的中间，我们可以使用传统的 CSS：

css
.outer {
    display: flex;
    place-content: center;
    place-items: center;
}

而我们如果使用 Tailwind CSS，我们只需要为父盒子添加三个类名即可：flex、place-content-center、place-items-center。

它们相当于：

css
.flex {
    display: flex;
}

.place-content-center {
    place-content: center;
}

.place-items-center {
    place-items: center;
}

Tailwind CSS 为很多 CSS 都封装了类名，借助这些，我们只需要改变 HTML 元素的类名，就可以完成传统 HTML + CSS 才能完成的工作。

安装 ​

这里照例引出官方文档，由于本教程都是速查，只用最简单的语言教最基础、最实用的知识。TailWind CSS 的用法远不止于本教程罗列出的，想要更深入的学习，可以 手敲代码 + 阅读官方文档。

Tailwind CLI：

首先我们先通过 NPM 安装 Tailwind CSS 包。

shell
npm install -D tailwindcss
npx tailwindcss init

然后创建 tailwind.config.js 文件：

js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

然后在主 CSS 文件中添加 @tailwind 指令。

css
@tailwind base;
@tailwind components;
@tailwind utilities;

返回模板文件，扫描所有类名，然后编译。

shell
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

这里的主 CSS 文件为 input.css，输出文件为 output.css。

接下来引入编译好的 CSS 文件即可。

html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

我们也可以引用 Tailwind CSS 的 CDN，它是一个 JavaScript 文件，它也会自动地扫描文件中的所有类名然后输出为 style 标签。但不要将此 JS 文件直接用于生产环境中。

html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

这里的 https://cdn.tailwindcss.com 可以换成本站地址 https://static.qi1.website/js/tailwindcss.js 。

这里和开头介绍的可能有点矛盾：明明都说好了只通过更改 HTML 代码就可以改变整个网页的样式，到头来不还是要编辑 CSS 文件。在这里我的理解是，TailwindCSS 为我们省去了很多编写 CSS 的时间，但网页的 HTML 代码和 CSS 代码分开管理还是很有必要的。 Tailwind CSS 的作用就是只需编辑一个文件就可以改变样式，而不用使用传统的 “类” + “类的样式” 这样去改，而是 “类” -> “生成样式”。我也不知道这样说对不对，但是用了它就是很方便。

IDE 支持 ​

这里介绍两个 IDE，一个是大众普遍使用的 VS Code，另一个是我经常使用的 JetBrains IDE WebStorm。

VS Code：

这里需要使用 Tailwind CSS IntelliSense ，然后需要有 Tailwind CSS 配置文件，名称是 tailwind.config.{js|mjs|cjs|ts} 。

WebStorm：

首先安装 Tailwind CSS：

shell
npm install -D tailwindcss  # 安装 Tailwind CSS
npx tailwindcss init  # 生成 tailwind.config 文件

WebStorm 的代码自动补全功能将在 @apply指令被应用后在 HTML 文件和 CSS 文件中生效，它也会在 JS 中含有 HTML 代码的上下文生效。

配置文件 - 生成 ​

配置文件通过命令 npx tailwindcss init 生成，文件名为 tailwind.config.js，它是为了满足用户自定义需求的。

一个 Tailwind CSS 的配置文件可以是：

js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

配置的每一部分都是可选的，例如上面，colors 配置项替换了 Tailwind CSS 默认的颜色，fontFamily 配置项替换了默认的字体。

配置文件 - 主题 ​

上一节中，themes 配置项就是为主题配置颜色、字体用的，这里介绍些常用的，可在 themes 里面指定的。

screen 用于配置项目中的自定义断点。

js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

colors 用于配置项目的默认颜色。

js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}

themes 的其余部分用于配置每个核心插件可用的值。

如 borderRadius：

js
module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '.125rem',
      DEFAULT: '.25rem',
      'lg': '.5rem',
      'full': '9999px',
    },
  }
}

键决定生成的类的后缀，值决定实际CSS声明的值。

上面的示例 borderRadius 配置将生成以下CSS类：

css
.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: .125rem }
.rounded      { border-radius: .25rem }
.rounded-lg   { border-radius: .5rem }
.rounded-full { border-radius: 9999px }

核心概念 - 修饰符 ​

有人可能会问，Tailwind CSS 不就相当于内联样式吗，其实还是有点区别的，比如伪元素不能写在内联样式中，但是 Tailwind CSS 可以。

方法就是在类名的开头加一个修饰符加一个英文冒号，该修饰符就描述了对应元素处于的状态时应用后面的样式。

如：

html
<button class="bg-sky-500 hover:bg-sky-700 ...">
  Save changes
</button>

在 button 正常状态时，它将显示较浅的蓝色，但在悬浮在它上面时，它将显示为深一点的蓝色。

Tailwind CSS 支持很多修饰符：

  • 伪类，如 :hover，:focus，:first-child，和 :required
  • 伪元素，比如 ::before，::after，::placeholder，和 ::selection
  • 媒体和特性查询，如响应断点、黑暗模式和 prefers-reduced-motion
  • 属性选择器，如 [dir="rtl"] 和 [open]

它们还可以叠加，如在黑暗模式下该元素悬浮的样式：

html
<button class="dark:md:hover:bg-fuchsia-600 ...">
  Save changes
</button>

下面列举一些我觉得常用的修饰符：

  • 使用 hover 、 focus 和 active 修饰符样式悬停、焦点和活动元素。
  • 使用 first 和 last 修饰符为第一个子元素或最后一个子元素设计样式。
  • 使用 odd 和 even 修饰符对奇数或偶数子元素进行样式化。
  • 使用修饰符 required 、 invalid 和 disabled 为不同状态的表单元素添加样式。
  • 使用 before 和 after 修饰符样式 ::before 和 ::after 伪元素。
  • 使用 placeholder 修饰符为任何输入或文本区域的占位符文本设置样式。
  • 使用 marker 修饰符为列表中的计数器或项目符号设置样式。
  • 使用 selection 修饰符为当前文本选择设置样式。
  • 要在特定的断点处设置元素的样式，可以使用响应式修饰符，如 md 和 lg 。

核心概念 - 响应式设计 ​

首先要在 head 标签内引入下面的代码：

html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后，设置在每个断点处生效某个样式，就写成 断点 + : + 样式 的样子：

html
<!-- 默认宽度为16，中等屏幕为32，大屏幕为48 -->
<img class="w-16 md:w-32 lg:w-48" src="...">

默认情况下有五个断点，它们都是常见的设备分辨率：

断点前缀最小宽度CSS
sm640px@media (min-width: 640px) { ... }
md768px@media (min-width: 768px) { ... }
lg1024px@media (min-width: 1024px) { ... }
xl1280px@media (min-width: 1280px) { ... }
2xl1536px@media (min-width: 1536px) { ... }

我们也可以设定断点范围，在断点范围内应用样式。将响应式修饰符（如 md ）与 max-* 修饰符堆叠在一起，以将该样式限制在特定的范围内：

html
<div class="md:max-xl:flex">
    <!-- ... -->
</div>

可用的范围和它们对应的 CSS 代码：

修饰符媒体查询
max-sm@media not all and (min-width: 640px) { ... }
max-md@media not all and (min-width: 768px) { ... }
max-lg@media not all and (min-width: 1024px) { ... }
max-xl@media not all and (min-width: 1280px) { ... }
max-2xl@media not all and (min-width: 1536px) { ... }

核心概念 - 代码重用 ​

这里 Tailwind CSS 官方文档花费了大量篇幅介绍了其他重用样式的方法，目的是为了引出 Tailwind CSS 解决此问题的方式，在这里直接介绍。

如果我们使用了像 Vue 这样的前端框架，我们可以将这类重复的样式封装成一个组件，然后循环引入即可。

我们也可以使用 Tailwind CSS 提供的 @apply 指令来为一个自定义类名应用哪些 Tailwind CSS 预设的组件，如：

html
<!-- 抽象成类之前 -->
<button class="py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
    保存
</button>

<!-- 抽象成类之后 -->
<button class="btn-primary">
    保存
</button>
css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
  }
}

核心概念 - 黑暗模式 ​

现在，网页、操作系统普遍设计了暗黑模式，Tailwind CSS 包含了一个 dark 变体，可以让我们非常方便地设计网页的暗黑模式。

首先，在这里需要介绍一个 CSS 属性：prefers-color-scheme。MDN 上的 prefers-color-scheme

它是一个媒体查询属性。通过字面意思，它用于检测用户是否有将系统的主题色设置为亮色或者暗色。它有三个值：

  • no-preference：表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。
  • light：表示用户已告知系统他们选择使用浅色主题的界面。
  • dark：表示用户已告知系统他们选择使用暗色主题的界面。

这个例子使用了一个有黑色背景和白色文字的元素，当用户使用浅色主题时，会翻转黑白颜色。

html
<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div>
<br />

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

Tailwind CSS 的暗色模式就是通过该属性实现的，当然，我们也可以手动切换亮暗色模式，方法是通过改动 Tailwind CSS 配置文件实现。

js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'selector',
  // ...
}

现在，与基于 prefers-color-scheme 应用 dark:{class} 类不同，当 dark 类出现在 HTML 树的较早位置时，它们将被应用。

html
<!-- 未启用深色模式 -->
<html>
<body>
  <!-- 白色 -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- 已启用深色模式 -->
<html class="dark">
<body>
  <!-- 黑色 -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

如果在 Tailwind 配置中设置了前缀，请确保将其添加到 dark 类中。例如，tw- 前缀需要使用 tw-dark 类来启用暗模式。

selector 策略可用于支持用户的系统偏好或通过使用 window.matchMedia() API 手动选择模式。

下面是一个简单的例子，说明如何支持亮模式和暗模式，以及如何尊重操作系统偏好：

js
// 在页面加载或更改主题时，最好在“head”中添加内联以避免 FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// 当用户选择使用亮色模式
localStorage.theme = 'light'

// 当用户选择使用暗色模式
localStorage.theme = 'dark'

// 当用户明确选择尊重操作系统偏好时
localStorage.removeItem('theme')

布局 - display ​

下列介绍的类名，一般一个类名对应一个属性，比如 flex 类名对应的是 display: flex。从这里开始，下面只列举我在开发中常用的 CSS 样式，更多样式请前往 Tailwind CSS 官方文档查阅。

类对应的 CSS
blockdisplay: block;
inline-blockdisplay: inline-block;
inlinedisplay: inline;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
tabledisplay: table;
inline-tabledisplay: inline-table;
table-captiondisplay: table-caption;
table-celldisplay: table-cell;
table-columndisplay: table-column;
table-column-groupdisplay: table-column-group;
table-footer-groupdisplay: table-footer-group;
table-header-groupdisplay: table-header-group;
table-row-groupdisplay: table-row-group;
table-rowdisplay: table-row;
flow-rootdisplay: flow-root;
griddisplay: grid;
inline-griddisplay: inline-grid;
contentsdisplay: contents;
list-itemdisplay: list-item;
hiddendisplay: none;

布局 - 对象填充方式 ​

类对应的 CSS
object-containobject-fit: contain;
object-coverobject-fit: cover;
object-fillobject-fit: fill;
object-noneobject-fit: none;
object-scale-downobject-fit: scale-down;

布局 - 对象溢出方式 ​

类对应的 CSS
overflow-autooverflow: auto;
overflow-hiddenoverflow: hidden;
overflow-clipoverflow: clip;
overflow-visibleoverflow: visible;
overflow-scrolloverflow: scroll;
overflow-x-autooverflow-x: auto;
overflow-y-autooverflow-y: auto;
overflow-x-hiddenoverflow-x: hidden;
overflow-y-hiddenoverflow-y: hidden;
overflow-x-clipoverflow-x: clip;
overflow-y-clipoverflow-y: clip;
overflow-x-visibleoverflow-x: visible;
overflow-y-visibleoverflow-y: visible;
overflow-x-scrolloverflow-x: scroll;
overflow-y-scrolloverflow-y: scroll;

布局 - 定位 ​

类对应的 CSS
staticposition: static;
fixedposition: fixed;
absoluteposition: absolute;
relativeposition: relative;
stickyposition: sticky;

布局 - 上下左右 ​

类对应的 CSS
inset-0inset: 0px;
inset-x-0left: 0px; right: 0px;
inset-y-0top: 0px; bottom: 0px;
start-0inset-inline-start: 0px;
end-0inset-inline-end: 0px;
top-0top: 0px;
right-0right: 0px;
bottom-0bottom: 0px;
left-0left: 0px;
inset-pxinset: 1px;
inset-x-pxleft: 1px; right: 1px;
inset-y-pxtop: 1px; bottom: 1px;
start-pxinset-inline-start: 1px;
end-pxinset-inline-end: 1px;
top-pxtop: 1px;
right-pxright: 1px;
bottom-pxbottom: 1px;
left-pxleft: 1px;
inset-0.5inset: 0.125rem; /* 2px */
inset-x-0.5left: 0.125rem; /* 2px / right: 0.125rem; / 2px */
inset-y-0.5top: 0.125rem; /* 2px / bottom: 0.125rem; / 2px */
start-0.5inset-inline-start: 0.125rem; /* 2px */
end-0.5inset-inline-end: 0.125rem; /* 2px */
top-0.5top: 0.125rem; /* 2px */
right-0.5right: 0.125rem; /* 2px */
bottom-0.5bottom: 0.125rem; /* 2px */
left-0.5left: 0.125rem; /* 2px */
inset-1inset: 0.25rem; /* 4px */
inset-x-1left: 0.25rem; /* 4px / right: 0.25rem; / 4px */
inset-y-1top: 0.25rem; /* 4px / bottom: 0.25rem; / 4px */
start-1inset-inline-start: 0.25rem; /* 4px */
end-1inset-inline-end: 0.25rem; /* 4px */
top-1top: 0.25rem; /* 4px */
right-1right: 0.25rem; /* 4px */
bottom-1bottom: 0.25rem; /* 4px */
left-1left: 0.25rem; /* 4px */
inset-1.5inset: 0.375rem; /* 6px */
inset-x-1.5left: 0.375rem; /* 6px / right: 0.375rem; / 6px */
inset-y-1.5top: 0.375rem; /* 6px / bottom: 0.375rem; / 6px */
start-1.5inset-inline-start: 0.375rem; /* 6px */
end-1.5inset-inline-end: 0.375rem; /* 6px */
top-1.5top: 0.375rem; /* 6px */
right-1.5right: 0.375rem; /* 6px */
bottom-1.5bottom: 0.375rem; /* 6px */
left-1.5left: 0.375rem; /* 6px */
inset-2inset: 0.5rem; /* 8px */
inset-x-2left: 0.5rem; /* 8px / right: 0.5rem; / 8px */
inset-y-2top: 0.5rem; /* 8px / bottom: 0.5rem; / 8px */
start-2inset-inline-start: 0.5rem; /* 8px */
end-2inset-inline-end: 0.5rem; /* 8px */
top-2top: 0.5rem; /* 8px */
right-2right: 0.5rem; /* 8px */
bottom-2bottom: 0.5rem; /* 8px */
left-2left: 0.5rem; /* 8px */
inset-2.5inset: 0.625rem; /* 10px */
inset-x-2.5left: 0.625rem; /* 10px / right: 0.625rem; / 10px */
inset-y-2.5top: 0.625rem; /* 10px / bottom: 0.625rem; / 10px */
start-2.5inset-inline-start: 0.625rem; /* 10px */
end-2.5inset-inline-end: 0.625rem; /* 10px */
top-2.5top: 0.625rem; /* 10px */
right-2.5right: 0.625rem; /* 10px */
bottom-2.5bottom: 0.625rem; /* 10px */
left-2.5left: 0.625rem; /* 10px */
inset-3inset: 0.75rem; /* 12px */
inset-x-3left: 0.75rem; /* 12px / right: 0.75rem; / 12px */
inset-y-3top: 0.75rem; /* 12px / bottom: 0.75rem; / 12px */
start-3inset-inline-start: 0.75rem; /* 12px */
end-3inset-inline-end: 0.75rem; /* 12px */
top-3top: 0.75rem; /* 12px */
right-3right: 0.75rem; /* 12px */
bottom-3bottom: 0.75rem; /* 12px */
left-3left: 0.75rem; /* 12px */
inset-3.5inset: 0.875rem; /* 14px */
inset-x-3.5left: 0.875rem; /* 14px / right: 0.875rem; / 14px */
inset-y-3.5top: 0.875rem; /* 14px / bottom: 0.875rem; / 14px */
start-3.5inset-inline-start: 0.875rem; /* 14px */
end-3.5inset-inline-end: 0.875rem; /* 14px */
top-3.5top: 0.875rem; /* 14px */
right-3.5right: 0.875rem; /* 14px */
bottom-3.5bottom: 0.875rem; /* 14px */
left-3.5left: 0.875rem; /* 14px */
inset-4inset: 1rem; /* 16px */
inset-x-4left: 1rem; /* 16px / right: 1rem; / 16px */
inset-y-4top: 1rem; /* 16px / bottom: 1rem; / 16px */
start-4inset-inline-start: 1rem; /* 16px */
end-4inset-inline-end: 1rem; /* 16px */
top-4top: 1rem; /* 16px */
right-4right: 1rem; /* 16px */
bottom-4bottom: 1rem; /* 16px */
left-4left: 1rem; /* 16px */
inset-5inset: 1.25rem; /* 20px */
inset-x-5left: 1.25rem; /* 20px / right: 1.25rem; / 20px */
inset-y-5top: 1.25rem; /* 20px / bottom: 1.25rem; / 20px */
start-5inset-inline-start: 1.25rem; /* 20px */
end-5inset-inline-end: 1.25rem; /* 20px */
top-5top: 1.25rem; /* 20px */
right-5right: 1.25rem; /* 20px */
bottom-5bottom: 1.25rem; /* 20px */
left-5left: 1.25rem; /* 20px */
inset-6inset: 1.5rem; /* 24px */
inset-x-6left: 1.5rem; /* 24px / right: 1.5rem; / 24px */
inset-y-6top: 1.5rem; /* 24px / bottom: 1.5rem; / 24px */
start-6inset-inline-start: 1.5rem; /* 24px */
end-6inset-inline-end: 1.5rem; /* 24px */
top-6top: 1.5rem; /* 24px */
right-6right: 1.5rem; /* 24px */
bottom-6bottom: 1.5rem; /* 24px */
left-6left: 1.5rem; /* 24px */
inset-7inset: 1.75rem; /* 28px */
inset-x-7left: 1.75rem; /* 28px / right: 1.75rem; / 28px */
inset-y-7top: 1.75rem; /* 28px / bottom: 1.75rem; / 28px */
start-7inset-inline-start: 1.75rem; /* 28px */
end-7inset-inline-end: 1.75rem; /* 28px */
top-7top: 1.75rem; /* 28px */
right-7right: 1.75rem; /* 28px */
bottom-7bottom: 1.75rem; /* 28px */
left-7left: 1.75rem; /* 28px */
inset-8inset: 2rem; /* 32px */
inset-x-8left: 2rem; /* 32px / right: 2rem; / 32px */
inset-y-8top: 2rem; /* 32px / bottom: 2rem; / 32px */
start-8inset-inline-start: 2rem; /* 32px */
end-8inset-inline-end: 2rem; /* 32px */
top-8top: 2rem; /* 32px */
right-8right: 2rem; /* 32px */
bottom-8bottom: 2rem; /* 32px */
left-8left: 2rem; /* 32px */
inset-9inset: 2.25rem; /* 36px */
inset-x-9left: 2.25rem; /* 36px / right: 2.25rem; / 36px */
inset-y-9top: 2.25rem; /* 36px / bottom: 2.25rem; / 36px */
start-9inset-inline-start: 2.25rem; /* 36px */
end-9inset-inline-end: 2.25rem; /* 36px */
top-9top: 2.25rem; /* 36px */
right-9right: 2.25rem; /* 36px */
bottom-9bottom: 2.25rem; /* 36px */
left-9left: 2.25rem; /* 36px */
inset-10inset: 2.5rem; /* 40px */
inset-x-10left: 2.5rem; /* 40px / right: 2.5rem; / 40px */
inset-y-10top: 2.5rem; /* 40px / bottom: 2.5rem; / 40px */
start-10inset-inline-start: 2.5rem; /* 40px */
end-10inset-inline-end: 2.5rem; /* 40px */
top-10top: 2.5rem; /* 40px */
right-10right: 2.5rem; /* 40px */
bottom-10bottom: 2.5rem; /* 40px */
left-10left: 2.5rem; /* 40px */
inset-11inset: 2.75rem; /* 44px */
inset-x-11left: 2.75rem; /* 44px / right: 2.75rem; / 44px */
inset-y-11top: 2.75rem; /* 44px / bottom: 2.75rem; / 44px */
start-11inset-inline-start: 2.75rem; /* 44px */
end-11inset-inline-end: 2.75rem; /* 44px */
top-11top: 2.75rem; /* 44px */
right-11right: 2.75rem; /* 44px */
bottom-11bottom: 2.75rem; /* 44px */
left-11left: 2.75rem; /* 44px */
inset-12inset: 3rem; /* 48px */
inset-x-12left: 3rem; /* 48px / right: 3rem; / 48px */
inset-y-12top: 3rem; /* 48px / bottom: 3rem; / 48px */
start-12inset-inline-start: 3rem; /* 48px */
end-12inset-inline-end: 3rem; /* 48px */
top-12top: 3rem; /* 48px */
right-12right: 3rem; /* 48px */
bottom-12bottom: 3rem; /* 48px */
left-12left: 3rem; /* 48px */
inset-14inset: 3.5rem; /* 56px */
inset-x-14left: 3.5rem; /* 56px / right: 3.5rem; / 56px */
inset-y-14top: 3.5rem; /* 56px / bottom: 3.5rem; / 56px */
start-14inset-inline-start: 3.5rem; /* 56px */
end-14inset-inline-end: 3.5rem; /* 56px */
top-14top: 3.5rem; /* 56px */
right-14right: 3.5rem; /* 56px */
bottom-14bottom: 3.5rem; /* 56px */
left-14left: 3.5rem; /* 56px */
inset-16inset: 4rem; /* 64px */
inset-x-16left: 4rem; /* 64px / right: 4rem; / 64px */
inset-y-16top: 4rem; /* 64px / bottom: 4rem; / 64px */
start-16inset-inline-start: 4rem; /* 64px */
end-16inset-inline-end: 4rem; /* 64px */
top-16top: 4rem; /* 64px */
right-16right: 4rem; /* 64px */
bottom-16bottom: 4rem; /* 64px */
left-16left: 4rem; /* 64px */
inset-20inset: 5rem; /* 80px */
inset-x-20left: 5rem; /* 80px / right: 5rem; / 80px */
inset-y-20top: 5rem; /* 80px / bottom: 5rem; / 80px */
start-20inset-inline-start: 5rem; /* 80px */
end-20inset-inline-end: 5rem; /* 80px */
top-20top: 5rem; /* 80px */
right-20right: 5rem; /* 80px */
bottom-20bottom: 5rem; /* 80px */
left-20left: 5rem; /* 80px */
inset-24inset: 6rem; /* 96px */
inset-x-24left: 6rem; /* 96px / right: 6rem; / 96px */
inset-y-24top: 6rem; /* 96px / bottom: 6rem; / 96px */
start-24inset-inline-start: 6rem; /* 96px */
end-24inset-inline-end: 6rem; /* 96px */
top-24top: 6rem; /* 96px */
right-24right: 6rem; /* 96px */
bottom-24bottom: 6rem; /* 96px */
left-24left: 6rem; /* 96px */
inset-28inset: 7rem; /* 112px */
inset-x-28left: 7rem; /* 112px / right: 7rem; / 112px */
inset-y-28top: 7rem; /* 112px / bottom: 7rem; / 112px */
start-28inset-inline-start: 7rem; /* 112px */
end-28inset-inline-end: 7rem; /* 112px */
top-28top: 7rem; /* 112px */
right-28right: 7rem; /* 112px */
bottom-28bottom: 7rem; /* 112px */
left-28left: 7rem; /* 112px */
inset-32inset: 8rem; /* 128px */
inset-x-32left: 8rem; /* 128px / right: 8rem; / 128px */
inset-y-32top: 8rem; /* 128px / bottom: 8rem; / 128px */
start-32inset-inline-start: 8rem; /* 128px */
end-32inset-inline-end: 8rem; /* 128px */
top-32top: 8rem; /* 128px */
right-32right: 8rem; /* 128px */
bottom-32bottom: 8rem; /* 128px */
left-32left: 8rem; /* 128px */
inset-36inset: 9rem; /* 144px */
inset-x-36left: 9rem; /* 144px / right: 9rem; / 144px */
inset-y-36top: 9rem; /* 144px / bottom: 9rem; / 144px */
start-36inset-inline-start: 9rem; /* 144px */
end-36inset-inline-end: 9rem; /* 144px */
top-36top: 9rem; /* 144px */
right-36right: 9rem; /* 144px */
bottom-36bottom: 9rem; /* 144px */
left-36left: 9rem; /* 144px */
inset-40inset: 10rem; /* 160px */
inset-x-40left: 10rem; /* 160px / right: 10rem; / 160px */
inset-y-40top: 10rem; /* 160px / bottom: 10rem; / 160px */
start-40inset-inline-start: 10rem; /* 160px */
end-40inset-inline-end: 10rem; /* 160px */
top-40top: 10rem; /* 160px */
right-40right: 10rem; /* 160px */
bottom-40bottom: 10rem; /* 160px */
left-40left: 10rem; /* 160px */
inset-44inset: 11rem; /* 176px */
inset-x-44left: 11rem; /* 176px / right: 11rem; / 176px */
inset-y-44top: 11rem; /* 176px / bottom: 11rem; / 176px */
start-44inset-inline-start: 11rem; /* 176px */
end-44inset-inline-end: 11rem; /* 176px */
top-44top: 11rem; /* 176px */
right-44right: 11rem; /* 176px */
bottom-44bottom: 11rem; /* 176px */
left-44left: 11rem; /* 176px */
inset-48inset: 12rem; /* 192px */
inset-x-48left: 12rem; /* 192px / right: 12rem; / 192px */
inset-y-48top: 12rem; /* 192px / bottom: 12rem; / 192px */
start-48inset-inline-start: 12rem; /* 192px */
end-48inset-inline-end: 12rem; /* 192px */
top-48top: 12rem; /* 192px */
right-48right: 12rem; /* 192px */
bottom-48bottom: 12rem; /* 192px */
left-48left: 12rem; /* 192px */
inset-52inset: 13rem; /* 208px */
inset-x-52left: 13rem; /* 208px / right: 13rem; / 208px */
inset-y-52top: 13rem; /* 208px / bottom: 13rem; / 208px */
start-52inset-inline-start: 13rem; /* 208px */
end-52inset-inline-end: 13rem; /* 208px */
top-52top: 13rem; /* 208px */
right-52right: 13rem; /* 208px */
bottom-52bottom: 13rem; /* 208px */
left-52left: 13rem; /* 208px */
inset-56inset: 14rem; /* 224px */
inset-x-56left: 14rem; /* 224px / right: 14rem; / 224px */
inset-y-56top: 14rem; /* 224px / bottom: 14rem; / 224px */
start-56inset-inline-start: 14rem; /* 224px */
end-56inset-inline-end: 14rem; /* 224px */
top-56top: 14rem; /* 224px */
right-56right: 14rem; /* 224px */
bottom-56bottom: 14rem; /* 224px */
left-56left: 14rem; /* 224px */
inset-60inset: 15rem; /* 240px */
inset-x-60left: 15rem; /* 240px / right: 15rem; / 240px */
inset-y-60top: 15rem; /* 240px / bottom: 15rem; / 240px */
start-60inset-inline-start: 15rem; /* 240px */
end-60inset-inline-end: 15rem; /* 240px */
top-60top: 15rem; /* 240px */
right-60right: 15rem; /* 240px */
bottom-60bottom: 15rem; /* 240px */
left-60left: 15rem; /* 240px */
inset-64inset: 16rem; /* 256px */
inset-x-64left: 16rem; /* 256px / right: 16rem; / 256px */
inset-y-64top: 16rem; /* 256px / bottom: 16rem; / 256px */
start-64inset-inline-start: 16rem; /* 256px */
end-64inset-inline-end: 16rem; /* 256px */
top-64top: 16rem; /* 256px */
right-64right: 16rem; /* 256px */
bottom-64bottom: 16rem; /* 256px */
left-64left: 16rem; /* 256px */
inset-72inset: 18rem; /* 288px */
inset-x-72left: 18rem; /* 288px / right: 18rem; / 288px */
inset-y-72top: 18rem; /* 288px / bottom: 18rem; / 288px */
start-72inset-inline-start: 18rem; /* 288px */
end-72inset-inline-end: 18rem; /* 288px */
top-72top: 18rem; /* 288px */
right-72right: 18rem; /* 288px */
bottom-72bottom: 18rem; /* 288px */
left-72left: 18rem; /* 288px */
inset-80inset: 20rem; /* 320px */
inset-x-80left: 20rem; /* 320px / right: 20rem; / 320px */
inset-y-80top: 20rem; /* 320px / bottom: 20rem; / 320px */
start-80inset-inline-start: 20rem; /* 320px */
end-80inset-inline-end: 20rem; /* 320px */
top-80top: 20rem; /* 320px */
right-80right: 20rem; /* 320px */
bottom-80bottom: 20rem; /* 320px */
left-80left: 20rem; /* 320px */
inset-96inset: 24rem; /* 384px */
inset-x-96left: 24rem; /* 384px / right: 24rem; / 384px */
inset-y-96top: 24rem; /* 384px / bottom: 24rem; / 384px */
start-96inset-inline-start: 24rem; /* 384px */
end-96inset-inline-end: 24rem; /* 384px */
top-96top: 24rem; /* 384px */
right-96right: 24rem; /* 384px */
bottom-96bottom: 24rem; /* 384px */
left-96left: 24rem; /* 384px */
inset-autoinset: auto;
inset-1/2inset: 50%;
inset-1/3inset: 33.333333%;
inset-2/3inset: 66.666667%;
inset-1/4inset: 25%;
inset-2/4inset: 50%;
inset-3/4inset: 75%;
inset-fullinset: 100%;
inset-x-autoleft: auto; right: auto;
inset-x-1/2left: 50%; right: 50%;
inset-x-1/3left: 33.333333%; right: 33.333333%;
inset-x-2/3left: 66.666667%; right: 66.666667%;
inset-x-1/4left: 25%; right: 25%;
inset-x-2/4left: 50%; right: 50%;
inset-x-3/4left: 75%; right: 75%;
inset-x-fullleft: 100%; right: 100%;
inset-y-autotop: auto; bottom: auto;
inset-y-1/2top: 50%; bottom: 50%;
inset-y-1/3top: 33.333333%; bottom: 33.333333%;
inset-y-2/3top: 66.666667%; bottom: 66.666667%;
inset-y-1/4top: 25%; bottom: 25%;
inset-y-2/4top: 50%; bottom: 50%;
inset-y-3/4top: 75%; bottom: 75%;
inset-y-fulltop: 100%; bottom: 100%;
start-autoinset-inline-start: auto;
start-1/2inset-inline-start: 50%;
start-1/3inset-inline-start: 33.333333%;
start-2/3inset-inline-start: 66.666667%;
start-1/4inset-inline-start: 25%;
start-2/4inset-inline-start: 50%;
start-3/4inset-inline-start: 75%;
start-fullinset-inline-start: 100%;
end-autoinset-inline-end: auto;
end-1/2inset-inline-end: 50%;
end-1/3inset-inline-end: 33.333333%;
end-2/3inset-inline-end: 66.666667%;
end-1/4inset-inline-end: 25%;
end-2/4inset-inline-end: 50%;
end-3/4inset-inline-end: 75%;
end-fullinset-inline-end: 100%;
top-autotop: auto;
top-1/2top: 50%;
top-1/3top: 33.333333%;
top-2/3top: 66.666667%;
top-1/4top: 25%;
top-2/4top: 50%;
top-3/4top: 75%;
top-fulltop: 100%;
right-autoright: auto;
right-1/2right: 50%;
right-1/3right: 33.333333%;
right-2/3right: 66.666667%;
right-1/4right: 25%;
right-2/4right: 50%;
right-3/4right: 75%;
right-fullright: 100%;
bottom-autobottom: auto;
bottom-1/2bottom: 50%;
bottom-1/3bottom: 33.333333%;
bottom-2/3bottom: 66.666667%;
bottom-1/4bottom: 25%;
bottom-2/4bottom: 50%;
bottom-3/4bottom: 75%;
bottom-fullbottom: 100%;
left-autoleft: auto;
left-1/2left: 50%;
left-1/3left: 33.333333%;
left-2/3left: 66.666667%;
left-1/4left: 25%;
left-2/4left: 50%;
left-3/4left: 75%;
left-fullleft: 100%;

布局 - 可见性 ​

类对应的 CSS
visiblevisibility: visible;
invisiblevisibility: hidden;
collapsevisibility: collapse;

布局 - 层级 ​

类对应的 CSS
z-0z-index: 0;
z-10z-index: 10;
z-20z-index: 20;
z-30z-index: 30;
z-40z-index: 40;
z-50z-index: 50;
z-autoz-index: auto;

Flex 布局 - Basis ​

类对应的 CSS
basis-0flex-basis: 0px;
basis-1flex-basis: 0.25rem; /* 4px */
basis-2flex-basis: 0.5rem; /* 8px */
basis-3flex-basis: 0.75rem; /* 12px */
basis-4flex-basis: 1rem; /* 16px */
basis-5flex-basis: 1.25rem; /* 20px */
basis-6flex-basis: 1.5rem; /* 24px */
basis-7flex-basis: 1.75rem; /* 28px */
basis-8flex-basis: 2rem; /* 32px */
basis-9flex-basis: 2.25rem; /* 36px */
basis-10flex-basis: 2.5rem; /* 40px */
basis-11flex-basis: 2.75rem; /* 44px */
basis-12flex-basis: 3rem; /* 48px */
basis-14flex-basis: 3.5rem; /* 56px */
basis-16flex-basis: 4rem; /* 64px */
basis-20flex-basis: 5rem; /* 80px */
basis-24flex-basis: 6rem; /* 96px */
basis-28flex-basis: 7rem; /* 112px */
basis-32flex-basis: 8rem; /* 128px */
basis-36flex-basis: 9rem; /* 144px */
basis-40flex-basis: 10rem; /* 160px */
basis-44flex-basis: 11rem; /* 176px */
basis-48flex-basis: 12rem; /* 192px */
basis-52flex-basis: 13rem; /* 208px */
basis-56flex-basis: 14rem; /* 224px */
basis-60flex-basis: 15rem; /* 240px */
basis-64flex-basis: 16rem; /* 256px */
basis-72flex-basis: 18rem; /* 288px */
basis-80flex-basis: 20rem; /* 320px */
basis-96flex-basis: 24rem; /* 384px */
basis-autoflex-basis: auto;
basis-pxflex-basis: 1px;
basis-0.5flex-basis: 0.125rem; /* 2px */
basis-1.5flex-basis: 0.375rem; /* 6px */
basis-2.5flex-basis: 0.625rem; /* 10px */
basis-3.5flex-basis: 0.875rem; /* 14px */
basis-1/2flex-basis: 50%;
basis-1/3flex-basis: 33.333333%;
basis-2/3flex-basis: 66.666667%;
basis-1/4flex-basis: 25%;
basis-2/4flex-basis: 50%;
basis-3/4flex-basis: 75%;
basis-1/5flex-basis: 20%;
basis-2/5flex-basis: 40%;
basis-3/5flex-basis: 60%;
basis-4/5flex-basis: 80%;
basis-1/6flex-basis: 16.666667%;
basis-2/6flex-basis: 33.333333%;
basis-3/6flex-basis: 50%;
basis-4/6flex-basis: 66.666667%;
basis-5/6flex-basis: 83.333333%;
basis-1/12flex-basis: 8.333333%;
basis-2/12flex-basis: 16.666667%;
basis-3/12flex-basis: 25%;
basis-4/12flex-basis: 33.333333%;
basis-5/12flex-basis: 41.666667%;
basis-6/12flex-basis: 50%;
basis-7/12flex-basis: 58.333333%;
basis-8/12flex-basis: 66.666667%;
basis-9/12flex-basis: 75%;
basis-10/12flex-basis: 83.333333%;
basis-11/12flex-basis: 91.666667%;
basis-fullflex-basis: 100%;

Flex 布局 - Flex 其他属性 ​

类对应的 CSS
flex-rowflex-direction: row;
flex-row-reverseflex-direction: row-reverse;
flex-colflex-direction: column;
flex-col-reverseflex-direction: column-reverse;
flex-wrapflex-wrap: wrap;
flex-wrap-reverseflex-wrap: wrap-reverse;
flex-nowrapflex-wrap: nowrap;
growflex-grow: 1;
grow-0flex-grow: 0;
shrinkflex-shrink: 1;
shrink-0flex-shrink: 0;

Gird 布局 - 模板列 ​

类对应的 CSS
grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-nonegrid-template-columns: none;
grid-cols-subgridgrid-template-columns: subgrid;

Grid 布局 - 网格列开始/结束 ​

类对应的 CSS
col-autogrid-column: auto;
col-span-1grid-column: span 1 / span 1;
col-span-2grid-column: span 2 / span 2;
col-span-3grid-column: span 3 / span 3;
col-span-4grid-column: span 4 / span 4;
col-span-5grid-column: span 5 / span 5;
col-span-6grid-column: span 6 / span 6;
col-span-7grid-column: span 7 / span 7;
col-span-8grid-column: span 8 / span 8;
col-span-9grid-column: span 9 / span 9;
col-span-10grid-column: span 10 / span 10;
col-span-11grid-column: span 11 / span 11;
col-span-12grid-column: span 12 / span 12;
col-span-fullgrid-column: 1 / -1;
col-start-1grid-column-start: 1;
col-start-2grid-column-start: 2;
col-start-3grid-column-start: 3;
col-start-4grid-column-start: 4;
col-start-5grid-column-start: 5;
col-start-6grid-column-start: 6;
col-start-7grid-column-start: 7;
col-start-8grid-column-start: 8;
col-start-9grid-column-start: 9;
col-start-10grid-column-start: 10;
col-start-11grid-column-start: 11;
col-start-12grid-column-start: 12;
col-start-13grid-column-start: 13;
col-start-autogrid-column-start: auto;
col-end-1grid-column-end: 1;
col-end-2grid-column-end: 2;
col-end-3grid-column-end: 3;
col-end-4grid-column-end: 4;
col-end-5grid-column-end: 5;
col-end-6grid-column-end: 6;
col-end-7grid-column-end: 7;
col-end-8grid-column-end: 8;
col-end-9grid-column-end: 9;
col-end-10grid-column-end: 10;
col-end-11grid-column-end: 11;
col-end-12grid-column-end: 12;
col-end-13grid-column-end: 13;
col-end-autogrid-column-end: auto;

Grid - 模板行 ​

类对应的 CSS
grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-7grid-template-rows: repeat(7, minmax(0, 1fr));
grid-rows-8grid-template-rows: repeat(8, minmax(0, 1fr));
grid-rows-9grid-template-rows: repeat(9, minmax(0, 1fr));
grid-rows-10grid-template-rows: repeat(10, minmax(0, 1fr));
grid-rows-11grid-template-rows: repeat(11, minmax(0, 1fr));
grid-rows-12grid-template-rows: repeat(12, minmax(0, 1fr));
grid-rows-nonegrid-template-rows: none;
grid-rows-subgridgrid-template-rows: subgrid;

Grid - 表格开始 / 结束 ​

类对应的 CSS
row-autogrid-row: auto;
row-span-1grid-row: span 1 / span 1;
row-span-2grid-row: span 2 / span 2;
row-span-3grid-row: span 3 / span 3;
row-span-4grid-row: span 4 / span 4;
row-span-5grid-row: span 5 / span 5;
row-span-6grid-row: span 6 / span 6;
row-span-7grid-row: span 7 / span 7;
row-span-8grid-row: span 8 / span 8;
row-span-9grid-row: span 9 / span 9;
row-span-10grid-row: span 10 / span 10;
row-span-11grid-row: span 11 / span 11;
row-span-12grid-row: span 12 / span 12;
row-span-fullgrid-row: 1 / -1;
row-start-1grid-row-start: 1;
row-start-2grid-row-start: 2;
row-start-3grid-row-start: 3;
row-start-4grid-row-start: 4;
row-start-5grid-row-start: 5;
row-start-6grid-row-start: 6;
row-start-7grid-row-start: 7;
row-start-8grid-row-start: 8;
row-start-9grid-row-start: 9;
row-start-10grid-row-start: 10;
row-start-11grid-row-start: 11;
row-start-12grid-row-start: 12;
row-start-13grid-row-start: 13;
row-start-autogrid-row-start: auto;
row-end-1grid-row-end: 1;
row-end-2grid-row-end: 2;
row-end-3grid-row-end: 3;
row-end-4grid-row-end: 4;
row-end-5grid-row-end: 5;
row-end-6grid-row-end: 6;
row-end-7grid-row-end: 7;
row-end-8grid-row-end: 8;
row-end-9grid-row-end: 9;
row-end-10grid-row-end: 10;
row-end-11grid-row-end: 11;
row-end-12grid-row-end: 12;
row-end-13grid-row-end: 13;
row-end-autogrid-row-end: auto;

Flex & Grid - 间隙 ​

类对应的 CSS
gap-0gap: 0px;
gap-x-0column-gap: 0px;
gap-y-0row-gap: 0px;
gap-pxgap: 1px;
gap-x-pxcolumn-gap: 1px;
gap-y-pxrow-gap: 1px;
gap-0.5gap: 0.125rem; /* 2px */
gap-x-0.5column-gap: 0.125rem; /* 2px */
gap-y-0.5row-gap: 0.125rem; /* 2px */
gap-1gap: 0.25rem; /* 4px */
gap-x-1column-gap: 0.25rem; /* 4px */
gap-y-1row-gap: 0.25rem; /* 4px */
gap-1.5gap: 0.375rem; /* 6px */
gap-x-1.5column-gap: 0.375rem; /* 6px */
gap-y-1.5row-gap: 0.375rem; /* 6px */
gap-2gap: 0.5rem; /* 8px */
gap-x-2column-gap: 0.5rem; /* 8px */
gap-y-2row-gap: 0.5rem; /* 8px */
gap-2.5gap: 0.625rem; /* 10px */
gap-x-2.5column-gap: 0.625rem; /* 10px */
gap-y-2.5row-gap: 0.625rem; /* 10px */
gap-3gap: 0.75rem; /* 12px */
gap-x-3column-gap: 0.75rem; /* 12px */
gap-y-3row-gap: 0.75rem; /* 12px */
gap-3.5gap: 0.875rem; /* 14px */
gap-x-3.5column-gap: 0.875rem; /* 14px */
gap-y-3.5row-gap: 0.875rem; /* 14px */
gap-4gap: 1rem; /* 16px */
gap-x-4column-gap: 1rem; /* 16px */
gap-y-4row-gap: 1rem; /* 16px */
gap-5gap: 1.25rem; /* 20px */
gap-x-5column-gap: 1.25rem; /* 20px */
gap-y-5row-gap: 1.25rem; /* 20px */
gap-6gap: 1.5rem; /* 24px */
gap-x-6column-gap: 1.5rem; /* 24px */
gap-y-6row-gap: 1.5rem; /* 24px */
gap-7gap: 1.75rem; /* 28px */
gap-x-7column-gap: 1.75rem; /* 28px */
gap-y-7row-gap: 1.75rem; /* 28px */
gap-8gap: 2rem; /* 32px */
gap-x-8column-gap: 2rem; /* 32px */
gap-y-8row-gap: 2rem; /* 32px */
gap-9gap: 2.25rem; /* 36px */
gap-x-9column-gap: 2.25rem; /* 36px */
gap-y-9row-gap: 2.25rem; /* 36px */
gap-10gap: 2.5rem; /* 40px */
gap-x-10column-gap: 2.5rem; /* 40px */
gap-y-10row-gap: 2.5rem; /* 40px */
gap-11gap: 2.75rem; /* 44px */
gap-x-11column-gap: 2.75rem; /* 44px */
gap-y-11row-gap: 2.75rem; /* 44px */
gap-12gap: 3rem; /* 48px */
gap-x-12column-gap: 3rem; /* 48px */
gap-y-12row-gap: 3rem; /* 48px */
gap-14gap: 3.5rem; /* 56px */
gap-x-14column-gap: 3.5rem; /* 56px */
gap-y-14row-gap: 3.5rem; /* 56px */
gap-16gap: 4rem; /* 64px */
gap-x-16column-gap: 4rem; /* 64px */
gap-y-16row-gap: 4rem; /* 64px */
gap-20gap: 5rem; /* 80px */
gap-x-20column-gap: 5rem; /* 80px */
gap-y-20row-gap: 5rem; /* 80px */
gap-24gap: 6rem; /* 96px */
gap-x-24column-gap: 6rem; /* 96px */
gap-y-24row-gap: 6rem; /* 96px */
gap-28gap: 7rem; /* 112px */
gap-x-28column-gap: 7rem; /* 112px */
gap-y-28row-gap: 7rem; /* 112px */
gap-32gap: 8rem; /* 128px */
gap-x-32column-gap: 8rem; /* 128px */
gap-y-32row-gap: 8rem; /* 128px */
gap-36gap: 9rem; /* 144px */
gap-x-36column-gap: 9rem; /* 144px */
gap-y-36row-gap: 9rem; /* 144px */
gap-40gap: 10rem; /* 160px */
gap-x-40column-gap: 10rem; /* 160px */
gap-y-40row-gap: 10rem; /* 160px */
gap-44gap: 11rem; /* 176px */
gap-x-44column-gap: 11rem; /* 176px */
gap-y-44row-gap: 11rem; /* 176px */
gap-48gap: 12rem; /* 192px */
gap-x-48column-gap: 12rem; /* 192px */
gap-y-48row-gap: 12rem; /* 192px */
gap-52gap: 13rem; /* 208px */
gap-x-52column-gap: 13rem; /* 208px */
gap-y-52row-gap: 13rem; /* 208px */
gap-56gap: 14rem; /* 224px */
gap-x-56column-gap: 14rem; /* 224px */
gap-y-56row-gap: 14rem; /* 224px */
gap-60gap: 15rem; /* 240px */
gap-x-60column-gap: 15rem; /* 240px */
gap-y-60row-gap: 15rem; /* 240px */
gap-64gap: 16rem; /* 256px */
gap-x-64column-gap: 16rem; /* 256px */
gap-y-64row-gap: 16rem; /* 256px */
gap-72gap: 18rem; /* 288px */
gap-x-72column-gap: 18rem; /* 288px */
gap-y-72row-gap: 18rem; /* 288px */
gap-80gap: 20rem; /* 320px */
gap-x-80column-gap: 20rem; /* 320px */
gap-y-80row-gap: 20rem; /* 320px */
gap-96gap: 24rem; /* 384px */
gap-x-96column-gap: 24rem; /* 384px */
gap-y-96row-gap: 24rem; /* 384px */

Flex & Grid - 调整内容和项目 ​

类对应的 CSS
justify-normaljustify-content: normal;
justify-startjustify-content: flex-start;
justify-endjustify-content: flex-end;
justify-centerjustify-content: center;
justify-betweenjustify-content: space-between;
justify-aroundjustify-content: space-around;
justify-evenlyjustify-content: space-evenly;
justify-stretchjustify-content: stretch;
justify-items-startjustify-items: start;
justify-items-endjustify-items: end;
justify-items-centerjustify-items: center;
justify-items-stretchjustify-items: stretch;
justify-self-autojustify-self: auto;
justify-self-startjustify-self: start;
justify-self-endjustify-self: end;
justify-self-centerjustify-self: center;
justify-self-stretchjustify-self: stretch;

Flex & Grid - 对齐 ​

类对应的 CSS
content-normalalign-content: normal;
content-centeralign-content: center;
content-startalign-content: flex-start;
content-endalign-content: flex-end;
content-betweenalign-content: space-between;
content-aroundalign-content: space-around;
content-evenlyalign-content: space-evenly;
content-baselinealign-content: baseline;
content-stretchalign-content: stretch;
items-startalign-items: flex-start;
items-endalign-items: flex-end;
items-centeralign-items: center;
items-baselinealign-items: baseline;
items-stretchalign-items: stretch;
self-autoalign-self: auto;
self-startalign-self: flex-start;
self-endalign-self: flex-end;
self-centeralign-self: center;
self-stretchalign-self: stretch;
self-baselinealign-self: baseline;

Flex & Grid - 放置 ​

类对应的 CSS
place-items-startplace-items: start;
place-items-endplace-items: end;
place-items-centerplace-items: center;
place-items-baselineplace-items: baseline;
place-items-stretchplace-items: stretch;
place-content-centerplace-content: center;
place-content-startplace-content: start;
place-content-endplace-content: end;
place-content-betweenplace-content: space-between;
place-content-aroundplace-content: space-around;
place-content-evenlyplace-content: space-evenly;
place-content-baselineplace-content: baseline;
place-content-stretchplace-content: stretch;
place-self-autoplace-self: auto;
place-self-startplace-self: start;
place-self-endplace-self: end;
place-self-centerplace-self: center;
place-self-stretchplace-self: stretch;

间距 - 填充 ​

类对应的 CSS
p-0padding: 0px;
px-0padding-left: 0px; padding-right: 0px;
py-0padding-top: 0px; padding-bottom: 0px;
ps-0padding-inline-start: 0px;
pe-0padding-inline-end: 0px;
pt-0padding-top: 0px;
pr-0padding-right: 0px;
pb-0padding-bottom: 0px;
pl-0padding-left: 0px;
p-pxpadding: 1px;
px-pxpadding-left: 1px; padding-right: 1px;
py-pxpadding-top: 1px; padding-bottom: 1px;
ps-pxpadding-inline-start: 1px;
pe-pxpadding-inline-end: 1px;
pt-pxpadding-top: 1px;
pr-pxpadding-right: 1px;
pb-pxpadding-bottom: 1px;
pl-pxpadding-left: 1px;
p-0.5padding: 0.125rem; /* 2px */
px-0.5padding-left: 0.125rem; /* 2px / padding-right: 0.125rem; / 2px */
py-0.5padding-top: 0.125rem; /* 2px / padding-bottom: 0.125rem; / 2px */
ps-0.5padding-inline-start: 0.125rem; /* 2px */
pe-0.5padding-inline-end: 0.125rem; /* 2px */
pt-0.5padding-top: 0.125rem; /* 2px */
pr-0.5padding-right: 0.125rem; /* 2px */
pb-0.5padding-bottom: 0.125rem; /* 2px */
pl-0.5padding-left: 0.125rem; /* 2px */
p-1padding: 0.25rem; /* 4px */
px-1padding-left: 0.25rem; /* 4px / padding-right: 0.25rem; / 4px */
py-1padding-top: 0.25rem; /* 4px / padding-bottom: 0.25rem; / 4px */
ps-1padding-inline-start: 0.25rem; /* 4px */
pe-1padding-inline-end: 0.25rem; /* 4px */
pt-1padding-top: 0.25rem; /* 4px */
pr-1padding-right: 0.25rem; /* 4px */
pb-1padding-bottom: 0.25rem; /* 4px */
pl-1padding-left: 0.25rem; /* 4px */
p-1.5padding: 0.375rem; /* 6px */
px-1.5padding-left: 0.375rem; /* 6px / padding-right: 0.375rem; / 6px */
py-1.5padding-top: 0.375rem; /* 6px / padding-bottom: 0.375rem; / 6px */
ps-1.5padding-inline-start: 0.375rem; /* 6px */
pe-1.5padding-inline-end: 0.375rem; /* 6px */
pt-1.5padding-top: 0.375rem; /* 6px */
pr-1.5padding-right: 0.375rem; /* 6px */
pb-1.5padding-bottom: 0.375rem; /* 6px */
pl-1.5padding-left: 0.375rem; /* 6px */
p-2padding: 0.5rem; /* 8px */
px-2padding-left: 0.5rem; /* 8px / padding-right: 0.5rem; / 8px */
py-2padding-top: 0.5rem; /* 8px / padding-bottom: 0.5rem; / 8px */
ps-2padding-inline-start: 0.5rem; /* 8px */
pe-2padding-inline-end: 0.5rem; /* 8px */
pt-2padding-top: 0.5rem; /* 8px */
pr-2padding-right: 0.5rem; /* 8px */
pb-2padding-bottom: 0.5rem; /* 8px */
pl-2padding-left: 0.5rem; /* 8px */
p-2.5padding: 0.625rem; /* 10px */
px-2.5padding-left: 0.625rem; /* 10px / padding-right: 0.625rem; / 10px */
py-2.5padding-top: 0.625rem; /* 10px / padding-bottom: 0.625rem; / 10px */
ps-2.5padding-inline-start: 0.625rem; /* 10px */
pe-2.5padding-inline-end: 0.625rem; /* 10px */
pt-2.5padding-top: 0.625rem; /* 10px */
pr-2.5padding-right: 0.625rem; /* 10px */
pb-2.5padding-bottom: 0.625rem; /* 10px */
pl-2.5padding-left: 0.625rem; /* 10px */
p-3padding: 0.75rem; /* 12px */
px-3padding-left: 0.75rem; /* 12px / padding-right: 0.75rem; / 12px */
py-3padding-top: 0.75rem; /* 12px / padding-bottom: 0.75rem; / 12px */
ps-3padding-inline-start: 0.75rem; /* 12px */
pe-3padding-inline-end: 0.75rem; /* 12px */
pt-3padding-top: 0.75rem; /* 12px */
pr-3padding-right: 0.75rem; /* 12px */
pb-3padding-bottom: 0.75rem; /* 12px */
pl-3padding-left: 0.75rem; /* 12px */
p-3.5padding: 0.875rem; /* 14px */
px-3.5padding-left: 0.875rem; /* 14px / padding-right: 0.875rem; / 14px */
py-3.5padding-top: 0.875rem; /* 14px / padding-bottom: 0.875rem; / 14px */
ps-3.5padding-inline-start: 0.875rem; /* 14px */
pe-3.5padding-inline-end: 0.875rem; /* 14px */
pt-3.5padding-top: 0.875rem; /* 14px */
pr-3.5padding-right: 0.875rem; /* 14px */
pb-3.5padding-bottom: 0.875rem; /* 14px */
pl-3.5padding-left: 0.875rem; /* 14px */
p-4padding: 1rem; /* 16px */
px-4padding-left: 1rem; /* 16px / padding-right: 1rem; / 16px */
py-4padding-top: 1rem; /* 16px / padding-bottom: 1rem; / 16px */
ps-4padding-inline-start: 1rem; /* 16px */
pe-4padding-inline-end: 1rem; /* 16px */
pt-4padding-top: 1rem; /* 16px */
pr-4padding-right: 1rem; /* 16px */
pb-4padding-bottom: 1rem; /* 16px */
pl-4padding-left: 1rem; /* 16px */
p-5padding: 1.25rem; /* 20px */
px-5padding-left: 1.25rem; /* 20px / padding-right: 1.25rem; / 20px */
py-5padding-top: 1.25rem; /* 20px / padding-bottom: 1.25rem; / 20px */
ps-5padding-inline-start: 1.25rem; /* 20px */
pe-5padding-inline-end: 1.25rem; /* 20px */
pt-5padding-top: 1.25rem; /* 20px */
pr-5padding-right: 1.25rem; /* 20px */
pb-5padding-bottom: 1.25rem; /* 20px */
pl-5padding-left: 1.25rem; /* 20px */
p-6padding: 1.5rem; /* 24px */
px-6padding-left: 1.5rem; /* 24px / padding-right: 1.5rem; / 24px */
py-6padding-top: 1.5rem; /* 24px / padding-bottom: 1.5rem; / 24px */
ps-6padding-inline-start: 1.5rem; /* 24px */
pe-6padding-inline-end: 1.5rem; /* 24px */
pt-6padding-top: 1.5rem; /* 24px */
pr-6padding-right: 1.5rem; /* 24px */
pb-6padding-bottom: 1.5rem; /* 24px */
pl-6padding-left: 1.5rem; /* 24px */
p-7padding: 1.75rem; /* 28px */
px-7padding-left: 1.75rem; /* 28px / padding-right: 1.75rem; / 28px */
py-7padding-top: 1.75rem; /* 28px / padding-bottom: 1.75rem; / 28px */
ps-7padding-inline-start: 1.75rem; /* 28px */
pe-7padding-inline-end: 1.75rem; /* 28px */
pt-7padding-top: 1.75rem; /* 28px */
pr-7padding-right: 1.75rem; /* 28px */
pb-7padding-bottom: 1.75rem; /* 28px */
pl-7padding-left: 1.75rem; /* 28px */
p-8padding: 2rem; /* 32px */
px-8padding-left: 2rem; /* 32px / padding-right: 2rem; / 32px */
py-8padding-top: 2rem; /* 32px / padding-bottom: 2rem; / 32px */
ps-8padding-inline-start: 2rem; /* 32px */
pe-8padding-inline-end: 2rem; /* 32px */
pt-8padding-top: 2rem; /* 32px */
pr-8padding-right: 2rem; /* 32px */
pb-8padding-bottom: 2rem; /* 32px */
pl-8padding-left: 2rem; /* 32px */
p-9padding: 2.25rem; /* 36px */
px-9padding-left: 2.25rem; /* 36px / padding-right: 2.25rem; / 36px */
py-9padding-top: 2.25rem; /* 36px / padding-bottom: 2.25rem; / 36px */
ps-9padding-inline-start: 2.25rem; /* 36px */
pe-9padding-inline-end: 2.25rem; /* 36px */
pt-9padding-top: 2.25rem; /* 36px */
pr-9padding-right: 2.25rem; /* 36px */
pb-9padding-bottom: 2.25rem; /* 36px */
pl-9padding-left: 2.25rem; /* 36px */
p-10padding: 2.5rem; /* 40px */
px-10padding-left: 2.5rem; /* 40px / padding-right: 2.5rem; / 40px */
py-10padding-top: 2.5rem; /* 40px / padding-bottom: 2.5rem; / 40px */
ps-10padding-inline-start: 2.5rem; /* 40px */
pe-10padding-inline-end: 2.5rem; /* 40px */
pt-10padding-top: 2.5rem; /* 40px */
pr-10padding-right: 2.5rem; /* 40px */
pb-10padding-bottom: 2.5rem; /* 40px */
pl-10padding-left: 2.5rem; /* 40px */
p-11padding: 2.75rem; /* 44px */
px-11padding-left: 2.75rem; /* 44px / padding-right: 2.75rem; / 44px */
py-11padding-top: 2.75rem; /* 44px / padding-bottom: 2.75rem; / 44px */
ps-11padding-inline-start: 2.75rem; /* 44px */
pe-11padding-inline-end: 2.75rem; /* 44px */
pt-11padding-top: 2.75rem; /* 44px */
pr-11padding-right: 2.75rem; /* 44px */
pb-11padding-bottom: 2.75rem; /* 44px */
pl-11padding-left: 2.75rem; /* 44px */
p-12padding: 3rem; /* 48px */
px-12padding-left: 3rem; /* 48px / padding-right: 3rem; / 48px */
py-12padding-top: 3rem; /* 48px / padding-bottom: 3rem; / 48px */
ps-12padding-inline-start: 3rem; /* 48px */
pe-12padding-inline-end: 3rem; /* 48px */
pt-12padding-top: 3rem; /* 48px */
pr-12padding-right: 3rem; /* 48px */
pb-12padding-bottom: 3rem; /* 48px */
pl-12padding-left: 3rem; /* 48px */
p-14padding: 3.5rem; /* 56px */
px-14padding-left: 3.5rem; /* 56px / padding-right: 3.5rem; / 56px */
py-14padding-top: 3.5rem; /* 56px / padding-bottom: 3.5rem; / 56px */
ps-14padding-inline-start: 3.5rem; /* 56px */
pe-14padding-inline-end: 3.5rem; /* 56px */
pt-14padding-top: 3.5rem; /* 56px */
pr-14padding-right: 3.5rem; /* 56px */
pb-14padding-bottom: 3.5rem; /* 56px */
pl-14padding-left: 3.5rem; /* 56px */
p-16padding: 4rem; /* 64px */
px-16padding-left: 4rem; /* 64px / padding-right: 4rem; / 64px */
py-16padding-top: 4rem; /* 64px / padding-bottom: 4rem; / 64px */
ps-16padding-inline-start: 4rem; /* 64px */
pe-16padding-inline-end: 4rem; /* 64px */
pt-16padding-top: 4rem; /* 64px */
pr-16padding-right: 4rem; /* 64px */
pb-16padding-bottom: 4rem; /* 64px */
pl-16padding-left: 4rem; /* 64px */
p-20padding: 5rem; /* 80px */
px-20padding-left: 5rem; /* 80px / padding-right: 5rem; / 80px */
py-20padding-top: 5rem; /* 80px / padding-bottom: 5rem; / 80px */
ps-20padding-inline-start: 5rem; /* 80px */
pe-20padding-inline-end: 5rem; /* 80px */
pt-20padding-top: 5rem; /* 80px */
pr-20padding-right: 5rem; /* 80px */
pb-20padding-bottom: 5rem; /* 80px */
pl-20padding-left: 5rem; /* 80px */
p-24padding: 6rem; /* 96px */
px-24padding-left: 6rem; /* 96px / padding-right: 6rem; / 96px */
py-24padding-top: 6rem; /* 96px / padding-bottom: 6rem; / 96px */
ps-24padding-inline-start: 6rem; /* 96px */
pe-24padding-inline-end: 6rem; /* 96px */
pt-24padding-top: 6rem; /* 96px */
pr-24padding-right: 6rem; /* 96px */
pb-24padding-bottom: 6rem; /* 96px */
pl-24padding-left: 6rem; /* 96px */
p-28padding: 7rem; /* 112px */
px-28padding-left: 7rem; /* 112px / padding-right: 7rem; / 112px */
py-28padding-top: 7rem; /* 112px / padding-bottom: 7rem; / 112px */
ps-28padding-inline-start: 7rem; /* 112px */
pe-28padding-inline-end: 7rem; /* 112px */
pt-28padding-top: 7rem; /* 112px */
pr-28padding-right: 7rem; /* 112px */
pb-28padding-bottom: 7rem; /* 112px */
pl-28padding-left: 7rem; /* 112px */
p-32padding: 8rem; /* 128px */
px-32padding-left: 8rem; /* 128px / padding-right: 8rem; / 128px */
py-32padding-top: 8rem; /* 128px / padding-bottom: 8rem; / 128px */
ps-32padding-inline-start: 8rem; /* 128px */
pe-32padding-inline-end: 8rem; /* 128px */
pt-32padding-top: 8rem; /* 128px */
pr-32padding-right: 8rem; /* 128px */
pb-32padding-bottom: 8rem; /* 128px */
pl-32padding-left: 8rem; /* 128px */
p-36padding: 9rem; /* 144px */
px-36padding-left: 9rem; /* 144px / padding-right: 9rem; / 144px */
py-36padding-top: 9rem; /* 144px / padding-bottom: 9rem; / 144px */
ps-36padding-inline-start: 9rem; /* 144px */
pe-36padding-inline-end: 9rem; /* 144px */
pt-36padding-top: 9rem; /* 144px */
pr-36padding-right: 9rem; /* 144px */
pb-36padding-bottom: 9rem; /* 144px */
pl-36padding-left: 9rem; /* 144px */
p-40padding: 10rem; /* 160px */
px-40padding-left: 10rem; /* 160px / padding-right: 10rem; / 160px */
py-40padding-top: 10rem; /* 160px / padding-bottom: 10rem; / 160px */
ps-40padding-inline-start: 10rem; /* 160px */
pe-40padding-inline-end: 10rem; /* 160px */
pt-40padding-top: 10rem; /* 160px */
pr-40padding-right: 10rem; /* 160px */
pb-40padding-bottom: 10rem; /* 160px */
pl-40padding-left: 10rem; /* 160px */
p-44padding: 11rem; /* 176px */
px-44padding-left: 11rem; /* 176px / padding-right: 11rem; / 176px */
py-44padding-top: 11rem; /* 176px / padding-bottom: 11rem; / 176px */
ps-44padding-inline-start: 11rem; /* 176px */
pe-44padding-inline-end: 11rem; /* 176px */
pt-44padding-top: 11rem; /* 176px */
pr-44padding-right: 11rem; /* 176px */
pb-44padding-bottom: 11rem; /* 176px */
pl-44padding-left: 11rem; /* 176px */
p-48padding: 12rem; /* 192px */
px-48padding-left: 12rem; /* 192px / padding-right: 12rem; / 192px */
py-48padding-top: 12rem; /* 192px / padding-bottom: 12rem; / 192px */
ps-48padding-inline-start: 12rem; /* 192px */
pe-48padding-inline-end: 12rem; /* 192px */
pt-48padding-top: 12rem; /* 192px */
pr-48padding-right: 12rem; /* 192px */
pb-48padding-bottom: 12rem; /* 192px */
pl-48padding-left: 12rem; /* 192px */
p-52padding: 13rem; /* 208px */
px-52padding-left: 13rem; /* 208px / padding-right: 13rem; / 208px */
py-52padding-top: 13rem; /* 208px / padding-bottom: 13rem; / 208px */
ps-52padding-inline-start: 13rem; /* 208px */
pe-52padding-inline-end: 13rem; /* 208px */
pt-52padding-top: 13rem; /* 208px */
pr-52padding-right: 13rem; /* 208px */
pb-52padding-bottom: 13rem; /* 208px */
pl-52padding-left: 13rem; /* 208px */
p-56padding: 14rem; /* 224px */
px-56padding-left: 14rem; /* 224px / padding-right: 14rem; / 224px */
py-56padding-top: 14rem; /* 224px / padding-bottom: 14rem; / 224px */
ps-56padding-inline-start: 14rem; /* 224px */
pe-56padding-inline-end: 14rem; /* 224px */
pt-56padding-top: 14rem; /* 224px */
pr-56padding-right: 14rem; /* 224px */
pb-56padding-bottom: 14rem; /* 224px */
pl-56padding-left: 14rem; /* 224px */
p-60padding: 15rem; /* 240px */
px-60padding-left: 15rem; /* 240px / padding-right: 15rem; / 240px */
py-60padding-top: 15rem; /* 240px / padding-bottom: 15rem; / 240px */
ps-60padding-inline-start: 15rem; /* 240px */
pe-60padding-inline-end: 15rem; /* 240px */
pt-60padding-top: 15rem; /* 240px */
pr-60padding-right: 15rem; /* 240px */
pb-60padding-bottom: 15rem; /* 240px */
pl-60padding-left: 15rem; /* 240px */
p-64padding: 16rem; /* 256px */
px-64padding-left: 16rem; /* 256px / padding-right: 16rem; / 256px */
py-64padding-top: 16rem; /* 256px / padding-bottom: 16rem; / 256px */
ps-64padding-inline-start: 16rem; /* 256px */
pe-64padding-inline-end: 16rem; /* 256px */
pt-64padding-top: 16rem; /* 256px */
pr-64padding-right: 16rem; /* 256px */
pb-64padding-bottom: 16rem; /* 256px */
pl-64padding-left: 16rem; /* 256px */
p-72padding: 18rem; /* 288px */
px-72padding-left: 18rem; /* 288px / padding-right: 18rem; / 288px */
py-72padding-top: 18rem; /* 288px / padding-bottom: 18rem; / 288px */
ps-72padding-inline-start: 18rem; /* 288px */
pe-72padding-inline-end: 18rem; /* 288px */
pt-72padding-top: 18rem; /* 288px */
pr-72padding-right: 18rem; /* 288px */
pb-72padding-bottom: 18rem; /* 288px */
pl-72padding-left: 18rem; /* 288px */
p-80padding: 20rem; /* 320px */
px-80padding-left: 20rem; /* 320px / padding-right: 20rem; / 320px */
py-80padding-top: 20rem; /* 320px / padding-bottom: 20rem; / 320px */
ps-80padding-inline-start: 20rem; /* 320px */
pe-80padding-inline-end: 20rem; /* 320px */
pt-80padding-top: 20rem; /* 320px */
pr-80padding-right: 20rem; /* 320px */
pb-80padding-bottom: 20rem; /* 320px */
pl-80padding-left: 20rem; /* 320px */
p-96padding: 24rem; /* 384px */
px-96padding-left: 24rem; /* 384px / padding-right: 24rem; / 384px */
py-96padding-top: 24rem; /* 384px / padding-bottom: 24rem; / 384px */
ps-96padding-inline-start: 24rem; /* 384px */
pe-96padding-inline-end: 24rem; /* 384px */
pt-96padding-top: 24rem; /* 384px */
pr-96padding-right: 24rem; /* 384px */
pb-96padding-bottom: 24rem; /* 384px */
pl-96padding-left: 24rem; /* 384px */

间距 - 外边距 ​

类对应的 CSS
m-0margin: 0px;
mx-0margin-left: 0px; margin-right: 0px;
my-0margin-top: 0px; margin-bottom: 0px;
ms-0margin-inline-start: 0px;
me-0margin-inline-end: 0px;
mt-0margin-top: 0px;
mr-0margin-right: 0px;
mb-0margin-bottom: 0px;
ml-0margin-left: 0px;
m-pxmargin: 1px;
mx-pxmargin-left: 1px; margin-right: 1px;
my-pxmargin-top: 1px; margin-bottom: 1px;
ms-pxmargin-inline-start: 1px;
me-pxmargin-inline-end: 1px;
mt-pxmargin-top: 1px;
mr-pxmargin-right: 1px;
mb-pxmargin-bottom: 1px;
ml-pxmargin-left: 1px;
m-0.5margin: 0.125rem; /* 2px */
mx-0.5margin-left: 0.125rem; /* 2px / margin-right: 0.125rem; / 2px */
my-0.5margin-top: 0.125rem; /* 2px / margin-bottom: 0.125rem; / 2px */
ms-0.5margin-inline-start: 0.125rem; /* 2px */
me-0.5margin-inline-end: 0.125rem; /* 2px */
mt-0.5margin-top: 0.125rem; /* 2px */
mr-0.5margin-right: 0.125rem; /* 2px */
mb-0.5margin-bottom: 0.125rem; /* 2px */
ml-0.5margin-left: 0.125rem; /* 2px */
m-1margin: 0.25rem; /* 4px */
mx-1margin-left: 0.25rem; /* 4px / margin-right: 0.25rem; / 4px */
my-1margin-top: 0.25rem; /* 4px / margin-bottom: 0.25rem; / 4px */
ms-1margin-inline-start: 0.25rem; /* 4px */
me-1margin-inline-end: 0.25rem; /* 4px */
mt-1margin-top: 0.25rem; /* 4px */
mr-1margin-right: 0.25rem; /* 4px */
mb-1margin-bottom: 0.25rem; /* 4px */
ml-1margin-left: 0.25rem; /* 4px */
m-1.5margin: 0.375rem; /* 6px */
mx-1.5margin-left: 0.375rem; /* 6px / margin-right: 0.375rem; / 6px */
my-1.5margin-top: 0.375rem; /* 6px / margin-bottom: 0.375rem; / 6px */
ms-1.5margin-inline-start: 0.375rem; /* 6px */
me-1.5margin-inline-end: 0.375rem; /* 6px */
mt-1.5margin-top: 0.375rem; /* 6px */
mr-1.5margin-right: 0.375rem; /* 6px */
mb-1.5margin-bottom: 0.375rem; /* 6px */
ml-1.5margin-left: 0.375rem; /* 6px */
m-2margin: 0.5rem; /* 8px */
mx-2margin-left: 0.5rem; /* 8px / margin-right: 0.5rem; / 8px */
my-2margin-top: 0.5rem; /* 8px / margin-bottom: 0.5rem; / 8px */
ms-2margin-inline-start: 0.5rem; /* 8px */
me-2margin-inline-end: 0.5rem; /* 8px */
mt-2margin-top: 0.5rem; /* 8px */
mr-2margin-right: 0.5rem; /* 8px */
mb-2margin-bottom: 0.5rem; /* 8px */
ml-2margin-left: 0.5rem; /* 8px */
m-2.5margin: 0.625rem; /* 10px */
mx-2.5margin-left: 0.625rem; /* 10px / margin-right: 0.625rem; / 10px */
my-2.5margin-top: 0.625rem; /* 10px / margin-bottom: 0.625rem; / 10px */
ms-2.5margin-inline-start: 0.625rem; /* 10px */
me-2.5margin-inline-end: 0.625rem; /* 10px */
mt-2.5margin-top: 0.625rem; /* 10px */
mr-2.5margin-right: 0.625rem; /* 10px */
mb-2.5margin-bottom: 0.625rem; /* 10px */
ml-2.5margin-left: 0.625rem; /* 10px */
m-3margin: 0.75rem; /* 12px */
mx-3margin-left: 0.75rem; /* 12px / margin-right: 0.75rem; / 12px */
my-3margin-top: 0.75rem; /* 12px / margin-bottom: 0.75rem; / 12px */
ms-3margin-inline-start: 0.75rem; /* 12px */
me-3margin-inline-end: 0.75rem; /* 12px */
mt-3margin-top: 0.75rem; /* 12px */
mr-3margin-right: 0.75rem; /* 12px */
mb-3margin-bottom: 0.75rem; /* 12px */
ml-3margin-left: 0.75rem; /* 12px */
m-3.5margin: 0.875rem; /* 14px */
mx-3.5margin-left: 0.875rem; /* 14px / margin-right: 0.875rem; / 14px */
my-3.5margin-top: 0.875rem; /* 14px / margin-bottom: 0.875rem; / 14px */
ms-3.5margin-inline-start: 0.875rem; /* 14px */
me-3.5margin-inline-end: 0.875rem; /* 14px */
mt-3.5margin-top: 0.875rem; /* 14px */
mr-3.5margin-right: 0.875rem; /* 14px */
mb-3.5margin-bottom: 0.875rem; /* 14px */
ml-3.5margin-left: 0.875rem; /* 14px */
m-4margin: 1rem; /* 16px */
mx-4margin-left: 1rem; /* 16px / margin-right: 1rem; / 16px */
my-4margin-top: 1rem; /* 16px / margin-bottom: 1rem; / 16px */
ms-4margin-inline-start: 1rem; /* 16px */
me-4margin-inline-end: 1rem; /* 16px */
mt-4margin-top: 1rem; /* 16px */
mr-4margin-right: 1rem; /* 16px */
mb-4margin-bottom: 1rem; /* 16px */
ml-4margin-left: 1rem; /* 16px */
m-5margin: 1.25rem; /* 20px */
mx-5margin-left: 1.25rem; /* 20px / margin-right: 1.25rem; / 20px */
my-5margin-top: 1.25rem; /* 20px / margin-bottom: 1.25rem; / 20px */
ms-5margin-inline-start: 1.25rem; /* 20px */
me-5margin-inline-end: 1.25rem; /* 20px */
mt-5margin-top: 1.25rem; /* 20px */
mr-5margin-right: 1.25rem; /* 20px */
mb-5margin-bottom: 1.25rem; /* 20px */
ml-5margin-left: 1.25rem; /* 20px */
m-6margin: 1.5rem; /* 24px */
mx-6margin-left: 1.5rem; /* 24px / margin-right: 1.5rem; / 24px */
my-6margin-top: 1.5rem; /* 24px / margin-bottom: 1.5rem; / 24px */
ms-6margin-inline-start: 1.5rem; /* 24px */
me-6margin-inline-end: 1.5rem; /* 24px */
mt-6margin-top: 1.5rem; /* 24px */
mr-6margin-right: 1.5rem; /* 24px */
mb-6margin-bottom: 1.5rem; /* 24px */
ml-6margin-left: 1.5rem; /* 24px */
m-7margin: 1.75rem; /* 28px */
mx-7margin-left: 1.75rem; /* 28px / margin-right: 1.75rem; / 28px */
my-7margin-top: 1.75rem; /* 28px / margin-bottom: 1.75rem; / 28px */
ms-7margin-inline-start: 1.75rem; /* 28px */
me-7margin-inline-end: 1.75rem; /* 28px */
mt-7margin-top: 1.75rem; /* 28px */
mr-7margin-right: 1.75rem; /* 28px */
mb-7margin-bottom: 1.75rem; /* 28px */
ml-7margin-left: 1.75rem; /* 28px */
m-8margin: 2rem; /* 32px */
mx-8margin-left: 2rem; /* 32px / margin-right: 2rem; / 32px */
my-8margin-top: 2rem; /* 32px / margin-bottom: 2rem; / 32px */
ms-8margin-inline-start: 2rem; /* 32px */
me-8margin-inline-end: 2rem; /* 32px */
mt-8margin-top: 2rem; /* 32px */
mr-8margin-right: 2rem; /* 32px */
mb-8margin-bottom: 2rem; /* 32px */
ml-8margin-left: 2rem; /* 32px */
m-9margin: 2.25rem; /* 36px */
mx-9margin-left: 2.25rem; /* 36px / margin-right: 2.25rem; / 36px */
my-9margin-top: 2.25rem; /* 36px / margin-bottom: 2.25rem; / 36px */
ms-9margin-inline-start: 2.25rem; /* 36px */
me-9margin-inline-end: 2.25rem; /* 36px */
mt-9margin-top: 2.25rem; /* 36px */
mr-9margin-right: 2.25rem; /* 36px */
mb-9margin-bottom: 2.25rem; /* 36px */
ml-9margin-left: 2.25rem; /* 36px */
m-10margin: 2.5rem; /* 40px */
mx-10margin-left: 2.5rem; /* 40px / margin-right: 2.5rem; / 40px */
my-10margin-top: 2.5rem; /* 40px / margin-bottom: 2.5rem; / 40px */
ms-10margin-inline-start: 2.5rem; /* 40px */
me-10margin-inline-end: 2.5rem; /* 40px */
mt-10margin-top: 2.5rem; /* 40px */
mr-10margin-right: 2.5rem; /* 40px */
mb-10margin-bottom: 2.5rem; /* 40px */
ml-10margin-left: 2.5rem; /* 40px */
m-11margin: 2.75rem; /* 44px */
mx-11margin-left: 2.75rem; /* 44px / margin-right: 2.75rem; / 44px */
my-11margin-top: 2.75rem; /* 44px / margin-bottom: 2.75rem; / 44px */
ms-11margin-inline-start: 2.75rem; /* 44px */
me-11margin-inline-end: 2.75rem; /* 44px */
mt-11margin-top: 2.75rem; /* 44px */
mr-11margin-right: 2.75rem; /* 44px */
mb-11margin-bottom: 2.75rem; /* 44px */
ml-11margin-left: 2.75rem; /* 44px */
m-12margin: 3rem; /* 48px */
mx-12margin-left: 3rem; /* 48px / margin-right: 3rem; / 48px */
my-12margin-top: 3rem; /* 48px / margin-bottom: 3rem; / 48px */
ms-12margin-inline-start: 3rem; /* 48px */
me-12margin-inline-end: 3rem; /* 48px */
mt-12margin-top: 3rem; /* 48px */
mr-12margin-right: 3rem; /* 48px */
mb-12margin-bottom: 3rem; /* 48px */
ml-12margin-left: 3rem; /* 48px */
m-14margin: 3.5rem; /* 56px */
mx-14margin-left: 3.5rem; /* 56px / margin-right: 3.5rem; / 56px */
my-14margin-top: 3.5rem; /* 56px / margin-bottom: 3.5rem; / 56px */
ms-14margin-inline-start: 3.5rem; /* 56px */
me-14margin-inline-end: 3.5rem; /* 56px */
mt-14margin-top: 3.5rem; /* 56px */
mr-14margin-right: 3.5rem; /* 56px */
mb-14margin-bottom: 3.5rem; /* 56px */
ml-14margin-left: 3.5rem; /* 56px */
m-16margin: 4rem; /* 64px */
mx-16margin-left: 4rem; /* 64px / margin-right: 4rem; / 64px */
my-16margin-top: 4rem; /* 64px / margin-bottom: 4rem; / 64px */
ms-16margin-inline-start: 4rem; /* 64px */
me-16margin-inline-end: 4rem; /* 64px */
mt-16margin-top: 4rem; /* 64px */
mr-16margin-right: 4rem; /* 64px */
mb-16margin-bottom: 4rem; /* 64px */
ml-16margin-left: 4rem; /* 64px */
m-20margin: 5rem; /* 80px */
mx-20margin-left: 5rem; /* 80px / margin-right: 5rem; / 80px */
my-20margin-top: 5rem; /* 80px / margin-bottom: 5rem; / 80px */
ms-20margin-inline-start: 5rem; /* 80px */
me-20margin-inline-end: 5rem; /* 80px */
mt-20margin-top: 5rem; /* 80px */
mr-20margin-right: 5rem; /* 80px */
mb-20margin-bottom: 5rem; /* 80px */
ml-20margin-left: 5rem; /* 80px */
m-24margin: 6rem; /* 96px */
mx-24margin-left: 6rem; /* 96px / margin-right: 6rem; / 96px */
my-24margin-top: 6rem; /* 96px / margin-bottom: 6rem; / 96px */
ms-24margin-inline-start: 6rem; /* 96px */
me-24margin-inline-end: 6rem; /* 96px */
mt-24margin-top: 6rem; /* 96px */
mr-24margin-right: 6rem; /* 96px */
mb-24margin-bottom: 6rem; /* 96px */
ml-24margin-left: 6rem; /* 96px */
m-28margin: 7rem; /* 112px */
mx-28margin-left: 7rem; /* 112px / margin-right: 7rem; / 112px */
my-28margin-top: 7rem; /* 112px / margin-bottom: 7rem; / 112px */
ms-28margin-inline-start: 7rem; /* 112px */
me-28margin-inline-end: 7rem; /* 112px */
mt-28margin-top: 7rem; /* 112px */
mr-28margin-right: 7rem; /* 112px */
mb-28margin-bottom: 7rem; /* 112px */
ml-28margin-left: 7rem; /* 112px */
m-32margin: 8rem; /* 128px */
mx-32margin-left: 8rem; /* 128px / margin-right: 8rem; / 128px */
my-32margin-top: 8rem; /* 128px / margin-bottom: 8rem; / 128px */
ms-32margin-inline-start: 8rem; /* 128px */
me-32margin-inline-end: 8rem; /* 128px */
mt-32margin-top: 8rem; /* 128px */
mr-32margin-right: 8rem; /* 128px */
mb-32margin-bottom: 8rem; /* 128px */
ml-32margin-left: 8rem; /* 128px */
m-36margin: 9rem; /* 144px */
mx-36margin-left: 9rem; /* 144px / margin-right: 9rem; / 144px */
my-36margin-top: 9rem; /* 144px / margin-bottom: 9rem; / 144px */
ms-36margin-inline-start: 9rem; /* 144px */
me-36margin-inline-end: 9rem; /* 144px */
mt-36margin-top: 9rem; /* 144px */
mr-36margin-right: 9rem; /* 144px */
mb-36margin-bottom: 9rem; /* 144px */
ml-36margin-left: 9rem; /* 144px */
m-40margin: 10rem; /* 160px */
mx-40margin-left: 10rem; /* 160px / margin-right: 10rem; / 160px */
my-40margin-top: 10rem; /* 160px / margin-bottom: 10rem; / 160px */
ms-40margin-inline-start: 10rem; /* 160px */
me-40margin-inline-end: 10rem; /* 160px */
mt-40margin-top: 10rem; /* 160px */
mr-40margin-right: 10rem; /* 160px */
mb-40margin-bottom: 10rem; /* 160px */
ml-40margin-left: 10rem; /* 160px */
m-44margin: 11rem; /* 176px */
mx-44margin-left: 11rem; /* 176px / margin-right: 11rem; / 176px */
my-44margin-top: 11rem; /* 176px / margin-bottom: 11rem; / 176px */
ms-44margin-inline-start: 11rem; /* 176px */
me-44margin-inline-end: 11rem; /* 176px */
mt-44margin-top: 11rem; /* 176px */
mr-44margin-right: 11rem; /* 176px */
mb-44margin-bottom: 11rem; /* 176px */
ml-44margin-left: 11rem; /* 176px */
m-48margin: 12rem; /* 192px */
mx-48margin-left: 12rem; /* 192px / margin-right: 12rem; / 192px */
my-48margin-top: 12rem; /* 192px / margin-bottom: 12rem; / 192px */
ms-48margin-inline-start: 12rem; /* 192px */
me-48margin-inline-end: 12rem; /* 192px */
mt-48margin-top: 12rem; /* 192px */
mr-48margin-right: 12rem; /* 192px */
mb-48margin-bottom: 12rem; /* 192px */
ml-48margin-left: 12rem; /* 192px */
m-52margin: 13rem; /* 208px */
mx-52margin-left: 13rem; /* 208px / margin-right: 13rem; / 208px */
my-52margin-top: 13rem; /* 208px / margin-bottom: 13rem; / 208px */
ms-52margin-inline-start: 13rem; /* 208px */
me-52margin-inline-end: 13rem; /* 208px */
mt-52margin-top: 13rem; /* 208px */
mr-52margin-right: 13rem; /* 208px */
mb-52margin-bottom: 13rem; /* 208px */
ml-52margin-left: 13rem; /* 208px */
m-56margin: 14rem; /* 224px */
mx-56margin-left: 14rem; /* 224px / margin-right: 14rem; / 224px */
my-56margin-top: 14rem; /* 224px / margin-bottom: 14rem; / 224px */
ms-56margin-inline-start: 14rem; /* 224px */
me-56margin-inline-end: 14rem; /* 224px */
mt-56margin-top: 14rem; /* 224px */
mr-56margin-right: 14rem; /* 224px */
mb-56margin-bottom: 14rem; /* 224px */
ml-56margin-left: 14rem; /* 224px */
m-60margin: 15rem; /* 240px */
mx-60margin-left: 15rem; /* 240px / margin-right: 15rem; / 240px */
my-60margin-top: 15rem; /* 240px / margin-bottom: 15rem; / 240px */
ms-60margin-inline-start: 15rem; /* 240px */
me-60margin-inline-end: 15rem; /* 240px */
mt-60margin-top: 15rem; /* 240px */
mr-60margin-right: 15rem; /* 240px */
mb-60margin-bottom: 15rem; /* 240px */
ml-60margin-left: 15rem; /* 240px */
m-64margin: 16rem; /* 256px */
mx-64margin-left: 16rem; /* 256px / margin-right: 16rem; / 256px */
my-64margin-top: 16rem; /* 256px / margin-bottom: 16rem; / 256px */
ms-64margin-inline-start: 16rem; /* 256px */
me-64margin-inline-end: 16rem; /* 256px */
mt-64margin-top: 16rem; /* 256px */
mr-64margin-right: 16rem; /* 256px */
mb-64margin-bottom: 16rem; /* 256px */
ml-64margin-left: 16rem; /* 256px */
m-72margin: 18rem; /* 288px */
mx-72margin-left: 18rem; /* 288px / margin-right: 18rem; / 288px */
my-72margin-top: 18rem; /* 288px / margin-bottom: 18rem; / 288px */
ms-72margin-inline-start: 18rem; /* 288px */
me-72margin-inline-end: 18rem; /* 288px */
mt-72margin-top: 18rem; /* 288px */
mr-72margin-right: 18rem; /* 288px */
mb-72margin-bottom: 18rem; /* 288px */
ml-72margin-left: 18rem; /* 288px */
m-80margin: 20rem; /* 320px */
mx-80margin-left: 20rem; /* 320px / margin-right: 20rem; / 320px */
my-80margin-top: 20rem; /* 320px / margin-bottom: 20rem; / 320px */
ms-80margin-inline-start: 20rem; /* 320px */
me-80margin-inline-end: 20rem; /* 320px */
mt-80margin-top: 20rem; /* 320px */
mr-80margin-right: 20rem; /* 320px */
mb-80margin-bottom: 20rem; /* 320px */
ml-80margin-left: 20rem; /* 320px */
m-96margin: 24rem; /* 384px */
mx-96margin-left: 24rem; /* 384px / margin-right: 24rem; / 384px */
my-96margin-top: 24rem; /* 384px / margin-bottom: 24rem; / 384px */
ms-96margin-inline-start: 24rem; /* 384px */
me-96margin-inline-end: 24rem; /* 384px */
mt-96margin-top: 24rem; /* 384px */
mr-96margin-right: 24rem; /* 384px */
mb-96margin-bottom: 24rem; /* 384px */
ml-96margin-left: 24rem; /* 384px */
m-automargin: auto;
mx-automargin-left: auto; margin-right: auto;
my-automargin-top: auto; margin-bottom: auto;
ms-automargin-inline-start: auto;
me-automargin-inline-end: auto;
mt-automargin-top: auto;
mr-automargin-right: auto;
mb-automargin-bottom: auto;
ml-automargin-left: auto;

间距 - 元素与元素间的空间 ​

类对应的 CSS
space-x-0 > * + *margin-left: 0px;
space-y-0 > * + *margin-top: 0px;
space-x-0.5 > * + *margin-left: 0.125rem; /* 2px */
space-y-0.5 > * + *margin-top: 0.125rem; /* 2px */
space-x-1 > * + *margin-left: 0.25rem; /* 4px */
space-y-1 > * + *margin-top: 0.25rem; /* 4px */
space-x-1.5 > * + *margin-left: 0.375rem; /* 6px */
space-y-1.5 > * + *margin-top: 0.375rem; /* 6px */
space-x-2 > * + *margin-left: 0.5rem; /* 8px */
space-y-2 > * + *margin-top: 0.5rem; /* 8px */
space-x-2.5 > * + *margin-left: 0.625rem; /* 10px */
space-y-2.5 > * + *margin-top: 0.625rem; /* 10px */
space-x-3 > * + *margin-left: 0.75rem; /* 12px */
space-y-3 > * + *margin-top: 0.75rem; /* 12px */
space-x-3.5 > * + *margin-left: 0.875rem; /* 14px */
space-y-3.5 > * + *margin-top: 0.875rem; /* 14px */
space-x-4 > * + *margin-left: 1rem; /* 16px */
space-y-4 > * + *margin-top: 1rem; /* 16px */
space-x-5 > * + *margin-left: 1.25rem; /* 20px */
space-y-5 > * + *margin-top: 1.25rem; /* 20px */
space-x-6 > * + *margin-left: 1.5rem; /* 24px */
space-y-6 > * + *margin-top: 1.5rem; /* 24px */
space-x-7 > * + *margin-left: 1.75rem; /* 28px */
space-y-7 > * + *margin-top: 1.75rem; /* 28px */
space-x-8 > * + *margin-left: 2rem; /* 32px */
space-y-8 > * + *margin-top: 2rem; /* 32px */
space-x-9 > * + *margin-left: 2.25rem; /* 36px */
space-y-9 > * + *margin-top: 2.25rem; /* 36px */
space-x-10 > * + *margin-left: 2.5rem; /* 40px */
space-y-10 > * + *margin-top: 2.5rem; /* 40px */
space-x-11 > * + *margin-left: 2.75rem; /* 44px */
space-y-11 > * + *margin-top: 2.75rem; /* 44px */
space-x-12 > * + *margin-left: 3rem; /* 48px */
space-y-12 > * + *margin-top: 3rem; /* 48px */
space-x-14 > * + *margin-left: 3.5rem; /* 56px */
space-y-14 > * + *margin-top: 3.5rem; /* 56px */
space-x-16 > * + *margin-left: 4rem; /* 64px */
space-y-16 > * + *margin-top: 4rem; /* 64px */
space-x-20 > * + *margin-left: 5rem; /* 80px */
space-y-20 > * + *margin-top: 5rem; /* 80px */
space-x-24 > * + *margin-left: 6rem; /* 96px */
space-y-24 > * + *margin-top: 6rem; /* 96px */
space-x-28 > * + *margin-left: 7rem; /* 112px */
space-y-28 > * + *margin-top: 7rem; /* 112px */
space-x-32 > * + *margin-left: 8rem; /* 128px */
space-y-32 > * + *margin-top: 8rem; /* 128px */
space-x-36 > * + *margin-left: 9rem; /* 144px */
space-y-36 > * + *margin-top: 9rem; /* 144px */
space-x-40 > * + *margin-left: 10rem; /* 160px */
space-y-40 > * + *margin-top: 10rem; /* 160px */
space-x-44 > * + *margin-left: 11rem; /* 176px */
space-y-44 > * + *margin-top: 11rem; /* 176px */
space-x-48 > * + *margin-left: 12rem; /* 192px */
space-y-48 > * + *margin-top: 12rem; /* 192px */
space-x-52 > * + *margin-left: 13rem; /* 208px */
space-y-52 > * + *margin-top: 13rem; /* 208px */
space-x-56 > * + *margin-left: 14rem; /* 224px */
space-y-56 > * + *margin-top: 14rem; /* 224px */
space-x-60 > * + *margin-left: 15rem; /* 240px */
space-y-60 > * + *margin-top: 15rem; /* 240px */
space-x-64 > * + *margin-left: 16rem; /* 256px */
space-y-64 > * + *margin-top: 16rem; /* 256px */
space-x-72 > * + *margin-left: 18rem; /* 288px */
space-y-72 > * + *margin-top: 18rem; /* 288px */
space-x-80 > * + *margin-left: 20rem; /* 320px */
space-y-80 > * + *margin-top: 20rem; /* 320px */
space-x-96 > * + *margin-left: 24rem; /* 384px */
space-y-96 > * + *margin-top: 24rem; /* 384px */
space-x-px > * + *margin-left: 1px;
space-y-px > * + *margin-top: 1px;
space-y-reverse > * + *--tw-space-y-reverse: 1;
space-x-reverse > * + *--tw-space-x-reverse: 1;

宽度 ​

类对应的 CSS
w-0width: 0px;
w-pxwidth: 1px;
w-0.5width: 0.125rem; /* 2px */
w-1width: 0.25rem; /* 4px */
w-1.5width: 0.375rem; /* 6px */
w-2width: 0.5rem; /* 8px */
w-2.5width: 0.625rem; /* 10px */
w-3width: 0.75rem; /* 12px */
w-3.5width: 0.875rem; /* 14px */
w-4width: 1rem; /* 16px */
w-5width: 1.25rem; /* 20px */
w-6width: 1.5rem; /* 24px */
w-7width: 1.75rem; /* 28px */
w-8width: 2rem; /* 32px */
w-9width: 2.25rem; /* 36px */
w-10width: 2.5rem; /* 40px */
w-11width: 2.75rem; /* 44px */
w-12width: 3rem; /* 48px */
w-14width: 3.5rem; /* 56px */
w-16width: 4rem; /* 64px */
w-20width: 5rem; /* 80px */
w-24width: 6rem; /* 96px */
w-28width: 7rem; /* 112px */
w-32width: 8rem; /* 128px */
w-36width: 9rem; /* 144px */
w-40width: 10rem; /* 160px */
w-44width: 11rem; /* 176px */
w-48width: 12rem; /* 192px */
w-52width: 13rem; /* 208px */
w-56width: 14rem; /* 224px */
w-60width: 15rem; /* 240px */
w-64width: 16rem; /* 256px */
w-72width: 18rem; /* 288px */
w-80width: 20rem; /* 320px */
w-96width: 24rem; /* 384px */
w-autowidth: auto;
w-1/2width: 50%;
w-1/3width: 33.333333%;
w-2/3width: 66.666667%;
w-1/4width: 25%;
w-2/4width: 50%;
w-3/4width: 75%;
w-1/5width: 20%;
w-2/5width: 40%;
w-3/5width: 60%;
w-4/5width: 80%;
w-1/6width: 16.666667%;
w-2/6width: 33.333333%;
w-3/6width: 50%;
w-4/6width: 66.666667%;
w-5/6width: 83.333333%;
w-1/12width: 8.333333%;
w-2/12width: 16.666667%;
w-3/12width: 25%;
w-4/12width: 33.333333%;
w-5/12width: 41.666667%;
w-6/12width: 50%;
w-7/12width: 58.333333%;
w-8/12width: 66.666667%;
w-9/12width: 75%;
w-10/12width: 83.333333%;
w-11/12width: 91.666667%;
w-fullwidth: 100%;
w-screenwidth: 100vw;
w-svwwidth: 100svw;
w-lvwwidth: 100lvw;
w-dvwwidth: 100dvw;
w-minwidth: min-content;
w-maxwidth: max-content;
w-fitwidth: fit-content;

添加前缀 min- 或 max- 可分别控制最大和最小宽度。

高度 ​

类对应的 CSS
h-0height: 0px;
h-pxheight: 1px;
h-0.5height: 0.125rem; /* 2px */
h-1height: 0.25rem; /* 4px */
h-1.5height: 0.375rem; /* 6px */
h-2height: 0.5rem; /* 8px */
h-2.5height: 0.625rem; /* 10px */
h-3height: 0.75rem; /* 12px */
h-3.5height: 0.875rem; /* 14px */
h-4height: 1rem; /* 16px */
h-5height: 1.25rem; /* 20px */
h-6height: 1.5rem; /* 24px */
h-7height: 1.75rem; /* 28px */
h-8height: 2rem; /* 32px */
h-9height: 2.25rem; /* 36px */
h-10height: 2.5rem; /* 40px */
h-11height: 2.75rem; /* 44px */
h-12height: 3rem; /* 48px */
h-14height: 3.5rem; /* 56px */
h-16height: 4rem; /* 64px */
h-20height: 5rem; /* 80px */
h-24height: 6rem; /* 96px */
h-28height: 7rem; /* 112px */
h-32height: 8rem; /* 128px */
h-36height: 9rem; /* 144px */
h-40height: 10rem; /* 160px */
h-44height: 11rem; /* 176px */
h-48height: 12rem; /* 192px */
h-52height: 13rem; /* 208px */
h-56height: 14rem; /* 224px */
h-60height: 15rem; /* 240px */
h-64height: 16rem; /* 256px */
h-72height: 18rem; /* 288px */
h-80height: 20rem; /* 320px */
h-96height: 24rem; /* 384px */
h-autoheight: auto;
h-1/2height: 50%;
h-1/3height: 33.333333%;
h-2/3height: 66.666667%;
h-1/4height: 25%;
h-2/4height: 50%;
h-3/4height: 75%;
h-1/5height: 20%;
h-2/5height: 40%;
h-3/5height: 60%;
h-4/5height: 80%;
h-1/6height: 16.666667%;
h-2/6height: 33.333333%;
h-3/6height: 50%;
h-4/6height: 66.666667%;
h-5/6height: 83.333333%;
h-fullheight: 100%;
h-screenheight: 100vh;
h-svhheight: 100svh;
h-lvhheight: 100lvh;
h-dvhheight: 100dvh;
h-minheight: min-content;
h-maxheight: max-content;
h-fitheight: fit-content;

添加前缀 min- 或 max- 可分别控制最大和最小高度。

字体 ​

类对应的 CSS
font-sansfont-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-seriffont-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-monofont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

文本大小 ​

类对应的 CSS
text-xsfont-size: 0.75rem; /* 12px / line-height: 1rem; / 16px */
text-smfont-size: 0.875rem; /* 14px / line-height: 1.25rem; / 20px */
text-basefont-size: 1rem; /* 16px / line-height: 1.5rem; / 24px */
text-lgfont-size: 1.125rem; /* 18px / line-height: 1.75rem; / 28px */
text-xlfont-size: 1.25rem; /* 20px / line-height: 1.75rem; / 28px */
text-2xlfont-size: 1.5rem; /* 24px / line-height: 2rem; / 32px */
text-3xlfont-size: 1.875rem; /* 30px / line-height: 2.25rem; / 36px */
text-4xlfont-size: 2.25rem; /* 36px / line-height: 2.5rem; / 40px */
text-5xlfont-size: 3rem; /* 48px */ line-height: 1;
text-6xlfont-size: 3.75rem; /* 60px */ line-height: 1;
text-7xlfont-size: 4.5rem; /* 72px */ line-height: 1;
text-8xlfont-size: 6rem; /* 96px */ line-height: 1;
text-9xlfont-size: 8rem; /* 128px */ line-height: 1;

字体样式 ​

类对应的 CSS
italicfont-style: italic;
not-italicfont-style: normal;

字体粗细 ​

类对应的 CSS
font-thinfont-weight: 100;
font-extralightfont-weight: 200;
font-lightfont-weight: 300;
font-normalfont-weight: 400;
font-mediumfont-weight: 500;
font-semiboldfont-weight: 600;
font-boldfont-weight: 700;
font-extraboldfont-weight: 800;
font-blackfont-weight: 900;

行高 ​

类对应的 CSS
leading-3line-height: .75rem; /* 12px */
leading-4line-height: 1rem; /* 16px */
leading-5line-height: 1.25rem; /* 20px */
leading-6line-height: 1.5rem; /* 24px */
leading-7line-height: 1.75rem; /* 28px */
leading-8line-height: 2rem; /* 32px */
leading-9line-height: 2.25rem; /* 36px */
leading-10line-height: 2.5rem; /* 40px */
leading-noneline-height: 1;
leading-tightline-height: 1.25;
leading-snugline-height: 1.375;
leading-normalline-height: 1.5;
leading-relaxedline-height: 1.625;
leading-looseline-height: 2;

文本对齐 ​

类对应的 CSS
text-lefttext-align: left;
text-centertext-align: center;
text-righttext-align: right;
text-justifytext-align: justify;
text-starttext-align: start;
text-endtext-align: end;

文本颜色 ​

类对应的 CSS
text-inheritcolor: inherit;
text-currentcolor: currentColor;
text-transparentcolor: transparent;
text-blackcolor: rgb(0 0 0);
text-whitecolor: rgb(255 255 255);
text-slate-50color: rgb(248 250 252);
text-slate-100color: rgb(241 245 249);
text-slate-200color: rgb(226 232 240);
text-slate-300color: rgb(203 213 225);
text-slate-400color: rgb(148 163 184);
text-slate-500color: rgb(100 116 139);
text-slate-600color: rgb(71 85 105);
text-slate-700color: rgb(51 65 85);
text-slate-800color: rgb(30 41 59);
text-slate-900color: rgb(15 23 42);
text-slate-950color: rgb(2 6 23);
text-gray-50color: rgb(249 250 251);
text-gray-100color: rgb(243 244 246);
text-gray-200color: rgb(229 231 235);
text-gray-300color: rgb(209 213 219);
text-gray-400color: rgb(156 163 175);
text-gray-500color: rgb(107 114 128);
text-gray-600color: rgb(75 85 99);
text-gray-700color: rgb(55 65 81);
text-gray-800color: rgb(31 41 55);
text-gray-900color: rgb(17 24 39);
text-gray-950color: rgb(3 7 18);
text-zinc-50color: rgb(250 250 250);
text-zinc-100color: rgb(244 244 245);
text-zinc-200color: rgb(228 228 231);
text-zinc-300color: rgb(212 212 216);
text-zinc-400color: rgb(161 161 170);
text-zinc-500color: rgb(113 113 122);
text-zinc-600color: rgb(82 82 91);
text-zinc-700color: rgb(63 63 70);
text-zinc-800color: rgb(39 39 42);
text-zinc-900color: rgb(24 24 27);
text-zinc-950color: rgb(9 9 11);
text-neutral-50color: rgb(250 250 250);
text-neutral-100color: rgb(245 245 245);
text-neutral-200color: rgb(229 229 229);
text-neutral-300color: rgb(212 212 212);
text-neutral-400color: rgb(163 163 163);
text-neutral-500color: rgb(115 115 115);
text-neutral-600color: rgb(82 82 82);
text-neutral-700color: rgb(64 64 64);
text-neutral-800color: rgb(38 38 38);
text-neutral-900color: rgb(23 23 23);
text-neutral-950color: rgb(10 10 10);
text-stone-50color: rgb(250 250 249);
text-stone-100color: rgb(245 245 244);
text-stone-200color: rgb(231 229 228);
text-stone-300color: rgb(214 211 209);
text-stone-400color: rgb(168 162 158);
text-stone-500color: rgb(120 113 108);
text-stone-600color: rgb(87 83 78);
text-stone-700color: rgb(68 64 60);
text-stone-800color: rgb(41 37 36);
text-stone-900color: rgb(28 25 23);
text-stone-950color: rgb(12 10 9);
text-red-50color: rgb(254 242 242);
text-red-100color: rgb(254 226 226);
text-red-200color: rgb(254 202 202);
text-red-300color: rgb(252 165 165);
text-red-400color: rgb(248 113 113);
text-red-500color: rgb(239 68 68);
text-red-600color: rgb(220 38 38);
text-red-700color: rgb(185 28 28);
text-red-800color: rgb(153 27 27);
text-red-900color: rgb(127 29 29);
text-red-950color: rgb(69 10 10);
text-orange-50color: rgb(255 247 237);
text-orange-100color: rgb(255 237 213);
text-orange-200color: rgb(254 215 170);
text-orange-300color: rgb(253 186 116);
text-orange-400color: rgb(251 146 60);
text-orange-500color: rgb(249 115 22);
text-orange-600color: rgb(234 88 12);
text-orange-700color: rgb(194 65 12);
text-orange-800color: rgb(154 52 18);
text-orange-900color: rgb(124 45 18);
text-orange-950color: rgb(67 20 7);
text-amber-50color: rgb(255 251 235);
text-amber-100color: rgb(254 243 199);
text-amber-200color: rgb(253 230 138);
text-amber-300color: rgb(252 211 77);
text-amber-400color: rgb(251 191 36);
text-amber-500color: rgb(245 158 11);
text-amber-600color: rgb(217 119 6);
text-amber-700color: rgb(180 83 9);
text-amber-800color: rgb(146 64 14);
text-amber-900color: rgb(120 53 15);
text-amber-950color: rgb(69 26 3);
text-yellow-50color: rgb(254 252 232);
text-yellow-100color: rgb(254 249 195);
text-yellow-200color: rgb(254 240 138);
text-yellow-300color: rgb(253 224 71);
text-yellow-400color: rgb(250 204 21);
text-yellow-500color: rgb(234 179 8);
text-yellow-600color: rgb(202 138 4);
text-yellow-700color: rgb(161 98 7);
text-yellow-800color: rgb(133 77 14);
text-yellow-900color: rgb(113 63 18);
text-yellow-950color: rgb(66 32 6);
text-lime-50color: rgb(247 254 231);
text-lime-100color: rgb(236 252 203);
text-lime-200color: rgb(217 249 157);
text-lime-300color: rgb(190 242 100);
text-lime-400color: rgb(163 230 53);
text-lime-500color: rgb(132 204 22);
text-lime-600color: rgb(101 163 13);
text-lime-700color: rgb(77 124 15);
text-lime-800color: rgb(63 98 18);
text-lime-900color: rgb(54 83 20);
text-lime-950color: rgb(26 46 5);
text-green-50color: rgb(240 253 244);
text-green-100color: rgb(220 252 231);
text-green-200color: rgb(187 247 208);
text-green-300color: rgb(134 239 172);
text-green-400color: rgb(74 222 128);
text-green-500color: rgb(34 197 94);
text-green-600color: rgb(22 163 74);
text-green-700color: rgb(21 128 61);
text-green-800color: rgb(22 101 52);
text-green-900color: rgb(20 83 45);
text-green-950color: rgb(5 46 22);
text-emerald-50color: rgb(236 253 245);
text-emerald-100color: rgb(209 250 229);
text-emerald-200color: rgb(167 243 208);
text-emerald-300color: rgb(110 231 183);
text-emerald-400color: rgb(52 211 153);
text-emerald-500color: rgb(16 185 129);
text-emerald-600color: rgb(5 150 105);
text-emerald-700color: rgb(4 120 87);
text-emerald-800color: rgb(6 95 70);
text-emerald-900color: rgb(6 78 59);
text-emerald-950color: rgb(2 44 34);
text-teal-50color: rgb(240 253 250);
text-teal-100color: rgb(204 251 241);
text-teal-200color: rgb(153 246 228);
text-teal-300color: rgb(94 234 212);
text-teal-400color: rgb(45 212 191);
text-teal-500color: rgb(20 184 166);
text-teal-600color: rgb(13 148 136);
text-teal-700color: rgb(15 118 110);
text-teal-800color: rgb(17 94 89);
text-teal-900color: rgb(19 78 74);
text-teal-950color: rgb(4 47 46);
text-cyan-50color: rgb(236 254 255);
text-cyan-100color: rgb(207 250 254);
text-cyan-200color: rgb(165 243 252);
text-cyan-300color: rgb(103 232 249);
text-cyan-400color: rgb(34 211 238);
text-cyan-500color: rgb(6 182 212);
text-cyan-600color: rgb(8 145 178);
text-cyan-700color: rgb(14 116 144);
text-cyan-800color: rgb(21 94 117);
text-cyan-900color: rgb(22 78 99);
text-cyan-950color: rgb(8 51 68);
text-sky-50color: rgb(240 249 255);
text-sky-100color: rgb(224 242 254);
text-sky-200color: rgb(186 230 253);
text-sky-300color: rgb(125 211 252);
text-sky-400color: rgb(56 189 248);
text-sky-500color: rgb(14 165 233);
text-sky-600color: rgb(2 132 199);
text-sky-700color: rgb(3 105 161);
text-sky-800color: rgb(7 89 133);
text-sky-900color: rgb(12 74 110);
text-sky-950color: rgb(8 47 73);
text-blue-50color: rgb(239 246 255);
text-blue-100color: rgb(219 234 254);
text-blue-200color: rgb(191 219 254);
text-blue-300color: rgb(147 197 253);
text-blue-400color: rgb(96 165 250);
text-blue-500color: rgb(59 130 246);
text-blue-600color: rgb(37 99 235);
text-blue-700color: rgb(29 78 216);
text-blue-800color: rgb(30 64 175);
text-blue-900color: rgb(30 58 138);
text-blue-950color: rgb(23 37 84);
text-indigo-50color: rgb(238 242 255);
text-indigo-100color: rgb(224 231 255);
text-indigo-200color: rgb(199 210 254);
text-indigo-300color: rgb(165 180 252);
text-indigo-400color: rgb(129 140 248);
text-indigo-500color: rgb(99 102 241);
text-indigo-600color: rgb(79 70 229);
text-indigo-700color: rgb(67 56 202);
text-indigo-800color: rgb(55 48 163);
text-indigo-900color: rgb(49 46 129);
text-indigo-950color: rgb(30 27 75);
text-violet-50color: rgb(245 243 255);
text-violet-100color: rgb(237 233 254);
text-violet-200color: rgb(221 214 254);
text-violet-300color: rgb(196 181 253);
text-violet-400color: rgb(167 139 250);
text-violet-500color: rgb(139 92 246);
text-violet-600color: rgb(124 58 237);
text-violet-700color: rgb(109 40 217);
text-violet-800color: rgb(91 33 182);
text-violet-900color: rgb(76 29 149);
text-violet-950color: rgb(46 16 101);
text-purple-50color: rgb(250 245 255);
text-purple-100color: rgb(243 232 255);
text-purple-200color: rgb(233 213 255);
text-purple-300color: rgb(216 180 254);
text-purple-400color: rgb(192 132 252);
text-purple-500color: rgb(168 85 247);
text-purple-600color: rgb(147 51 234);
text-purple-700color: rgb(126 34 206);
text-purple-800color: rgb(107 33 168);
text-purple-900color: rgb(88 28 135);
text-purple-950color: rgb(59 7 100);
text-fuchsia-50color: rgb(253 244 255);
text-fuchsia-100color: rgb(250 232 255);
text-fuchsia-200color: rgb(245 208 254);
text-fuchsia-300color: rgb(240 171 252);
text-fuchsia-400color: rgb(232 121 249);
text-fuchsia-500color: rgb(217 70 239);
text-fuchsia-600color: rgb(192 38 211);
text-fuchsia-700color: rgb(162 28 175);
text-fuchsia-800color: rgb(134 25 143);
text-fuchsia-900color: rgb(112 26 117);
text-fuchsia-950color: rgb(74 4 78);
text-pink-50color: rgb(253 242 248);
text-pink-100color: rgb(252 231 243);
text-pink-200color: rgb(251 207 232);
text-pink-300color: rgb(249 168 212);
text-pink-400color: rgb(244 114 182);
text-pink-500color: rgb(236 72 153);
text-pink-600color: rgb(219 39 119);
text-pink-700color: rgb(190 24 93);
text-pink-800color: rgb(157 23 77);
text-pink-900color: rgb(131 24 67);
text-pink-950color: rgb(80 7 36);
text-rose-50color: rgb(255 241 242);
text-rose-100color: rgb(255 228 230);
text-rose-200color: rgb(254 205 211);
text-rose-300color: rgb(253 164 175);
text-rose-400color: rgb(251 113 133);
text-rose-500color: rgb(244 63 94);
text-rose-600color: rgb(225 29 72);
text-rose-700color: rgb(190 18 60);
text-rose-800color: rgb(159 18 57);
text-rose-900color: rgb(136 19 55);
text-rose-950color: rgb(76 5 25);

文本溢出 ​

类对应的 CSS
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-ellipsistext-overflow: ellipsis;
text-cliptext-overflow: clip;

文本换行 ​

类对应的 CSS
text-wraptext-wrap: wrap;
text-nowraptext-wrap: nowrap;
text-balancetext-wrap: balance;
text-prettytext-wrap: pretty;

文本缩进 ​

类对应的 CSS
indent-0text-indent: 0px;
indent-pxtext-indent: 1px;
indent-0.5text-indent: 0.125rem; /* 2px */
indent-1text-indent: 0.25rem; /* 4px */
indent-1.5text-indent: 0.375rem; /* 6px */
indent-2text-indent: 0.5rem; /* 8px */
indent-2.5text-indent: 0.625rem; /* 10px */
indent-3text-indent: 0.75rem; /* 12px */
indent-3.5text-indent: 0.875rem; /* 14px */
indent-4text-indent: 1rem; /* 16px */
indent-5text-indent: 1.25rem; /* 20px */
indent-6text-indent: 1.5rem; /* 24px */
indent-7text-indent: 1.75rem; /* 28px */
indent-8text-indent: 2rem; /* 32px */
indent-9text-indent: 2.25rem; /* 36px */
indent-10text-indent: 2.5rem; /* 40px */
indent-11text-indent: 2.75rem; /* 44px */
indent-12text-indent: 3rem; /* 48px */
indent-14text-indent: 3.5rem; /* 56px */
indent-16text-indent: 4rem; /* 64px */
indent-20text-indent: 5rem; /* 80px */
indent-24text-indent: 6rem; /* 96px */
indent-28text-indent: 7rem; /* 112px */
indent-32text-indent: 8rem; /* 128px */
indent-36text-indent: 9rem; /* 144px */
indent-40text-indent: 10rem; /* 160px */
indent-44text-indent: 11rem; /* 176px */
indent-48text-indent: 12rem; /* 192px */
indent-52text-indent: 13rem; /* 208px */
indent-56text-indent: 14rem; /* 224px */
indent-60text-indent: 15rem; /* 240px */
indent-64text-indent: 16rem; /* 256px */
indent-72text-indent: 18rem; /* 288px */
indent-80text-indent: 20rem; /* 320px */
indent-96text-indent: 24rem; /* 384px */

背景颜色 ​

类对应的 CSS预览
bg-inheritbackground-color: inherit;
bg-currentbackground-color: currentColor;
bg-transparentbackground-color: transparent;
bg-blackbackground-color: rgb(0 0 0);
bg-whitebackground-color: rgb(255 255 255);
bg-slate-50background-color: rgb(248 250 252);
bg-slate-100background-color: rgb(241 245 249);
bg-slate-200background-color: rgb(226 232 240);
bg-slate-300background-color: rgb(203 213 225);
bg-slate-400background-color: rgb(148 163 184);
bg-slate-500background-color: rgb(100 116 139);
bg-slate-600background-color: rgb(71 85 105);
bg-slate-700background-color: rgb(51 65 85);
bg-slate-800background-color: rgb(30 41 59);
bg-slate-900background-color: rgb(15 23 42);
bg-slate-950background-color: rgb(2 6 23);
bg-gray-50background-color: rgb(249 250 251);
bg-gray-100background-color: rgb(243 244 246);
bg-gray-200background-color: rgb(229 231 235);
bg-gray-300background-color: rgb(209 213 219);
bg-gray-400background-color: rgb(156 163 175);
bg-gray-500background-color: rgb(107 114 128);
bg-gray-600background-color: rgb(75 85 99);
bg-gray-700background-color: rgb(55 65 81);
bg-gray-800background-color: rgb(31 41 55);
bg-gray-900background-color: rgb(17 24 39);
bg-gray-950background-color: rgb(3 7 18);
bg-zinc-50background-color: rgb(250 250 250);
bg-zinc-100background-color: rgb(244 244 245);
bg-zinc-200background-color: rgb(228 228 231);
bg-zinc-300background-color: rgb(212 212 216);
bg-zinc-400background-color: rgb(161 161 170);
bg-zinc-500background-color: rgb(113 113 122);
bg-zinc-600background-color: rgb(82 82 91);
bg-zinc-700background-color: rgb(63 63 70);
bg-zinc-800background-color: rgb(39 39 42);
bg-zinc-900background-color: rgb(24 24 27);
bg-zinc-950background-color: rgb(9 9 11);
bg-neutral-50background-color: rgb(250 250 250);
bg-neutral-100background-color: rgb(245 245 245);
bg-neutral-200background-color: rgb(229 229 229);
bg-neutral-300background-color: rgb(212 212 212);
bg-neutral-400background-color: rgb(163 163 163);
bg-neutral-500background-color: rgb(115 115 115);
bg-neutral-600background-color: rgb(82 82 82);
bg-neutral-700background-color: rgb(64 64 64);
bg-neutral-800background-color: rgb(38 38 38);
bg-neutral-900background-color: rgb(23 23 23);
bg-neutral-950background-color: rgb(10 10 10);
bg-stone-50background-color: rgb(250 250 249);
bg-stone-100background-color: rgb(245 245 244);
bg-stone-200background-color: rgb(231 229 228);
bg-stone-300background-color: rgb(214 211 209);
bg-stone-400background-color: rgb(168 162 158);
bg-stone-500background-color: rgb(120 113 108);
bg-stone-600background-color: rgb(87 83 78);
bg-stone-700background-color: rgb(68 64 60);
bg-stone-800background-color: rgb(41 37 36);
bg-stone-900background-color: rgb(28 25 23);
bg-stone-950background-color: rgb(12 10 9);
bg-red-50background-color: rgb(254 242 242);
bg-red-100background-color: rgb(254 226 226);
bg-red-200background-color: rgb(254 202 202);
bg-red-300background-color: rgb(252 165 165);
bg-red-400background-color: rgb(248 113 113);
bg-red-500background-color: rgb(239 68 68);
bg-red-600background-color: rgb(220 38 38);
bg-red-700background-color: rgb(185 28 28);
bg-red-800background-color: rgb(153 27 27);
bg-red-900background-color: rgb(127 29 29);
bg-red-950background-color: rgb(69 10 10);
bg-orange-50background-color: rgb(255 247 237);
bg-orange-100background-color: rgb(255 237 213);
bg-orange-200background-color: rgb(254 215 170);
bg-orange-300background-color: rgb(253 186 116);
bg-orange-400background-color: rgb(251 146 60);
bg-orange-500background-color: rgb(249 115 22);
bg-orange-600background-color: rgb(234 88 12);
bg-orange-700background-color: rgb(194 65 12);
bg-orange-800background-color: rgb(154 52 18);
bg-orange-900background-color: rgb(124 45 18);
bg-orange-950background-color: rgb(67 20 7);
bg-amber-50background-color: rgb(255 251 235);
bg-amber-100background-color: rgb(254 243 199);
bg-amber-200background-color: rgb(253 230 138);
bg-amber-300background-color: rgb(252 211 77);
bg-amber-400background-color: rgb(251 191 36);
bg-amber-500background-color: rgb(245 158 11);
bg-amber-600background-color: rgb(217 119 6);
bg-amber-700background-color: rgb(180 83 9);
bg-amber-800background-color: rgb(146 64 14);
bg-amber-900background-color: rgb(120 53 15);
bg-amber-950background-color: rgb(69 26 3);
bg-yellow-50background-color: rgb(254 252 232);
bg-yellow-100background-color: rgb(254 249 195);
bg-yellow-200background-color: rgb(254 240 138);
bg-yellow-300background-color: rgb(253 224 71);
bg-yellow-400background-color: rgb(250 204 21);
bg-yellow-500background-color: rgb(234 179 8);
bg-yellow-600background-color: rgb(202 138 4);
bg-yellow-700background-color: rgb(161 98 7);
bg-yellow-800background-color: rgb(133 77 14);
bg-yellow-900background-color: rgb(113 63 18);
bg-yellow-950background-color: rgb(66 32 6);
bg-lime-50background-color: rgb(247 254 231);
bg-lime-100background-color: rgb(236 252 203);
bg-lime-200background-color: rgb(217 249 157);
bg-lime-300background-color: rgb(190 242 100);
bg-lime-400background-color: rgb(163 230 53);
bg-lime-500background-color: rgb(132 204 22);
bg-lime-600background-color: rgb(101 163 13);
bg-lime-700background-color: rgb(77 124 15);
bg-lime-800background-color: rgb(63 98 18);
bg-lime-900background-color: rgb(54 83 20);
bg-lime-950background-color: rgb(26 46 5);
bg-green-50background-color: rgb(240 253 244);
bg-green-100background-color: rgb(220 252 231);
bg-green-200background-color: rgb(187 247 208);
bg-green-300background-color: rgb(134 239 172);
bg-green-400background-color: rgb(74 222 128);
bg-green-500background-color: rgb(34 197 94);
bg-green-600background-color: rgb(22 163 74);
bg-green-700background-color: rgb(21 128 61);
bg-green-800background-color: rgb(22 101 52);
bg-green-900background-color: rgb(20 83 45);
bg-green-950background-color: rgb(5 46 22);
bg-emerald-50background-color: rgb(236 253 245);
bg-emerald-100background-color: rgb(209 250 229);
bg-emerald-200background-color: rgb(167 243 208);
bg-emerald-300background-color: rgb(110 231 183);
bg-emerald-400background-color: rgb(52 211 153);
bg-emerald-500background-color: rgb(16 185 129);
bg-emerald-600background-color: rgb(5 150 105);
bg-emerald-700background-color: rgb(4 120 87);
bg-emerald-800background-color: rgb(6 95 70);
bg-emerald-900background-color: rgb(6 78 59);
bg-emerald-950background-color: rgb(2 44 34);
bg-teal-50background-color: rgb(240 253 250);
bg-teal-100background-color: rgb(204 251 241);
bg-teal-200background-color: rgb(153 246 228);
bg-teal-300background-color: rgb(94 234 212);
bg-teal-400background-color: rgb(45 212 191);
bg-teal-500background-color: rgb(20 184 166);
bg-teal-600background-color: rgb(13 148 136);
bg-teal-700background-color: rgb(15 118 110);
bg-teal-800background-color: rgb(17 94 89);
bg-teal-900background-color: rgb(19 78 74);
bg-teal-950background-color: rgb(4 47 46);
bg-cyan-50background-color: rgb(236 254 255);
bg-cyan-100background-color: rgb(207 250 254);
bg-cyan-200background-color: rgb(165 243 252);
bg-cyan-300background-color: rgb(103 232 249);
bg-cyan-400background-color: rgb(34 211 238);
bg-cyan-500background-color: rgb(6 182 212);
bg-cyan-600background-color: rgb(8 145 178);
bg-cyan-700background-color: rgb(14 116 144);
bg-cyan-800background-color: rgb(21 94 117);
bg-cyan-900background-color: rgb(22 78 99);
bg-cyan-950background-color: rgb(8 51 68);
bg-sky-50background-color: rgb(240 249 255);
bg-sky-100background-color: rgb(224 242 254);
bg-sky-200background-color: rgb(186 230 253);
bg-sky-300background-color: rgb(125 211 252);
bg-sky-400background-color: rgb(56 189 248);
bg-sky-500background-color: rgb(14 165 233);
bg-sky-600background-color: rgb(2 132 199);
bg-sky-700background-color: rgb(3 105 161);
bg-sky-800background-color: rgb(7 89 133);
bg-sky-900background-color: rgb(12 74 110);
bg-sky-950background-color: rgb(8 47 73);
bg-blue-50background-color: rgb(239 246 255);
bg-blue-100background-color: rgb(219 234 254);
bg-blue-200background-color: rgb(191 219 254);
bg-blue-300background-color: rgb(147 197 253);
bg-blue-400background-color: rgb(96 165 250);
bg-blue-500background-color: rgb(59 130 246);
bg-blue-600background-color: rgb(37 99 235);
bg-blue-700background-color: rgb(29 78 216);
bg-blue-800background-color: rgb(30 64 175);
bg-blue-900background-color: rgb(30 58 138);
bg-blue-950background-color: rgb(23 37 84);
bg-indigo-50background-color: rgb(238 242 255);
bg-indigo-100background-color: rgb(224 231 255);
bg-indigo-200background-color: rgb(199 210 254);
bg-indigo-300background-color: rgb(165 180 252);
bg-indigo-400background-color: rgb(129 140 248);
bg-indigo-500background-color: rgb(99 102 241);
bg-indigo-600background-color: rgb(79 70 229);
bg-indigo-700background-color: rgb(67 56 202);
bg-indigo-800background-color: rgb(55 48 163);
bg-indigo-900background-color: rgb(49 46 129);
bg-indigo-950background-color: rgb(30 27 75);
bg-violet-50background-color: rgb(245 243 255);
bg-violet-100background-color: rgb(237 233 254);
bg-violet-200background-color: rgb(221 214 254);
bg-violet-300background-color: rgb(196 181 253);
bg-violet-400background-color: rgb(167 139 250);
bg-violet-500background-color: rgb(139 92 246);
bg-violet-600background-color: rgb(124 58 237);
bg-violet-700background-color: rgb(109 40 217);
bg-violet-800background-color: rgb(91 33 182);
bg-violet-900background-color: rgb(76 29 149);
bg-violet-950background-color: rgb(46 16 101);
bg-purple-50background-color: rgb(250 245 255);
bg-purple-100background-color: rgb(243 232 255);
bg-purple-200background-color: rgb(233 213 255);
bg-purple-300background-color: rgb(216 180 254);
bg-purple-400background-color: rgb(192 132 252);
bg-purple-500background-color: rgb(168 85 247);
bg-purple-600background-color: rgb(147 51 234);
bg-purple-700background-color: rgb(126 34 206);
bg-purple-800background-color: rgb(107 33 168);
bg-purple-900background-color: rgb(88 28 135);
bg-purple-950background-color: rgb(59 7 100);
bg-fuchsia-50background-color: rgb(253 244 255);
bg-fuchsia-100background-color: rgb(250 232 255);
bg-fuchsia-200background-color: rgb(245 208 254);
bg-fuchsia-300background-color: rgb(240 171 252);
bg-fuchsia-400background-color: rgb(232 121 249);
bg-fuchsia-500background-color: rgb(217 70 239);
bg-fuchsia-600background-color: rgb(192 38 211);
bg-fuchsia-700background-color: rgb(162 28 175);
bg-fuchsia-800background-color: rgb(134 25 143);
bg-fuchsia-900background-color: rgb(112 26 117);
bg-fuchsia-950background-color: rgb(74 4 78);
bg-pink-50background-color: rgb(253 242 248);
bg-pink-100background-color: rgb(252 231 243);
bg-pink-200background-color: rgb(251 207 232);
bg-pink-300background-color: rgb(249 168 212);
bg-pink-400background-color: rgb(244 114 182);
bg-pink-500background-color: rgb(236 72 153);
bg-pink-600background-color: rgb(219 39 119);
bg-pink-700background-color: rgb(190 24 93);
bg-pink-800background-color: rgb(157 23 77);
bg-pink-900background-color: rgb(131 24 67);
bg-pink-950background-color: rgb(80 7 36);
bg-rose-50background-color: rgb(255 241 242);
bg-rose-100background-color: rgb(255 228 230);
bg-rose-200background-color: rgb(254 205 211);
bg-rose-300background-color: rgb(253 164 175);
bg-rose-400background-color: rgb(251 113 133);
bg-rose-500background-color: rgb(244 63 94);
bg-rose-600background-color: rgb(225 29 72);
bg-rose-700background-color: rgb(190 18 60);
bg-rose-800background-color: rgb(159 18 57);
bg-rose-900background-color: rgb(136 19 55);
bg-rose-950background-color: rgb(76 5 25);

边框圆角 ​

类对应的 CSS
rounded-noneborder-radius: 0px;
rounded-smborder-radius: 0.125rem; /* 2px */
roundedborder-radius: 0.25rem; /* 4px */
rounded-mdborder-radius: 0.375rem; /* 6px */
rounded-lgborder-radius: 0.5rem; /* 8px */
rounded-xlborder-radius: 0.75rem; /* 12px */
rounded-2xlborder-radius: 1rem; /* 16px */
rounded-3xlborder-radius: 1.5rem; /* 24px */
rounded-fullborder-radius: 9999px;
rounded-s-noneborder-start-start-radius: 0px; border-end-start-radius: 0px;
rounded-s-smborder-start-start-radius: 0.125rem; /* 2px / border-end-start-radius: 0.125rem; / 2px */
rounded-sborder-start-start-radius: 0.25rem; /* 4px / border-end-start-radius: 0.25rem; / 4px */
rounded-s-mdborder-start-start-radius: 0.375rem; /* 6px / border-end-start-radius: 0.375rem; / 6px */
rounded-s-lgborder-start-start-radius: 0.5rem; /* 8px / border-end-start-radius: 0.5rem; / 8px */
rounded-s-xlborder-start-start-radius: 0.75rem; /* 12px / border-end-start-radius: 0.75rem; / 12px */
rounded-s-2xlborder-start-start-radius: 1rem; /* 16px / border-end-start-radius: 1rem; / 16px */
rounded-s-3xlborder-start-start-radius: 1.5rem; /* 24px / border-end-start-radius: 1.5rem; / 24px */
rounded-s-fullborder-start-start-radius: 9999px; border-end-start-radius: 9999px;
rounded-e-noneborder-start-end-radius: 0px; border-end-end-radius: 0px;
rounded-e-smborder-start-end-radius: 0.125rem; /* 2px / border-end-end-radius: 0.125rem; / 2px */
rounded-eborder-start-end-radius: 0.25rem; /* 4px / border-end-end-radius: 0.25rem; / 4px */
rounded-e-mdborder-start-end-radius: 0.375rem; /* 6px / border-end-end-radius: 0.375rem; / 6px */
rounded-e-lgborder-start-end-radius: 0.5rem; /* 8px / border-end-end-radius: 0.5rem; / 8px */
rounded-e-xlborder-start-end-radius: 0.75rem; /* 12px / border-end-end-radius: 0.75rem; / 12px */
rounded-e-2xlborder-start-end-radius: 1rem; /* 16px / border-end-end-radius: 1rem; / 16px */
rounded-e-3xlborder-start-end-radius: 1.5rem; /* 24px / border-end-end-radius: 1.5rem; / 24px */
rounded-e-fullborder-start-end-radius: 9999px; border-end-end-radius: 9999px;
rounded-t-noneborder-top-left-radius: 0px; border-top-right-radius: 0px;
rounded-t-smborder-top-left-radius: 0.125rem; /* 2px / border-top-right-radius: 0.125rem; / 2px */
rounded-tborder-top-left-radius: 0.25rem; /* 4px / border-top-right-radius: 0.25rem; / 4px */
rounded-t-mdborder-top-left-radius: 0.375rem; /* 6px / border-top-right-radius: 0.375rem; / 6px */
rounded-t-lgborder-top-left-radius: 0.5rem; /* 8px / border-top-right-radius: 0.5rem; / 8px */
rounded-t-xlborder-top-left-radius: 0.75rem; /* 12px / border-top-right-radius: 0.75rem; / 12px */
rounded-t-2xlborder-top-left-radius: 1rem; /* 16px / border-top-right-radius: 1rem; / 16px */
rounded-t-3xlborder-top-left-radius: 1.5rem; /* 24px / border-top-right-radius: 1.5rem; / 24px */
rounded-t-fullborder-top-left-radius: 9999px; border-top-right-radius: 9999px;
rounded-r-noneborder-top-right-radius: 0px; border-bottom-right-radius: 0px;
rounded-r-smborder-top-right-radius: 0.125rem; /* 2px / border-bottom-right-radius: 0.125rem; / 2px */
rounded-rborder-top-right-radius: 0.25rem; /* 4px / border-bottom-right-radius: 0.25rem; / 4px */
rounded-r-mdborder-top-right-radius: 0.375rem; /* 6px / border-bottom-right-radius: 0.375rem; / 6px */
rounded-r-lgborder-top-right-radius: 0.5rem; /* 8px / border-bottom-right-radius: 0.5rem; / 8px */
rounded-r-xlborder-top-right-radius: 0.75rem; /* 12px / border-bottom-right-radius: 0.75rem; / 12px */
rounded-r-2xlborder-top-right-radius: 1rem; /* 16px / border-bottom-right-radius: 1rem; / 16px */
rounded-r-3xlborder-top-right-radius: 1.5rem; /* 24px / border-bottom-right-radius: 1.5rem; / 24px */
rounded-r-fullborder-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
rounded-b-noneborder-bottom-right-radius: 0px; border-bottom-left-radius: 0px;
rounded-b-smborder-bottom-right-radius: 0.125rem; /* 2px / border-bottom-left-radius: 0.125rem; / 2px */
rounded-bborder-bottom-right-radius: 0.25rem; /* 4px / border-bottom-left-radius: 0.25rem; / 4px */
rounded-b-mdborder-bottom-right-radius: 0.375rem; /* 6px / border-bottom-left-radius: 0.375rem; / 6px */
rounded-b-lgborder-bottom-right-radius: 0.5rem; /* 8px / border-bottom-left-radius: 0.5rem; / 8px */
rounded-b-xlborder-bottom-right-radius: 0.75rem; /* 12px / border-bottom-left-radius: 0.75rem; / 12px */
rounded-b-2xlborder-bottom-right-radius: 1rem; /* 16px / border-bottom-left-radius: 1rem; / 16px */
rounded-b-3xlborder-bottom-right-radius: 1.5rem; /* 24px / border-bottom-left-radius: 1.5rem; / 24px */
rounded-b-fullborder-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-l-noneborder-top-left-radius: 0px; border-bottom-left-radius: 0px;
rounded-l-smborder-top-left-radius: 0.125rem; /* 2px / border-bottom-left-radius: 0.125rem; / 2px */
rounded-lborder-top-left-radius: 0.25rem; /* 4px / border-bottom-left-radius: 0.25rem; / 4px */
rounded-l-mdborder-top-left-radius: 0.375rem; /* 6px / border-bottom-left-radius: 0.375rem; / 6px */
rounded-l-lgborder-top-left-radius: 0.5rem; /* 8px / border-bottom-left-radius: 0.5rem; / 8px */
rounded-l-xlborder-top-left-radius: 0.75rem; /* 12px / border-bottom-left-radius: 0.75rem; / 12px */
rounded-l-2xlborder-top-left-radius: 1rem; /* 16px / border-bottom-left-radius: 1rem; / 16px */
rounded-l-3xlborder-top-left-radius: 1.5rem; /* 24px / border-bottom-left-radius: 1.5rem; / 24px */
rounded-l-fullborder-top-left-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-ss-noneborder-start-start-radius: 0px;
rounded-ss-smborder-start-start-radius: 0.125rem; /* 2px */
rounded-ssborder-start-start-radius: 0.25rem; /* 4px */
rounded-ss-mdborder-start-start-radius: 0.375rem; /* 6px */
rounded-ss-lgborder-start-start-radius: 0.5rem; /* 8px */
rounded-ss-xlborder-start-start-radius: 0.75rem; /* 12px */
rounded-ss-2xlborder-start-start-radius: 1rem; /* 16px */
rounded-ss-3xlborder-start-start-radius: 1.5rem; /* 24px */
rounded-ss-fullborder-start-start-radius: 9999px;
rounded-se-noneborder-start-end-radius: 0px;
rounded-se-smborder-start-end-radius: 0.125rem; /* 2px */
rounded-seborder-start-end-radius: 0.25rem; /* 4px */
rounded-se-mdborder-start-end-radius: 0.375rem; /* 6px */
rounded-se-lgborder-start-end-radius: 0.5rem; /* 8px */
rounded-se-xlborder-start-end-radius: 0.75rem; /* 12px */
rounded-se-2xlborder-start-end-radius: 1rem; /* 16px */
rounded-se-3xlborder-start-end-radius: 1.5rem; /* 24px */
rounded-se-fullborder-start-end-radius: 9999px;
rounded-ee-noneborder-end-end-radius: 0px;
rounded-ee-smborder-end-end-radius: 0.125rem; /* 2px */
rounded-eeborder-end-end-radius: 0.25rem; /* 4px */
rounded-ee-mdborder-end-end-radius: 0.375rem; /* 6px */
rounded-ee-lgborder-end-end-radius: 0.5rem; /* 8px */
rounded-ee-xlborder-end-end-radius: 0.75rem; /* 12px */
rounded-ee-2xlborder-end-end-radius: 1rem; /* 16px */
rounded-ee-3xlborder-end-end-radius: 1.5rem; /* 24px */
rounded-ee-fullborder-end-end-radius: 9999px;
rounded-es-noneborder-end-start-radius: 0px;
rounded-es-smborder-end-start-radius: 0.125rem; /* 2px */
rounded-esborder-end-start-radius: 0.25rem; /* 4px */
rounded-es-mdborder-end-start-radius: 0.375rem; /* 6px */
rounded-es-lgborder-end-start-radius: 0.5rem; /* 8px */
rounded-es-xlborder-end-start-radius: 0.75rem; /* 12px */
rounded-es-2xlborder-end-start-radius: 1rem; /* 16px */
rounded-es-3xlborder-end-start-radius: 1.5rem; /* 24px */
rounded-es-fullborder-end-start-radius: 9999px;
rounded-tl-noneborder-top-left-radius: 0px;
rounded-tl-smborder-top-left-radius: 0.125rem; /* 2px */
rounded-tlborder-top-left-radius: 0.25rem; /* 4px */
rounded-tl-mdborder-top-left-radius: 0.375rem; /* 6px */
rounded-tl-lgborder-top-left-radius: 0.5rem; /* 8px */
rounded-tl-xlborder-top-left-radius: 0.75rem; /* 12px */
rounded-tl-2xlborder-top-left-radius: 1rem; /* 16px */
rounded-tl-3xlborder-top-left-radius: 1.5rem; /* 24px */
rounded-tl-fullborder-top-left-radius: 9999px;
rounded-tr-noneborder-top-right-radius: 0px;
rounded-tr-smborder-top-right-radius: 0.125rem; /* 2px */
rounded-trborder-top-right-radius: 0.25rem; /* 4px */
rounded-tr-mdborder-top-right-radius: 0.375rem; /* 6px */
rounded-tr-lgborder-top-right-radius: 0.5rem; /* 8px */
rounded-tr-xlborder-top-right-radius: 0.75rem; /* 12px */
rounded-tr-2xlborder-top-right-radius: 1rem; /* 16px */
rounded-tr-3xlborder-top-right-radius: 1.5rem; /* 24px */
rounded-tr-fullborder-top-right-radius: 9999px;
rounded-br-noneborder-bottom-right-radius: 0px;
rounded-br-smborder-bottom-right-radius: 0.125rem; /* 2px */
rounded-brborder-bottom-right-radius: 0.25rem; /* 4px */
rounded-br-mdborder-bottom-right-radius: 0.375rem; /* 6px */
rounded-br-lgborder-bottom-right-radius: 0.5rem; /* 8px */
rounded-br-xlborder-bottom-right-radius: 0.75rem; /* 12px */
rounded-br-2xlborder-bottom-right-radius: 1rem; /* 16px */
rounded-br-3xlborder-bottom-right-radius: 1.5rem; /* 24px */
rounded-br-fullborder-bottom-right-radius: 9999px;
rounded-bl-noneborder-bottom-left-radius: 0px;
rounded-bl-smborder-bottom-left-radius: 0.125rem; /* 2px */
rounded-blborder-bottom-left-radius: 0.25rem; /* 4px */
rounded-bl-mdborder-bottom-left-radius: 0.375rem; /* 6px */
rounded-bl-lgborder-bottom-left-radius: 0.5rem; /* 8px */
rounded-bl-xlborder-bottom-left-radius: 0.75rem; /* 12px */
rounded-bl-2xlborder-bottom-left-radius: 1rem; /* 16px */
rounded-bl-3xlborder-bottom-left-radius: 1.5rem; /* 24px */
rounded-bl-fullborder-bottom-left-radius: 9999px;

边框宽度 ​

类对应的 CSS
border-0border-width: 0px;
border-2border-width: 2px;
border-4border-width: 4px;
border-8border-width: 8px;
borderborder-width: 1px;
border-x-0border-left-width: 0px; border-right-width: 0px;
border-x-2border-left-width: 2px; border-right-width: 2px;
border-x-4border-left-width: 4px; border-right-width: 4px;
border-x-8border-left-width: 8px; border-right-width: 8px;
border-xborder-left-width: 1px; border-right-width: 1px;
border-y-0border-top-width: 0px; border-bottom-width: 0px;
border-y-2border-top-width: 2px; border-bottom-width: 2px;
border-y-4border-top-width: 4px; border-bottom-width: 4px;
border-y-8border-top-width: 8px; border-bottom-width: 8px;
border-yborder-top-width: 1px; border-bottom-width: 1px;
border-s-0border-inline-start-width: 0px;
border-s-2border-inline-start-width: 2px;
border-s-4border-inline-start-width: 4px;
border-s-8border-inline-start-width: 8px;
border-sborder-inline-start-width: 1px;
border-e-0border-inline-end-width: 0px;
border-e-2border-inline-end-width: 2px;
border-e-4border-inline-end-width: 4px;
border-e-8border-inline-end-width: 8px;
border-eborder-inline-end-width: 1px;
border-t-0border-top-width: 0px;
border-t-2border-top-width: 2px;
border-t-4border-top-width: 4px;
border-t-8border-top-width: 8px;
border-tborder-top-width: 1px;
border-r-0border-right-width: 0px;
border-r-2border-right-width: 2px;
border-r-4border-right-width: 4px;
border-r-8border-right-width: 8px;
border-rborder-right-width: 1px;
border-b-0border-bottom-width: 0px;
border-b-2border-bottom-width: 2px;
border-b-4border-bottom-width: 4px;
border-b-8border-bottom-width: 8px;
border-bborder-bottom-width: 1px;
border-l-0border-left-width: 0px;
border-l-2border-left-width: 2px;
border-l-4border-left-width: 4px;
border-l-8border-left-width: 8px;
border-lborder-left-width: 1px;

边框颜色 ​

类对应的 CSS
border-inheritborder-color: inherit;
border-currentborder-color: currentColor;
border-transparentborder-color: transparent;
border-blackborder-color: rgb(0 0 0);
border-whiteborder-color: rgb(255 255 255);
border-slate-50border-color: rgb(248 250 252);
border-slate-100border-color: rgb(241 245 249);
border-slate-200border-color: rgb(226 232 240);
border-slate-300border-color: rgb(203 213 225);
border-slate-400border-color: rgb(148 163 184);
border-slate-500border-color: rgb(100 116 139);
border-slate-600border-color: rgb(71 85 105);
border-slate-700border-color: rgb(51 65 85);
border-slate-800border-color: rgb(30 41 59);
border-slate-900border-color: rgb(15 23 42);
border-slate-950border-color: rgb(2 6 23);
border-gray-50border-color: rgb(249 250 251);
border-gray-100border-color: rgb(243 244 246);
border-gray-200border-color: rgb(229 231 235);
border-gray-300border-color: rgb(209 213 219);
border-gray-400border-color: rgb(156 163 175);
border-gray-500border-color: rgb(107 114 128);
border-gray-600border-color: rgb(75 85 99);
border-gray-700border-color: rgb(55 65 81);
border-gray-800border-color: rgb(31 41 55);
border-gray-900border-color: rgb(17 24 39);
border-gray-950border-color: rgb(3 7 18);
border-zinc-50border-color: rgb(250 250 250);
border-zinc-100border-color: rgb(244 244 245);
border-zinc-200border-color: rgb(228 228 231);
border-zinc-300border-color: rgb(212 212 216);
border-zinc-400border-color: rgb(161 161 170);
border-zinc-500border-color: rgb(113 113 122);
border-zinc-600border-color: rgb(82 82 91);
border-zinc-700border-color: rgb(63 63 70);
border-zinc-800border-color: rgb(39 39 42);
border-zinc-900border-color: rgb(24 24 27);
border-zinc-950border-color: rgb(9 9 11);
border-neutral-50border-color: rgb(250 250 250);
border-neutral-100border-color: rgb(245 245 245);
border-neutral-200border-color: rgb(229 229 229);
border-neutral-300border-color: rgb(212 212 212);
border-neutral-400border-color: rgb(163 163 163);
border-neutral-500border-color: rgb(115 115 115);
border-neutral-600border-color: rgb(82 82 82);
border-neutral-700border-color: rgb(64 64 64);
border-neutral-800border-color: rgb(38 38 38);
border-neutral-900border-color: rgb(23 23 23);
border-neutral-950border-color: rgb(10 10 10);
border-stone-50border-color: rgb(250 250 249);
border-stone-100border-color: rgb(245 245 244);
border-stone-200border-color: rgb(231 229 228);
border-stone-300border-color: rgb(214 211 209);
border-stone-400border-color: rgb(168 162 158);
border-stone-500border-color: rgb(120 113 108);
border-stone-600border-color: rgb(87 83 78);
border-stone-700border-color: rgb(68 64 60);
border-stone-800border-color: rgb(41 37 36);
border-stone-900border-color: rgb(28 25 23);
border-stone-950border-color: rgb(12 10 9);
border-red-50border-color: rgb(254 242 242);
border-red-100border-color: rgb(254 226 226);
border-red-200border-color: rgb(254 202 202);
border-red-300border-color: rgb(252 165 165);
border-red-400border-color: rgb(248 113 113);
border-red-500border-color: rgb(239 68 68);
border-red-600border-color: rgb(220 38 38);
border-red-700border-color: rgb(185 28 28);
border-red-800border-color: rgb(153 27 27);
border-red-900border-color: rgb(127 29 29);
border-red-950border-color: rgb(69 10 10);
border-orange-50border-color: rgb(255 247 237);
border-orange-100border-color: rgb(255 237 213);
border-orange-200border-color: rgb(254 215 170);
border-orange-300border-color: rgb(253 186 116);
border-orange-400border-color: rgb(251 146 60);
border-orange-500border-color: rgb(249 115 22);
border-orange-600border-color: rgb(234 88 12);
border-orange-700border-color: rgb(194 65 12);
border-orange-800border-color: rgb(154 52 18);
border-orange-900border-color: rgb(124 45 18);
border-orange-950border-color: rgb(67 20 7);
border-amber-50border-color: rgb(255 251 235);
border-amber-100border-color: rgb(254 243 199);
border-amber-200border-color: rgb(253 230 138);
border-amber-300border-color: rgb(252 211 77);
border-amber-400border-color: rgb(251 191 36);
border-amber-500border-color: rgb(245 158 11);
border-amber-600border-color: rgb(217 119 6);
border-amber-700border-color: rgb(180 83 9);
border-amber-800border-color: rgb(146 64 14);
border-amber-900border-color: rgb(120 53 15);
border-amber-950border-color: rgb(69 26 3);
border-yellow-50border-color: rgb(254 252 232);
border-yellow-100border-color: rgb(254 249 195);
border-yellow-200border-color: rgb(254 240 138);
border-yellow-300border-color: rgb(253 224 71);
border-yellow-400border-color: rgb(250 204 21);
border-yellow-500border-color: rgb(234 179 8);
border-yellow-600border-color: rgb(202 138 4);
border-yellow-700border-color: rgb(161 98 7);
border-yellow-800border-color: rgb(133 77 14);
border-yellow-900border-color: rgb(113 63 18);
border-yellow-950border-color: rgb(66 32 6);
border-lime-50border-color: rgb(247 254 231);
border-lime-100border-color: rgb(236 252 203);
border-lime-200border-color: rgb(217 249 157);
border-lime-300border-color: rgb(190 242 100);
border-lime-400border-color: rgb(163 230 53);
border-lime-500border-color: rgb(132 204 22);
border-lime-600border-color: rgb(101 163 13);
border-lime-700border-color: rgb(77 124 15);
border-lime-800border-color: rgb(63 98 18);
border-lime-900border-color: rgb(54 83 20);
border-lime-950border-color: rgb(26 46 5);
border-green-50border-color: rgb(240 253 244);
border-green-100border-color: rgb(220 252 231);
border-green-200border-color: rgb(187 247 208);
border-green-300border-color: rgb(134 239 172);
border-green-400border-color: rgb(74 222 128);
border-green-500border-color: rgb(34 197 94);
border-green-600border-color: rgb(22 163 74);
border-green-700border-color: rgb(21 128 61);
border-green-800border-color: rgb(22 101 52);
border-green-900border-color: rgb(20 83 45);
border-green-950border-color: rgb(5 46 22);
border-emerald-50border-color: rgb(236 253 245);
border-emerald-100border-color: rgb(209 250 229);
border-emerald-200border-color: rgb(167 243 208);
border-emerald-300border-color: rgb(110 231 183);
border-emerald-400border-color: rgb(52 211 153);
border-emerald-500border-color: rgb(16 185 129);
border-emerald-600border-color: rgb(5 150 105);
border-emerald-700border-color: rgb(4 120 87);
border-emerald-800border-color: rgb(6 95 70);
border-emerald-900border-color: rgb(6 78 59);
border-emerald-950border-color: rgb(2 44 34);
border-teal-50border-color: rgb(240 253 250);
border-teal-100border-color: rgb(204 251 241);
border-teal-200border-color: rgb(153 246 228);
border-teal-300border-color: rgb(94 234 212);
border-teal-400border-color: rgb(45 212 191);
border-teal-500border-color: rgb(20 184 166);
border-teal-600border-color: rgb(13 148 136);
border-teal-700border-color: rgb(15 118 110);
border-teal-800border-color: rgb(17 94 89);
border-teal-900border-color: rgb(19 78 74);
border-teal-950border-color: rgb(4 47 46);
border-cyan-50border-color: rgb(236 254 255);
border-cyan-100border-color: rgb(207 250 254);
border-cyan-200border-color: rgb(165 243 252);
border-cyan-300border-color: rgb(103 232 249);
border-cyan-400border-color: rgb(34 211 238);
border-cyan-500border-color: rgb(6 182 212);
border-cyan-600border-color: rgb(8 145 178);
border-cyan-700border-color: rgb(14 116 144);
border-cyan-800border-color: rgb(21 94 117);
border-cyan-900border-color: rgb(22 78 99);
border-cyan-950border-color: rgb(8 51 68);
border-sky-50border-color: rgb(240 249 255);
border-sky-100border-color: rgb(224 242 254);
border-sky-200border-color: rgb(186 230 253);
border-sky-300border-color: rgb(125 211 252);
border-sky-400border-color: rgb(56 189 248);
border-sky-500border-color: rgb(14 165 233);
border-sky-600border-color: rgb(2 132 199);
border-sky-700border-color: rgb(3 105 161);
border-sky-800border-color: rgb(7 89 133);
border-sky-900border-color: rgb(12 74 110);
border-sky-950border-color: rgb(8 47 73);
border-blue-50border-color: rgb(239 246 255);
border-blue-100border-color: rgb(219 234 254);
border-blue-200border-color: rgb(191 219 254);
border-blue-300border-color: rgb(147 197 253);
border-blue-400border-color: rgb(96 165 250);
border-blue-500border-color: rgb(59 130 246);
border-blue-600border-color: rgb(37 99 235);
border-blue-700border-color: rgb(29 78 216);
border-blue-800border-color: rgb(30 64 175);
border-blue-900border-color: rgb(30 58 138);
border-blue-950border-color: rgb(23 37 84);
border-indigo-50border-color: rgb(238 242 255);
border-indigo-100border-color: rgb(224 231 255);
border-indigo-200border-color: rgb(199 210 254);
border-indigo-300border-color: rgb(165 180 252);
border-indigo-400border-color: rgb(129 140 248);
border-indigo-500border-color: rgb(99 102 241);
border-indigo-600border-color: rgb(79 70 229);
border-indigo-700border-color: rgb(67 56 202);
border-indigo-800border-color: rgb(55 48 163);
border-indigo-900border-color: rgb(49 46 129);
border-indigo-950border-color: rgb(30 27 75);
border-violet-50border-color: rgb(245 243 255);
border-violet-100border-color: rgb(237 233 254);
border-violet-200border-color: rgb(221 214 254);
border-violet-300border-color: rgb(196 181 253);
border-violet-400border-color: rgb(167 139 250);
border-violet-500border-color: rgb(139 92 246);
border-violet-600border-color: rgb(124 58 237);
border-violet-700border-color: rgb(109 40 217);
border-violet-800border-color: rgb(91 33 182);
border-violet-900border-color: rgb(76 29 149);
border-violet-950border-color: rgb(46 16 101);
border-purple-50border-color: rgb(250 245 255);
border-purple-100border-color: rgb(243 232 255);
border-purple-200border-color: rgb(233 213 255);
border-purple-300border-color: rgb(216 180 254);
border-purple-400border-color: rgb(192 132 252);
border-purple-500border-color: rgb(168 85 247);
border-purple-600border-color: rgb(147 51 234);
border-purple-700border-color: rgb(126 34 206);
border-purple-800border-color: rgb(107 33 168);
border-purple-900border-color: rgb(88 28 135);
border-purple-950border-color: rgb(59 7 100);
border-fuchsia-50border-color: rgb(253 244 255);
border-fuchsia-100border-color: rgb(250 232 255);
border-fuchsia-200border-color: rgb(245 208 254);
border-fuchsia-300border-color: rgb(240 171 252);
border-fuchsia-400border-color: rgb(232 121 249);
border-fuchsia-500border-color: rgb(217 70 239);
border-fuchsia-600border-color: rgb(192 38 211);
border-fuchsia-700border-color: rgb(162 28 175);
border-fuchsia-800border-color: rgb(134 25 143);
border-fuchsia-900border-color: rgb(112 26 117);
border-fuchsia-950border-color: rgb(74 4 78);
border-pink-50border-color: rgb(253 242 248);
border-pink-100border-color: rgb(252 231 243);
border-pink-200border-color: rgb(251 207 232);
border-pink-300border-color: rgb(249 168 212);
border-pink-400border-color: rgb(244 114 182);
border-pink-500border-color: rgb(236 72 153);
border-pink-600border-color: rgb(219 39 119);
border-pink-700border-color: rgb(190 24 93);
border-pink-800border-color: rgb(157 23 77);
border-pink-900border-color: rgb(131 24 67);
border-pink-950border-color: rgb(80 7 36);
border-rose-50border-color: rgb(255 241 242);
border-rose-100border-color: rgb(255 228 230);
border-rose-200border-color: rgb(254 205 211);
border-rose-300border-color: rgb(253 164 175);
border-rose-400border-color: rgb(251 113 133);
border-rose-500border-color: rgb(244 63 94);
border-rose-600border-color: rgb(225 29 72);
border-rose-700border-color: rgb(190 18 60);
border-rose-800border-color: rgb(159 18 57);
border-rose-900border-color: rgb(136 19 55);
border-rose-950border-color: rgb(76 5 25);
border-x-inheritborder-left-color: inherit; border-right-color: inherit;
border-x-currentborder-left-color: currentColor; border-right-color: currentColor;
border-x-transparentborder-left-color: transparent; border-right-color: transparent;
border-x-blackborder-left-color: rgb(0 0 0); border-right-color: rgb(0 0 0);
border-x-whiteborder-left-color: rgb(255 255 255); border-right-color: rgb(255 255 255);
border-x-slate-50border-left-color: rgb(248 250 252); border-right-color: rgb(248 250 252);
border-x-slate-100border-left-color: rgb(241 245 249); border-right-color: rgb(241 245 249);
border-x-slate-200border-left-color: rgb(226 232 240); border-right-color: rgb(226 232 240);
border-x-slate-300border-left-color: rgb(203 213 225); border-right-color: rgb(203 213 225);
border-x-slate-400border-left-color: rgb(148 163 184); border-right-color: rgb(148 163 184);
border-x-slate-500border-left-color: rgb(100 116 139); border-right-color: rgb(100 116 139);
border-x-slate-600border-left-color: rgb(71 85 105); border-right-color: rgb(71 85 105);
border-x-slate-700border-left-color: rgb(51 65 85); border-right-color: rgb(51 65 85);
border-x-slate-800border-left-color: rgb(30 41 59); border-right-color: rgb(30 41 59);
border-x-slate-900border-left-color: rgb(15 23 42); border-right-color: rgb(15 23 42);
border-x-slate-950border-left-color: rgb(2 6 23); border-right-color: rgb(2 6 23);
border-x-gray-50border-left-color: rgb(249 250 251); border-right-color: rgb(249 250 251);
border-x-gray-100border-left-color: rgb(243 244 246); border-right-color: rgb(243 244 246);
border-x-gray-200border-left-color: rgb(229 231 235); border-right-color: rgb(229 231 235);
border-x-gray-300border-left-color: rgb(209 213 219); border-right-color: rgb(209 213 219);
border-x-gray-400border-left-color: rgb(156 163 175); border-right-color: rgb(156 163 175);
border-x-gray-500border-left-color: rgb(107 114 128); border-right-color: rgb(107 114 128);
border-x-gray-600border-left-color: rgb(75 85 99); border-right-color: rgb(75 85 99);
border-x-gray-700border-left-color: rgb(55 65 81); border-right-color: rgb(55 65 81);
border-x-gray-800border-left-color: rgb(31 41 55); border-right-color: rgb(31 41 55);
border-x-gray-900border-left-color: rgb(17 24 39); border-right-color: rgb(17 24 39);
border-x-gray-950border-left-color: rgb(3 7 18); border-right-color: rgb(3 7 18);
border-x-zinc-50border-left-color: rgb(250 250 250); border-right-color: rgb(250 250 250);
border-x-zinc-100border-left-color: rgb(244 244 245); border-right-color: rgb(244 244 245);
border-x-zinc-200border-left-color: rgb(228 228 231); border-right-color: rgb(228 228 231);
border-x-zinc-300border-left-color: rgb(212 212 216); border-right-color: rgb(212 212 216);
border-x-zinc-400border-left-color: rgb(161 161 170); border-right-color: rgb(161 161 170);
border-x-zinc-500border-left-color: rgb(113 113 122); border-right-color: rgb(113 113 122);
border-x-zinc-600border-left-color: rgb(82 82 91); border-right-color: rgb(82 82 91);
border-x-zinc-700border-left-color: rgb(63 63 70); border-right-color: rgb(63 63 70);
border-x-zinc-800border-left-color: rgb(39 39 42); border-right-color: rgb(39 39 42);
border-x-zinc-900border-left-color: rgb(24 24 27); border-right-color: rgb(24 24 27);
border-x-zinc-950border-left-color: rgb(9 9 11); border-right-color: rgb(9 9 11);
border-x-neutral-50border-left-color: rgb(250 250 250); border-right-color: rgb(250 250 250);
border-x-neutral-100border-left-color: rgb(245 245 245); border-right-color: rgb(245 245 245);
border-x-neutral-200border-left-color: rgb(229 229 229); border-right-color: rgb(229 229 229);
border-x-neutral-300border-left-color: rgb(212 212 212); border-right-color: rgb(212 212 212);
border-x-neutral-400border-left-color: rgb(163 163 163); border-right-color: rgb(163 163 163);
border-x-neutral-500border-left-color: rgb(115 115 115); border-right-color: rgb(115 115 115);
border-x-neutral-600border-left-color: rgb(82 82 82); border-right-color: rgb(82 82 82);
border-x-neutral-700border-left-color: rgb(64 64 64); border-right-color: rgb(64 64 64);
border-x-neutral-800border-left-color: rgb(38 38 38); border-right-color: rgb(38 38 38);
border-x-neutral-900border-left-color: rgb(23 23 23); border-right-color: rgb(23 23 23);
border-x-neutral-950border-left-color: rgb(10 10 10); border-right-color: rgb(10 10 10);
border-x-stone-50border-left-color: rgb(250 250 249); border-right-color: rgb(250 250 249);
border-x-stone-100border-left-color: rgb(245 245 244); border-right-color: rgb(245 245 244);
border-x-stone-200border-left-color: rgb(231 229 228); border-right-color: rgb(231 229 228);
border-x-stone-300border-left-color: rgb(214 211 209); border-right-color: rgb(214 211 209);
border-x-stone-400border-left-color: rgb(168 162 158); border-right-color: rgb(168 162 158);
border-x-stone-500border-left-color: rgb(120 113 108); border-right-color: rgb(120 113 108);
border-x-stone-600border-left-color: rgb(87 83 78); border-right-color: rgb(87 83 78);
border-x-stone-700border-left-color: rgb(68 64 60); border-right-color: rgb(68 64 60);
border-x-stone-800border-left-color: rgb(41 37 36); border-right-color: rgb(41 37 36);
border-x-stone-900border-left-color: rgb(28 25 23); border-right-color: rgb(28 25 23);
border-x-stone-950border-left-color: rgb(12 10 9); border-right-color: rgb(12 10 9);
border-x-red-50border-left-color: rgb(254 242 242); border-right-color: rgb(254 242 242);
border-x-red-100border-left-color: rgb(254 226 226); border-right-color: rgb(254 226 226);
border-x-red-200border-left-color: rgb(254 202 202); border-right-color: rgb(254 202 202);
border-x-red-300border-left-color: rgb(252 165 165); border-right-color: rgb(252 165 165);
border-x-red-400border-left-color: rgb(248 113 113); border-right-color: rgb(248 113 113);
border-x-red-500border-left-color: rgb(239 68 68); border-right-color: rgb(239 68 68);
border-x-red-600border-left-color: rgb(220 38 38); border-right-color: rgb(220 38 38);
border-x-red-700border-left-color: rgb(185 28 28); border-right-color: rgb(185 28 28);
border-x-red-800border-left-color: rgb(153 27 27); border-right-color: rgb(153 27 27);
border-x-red-900border-left-color: rgb(127 29 29); border-right-color: rgb(127 29 29);
border-x-red-950border-left-color: rgb(69 10 10); border-right-color: rgb(69 10 10);
border-x-orange-50border-left-color: rgb(255 247 237); border-right-color: rgb(255 247 237);
border-x-orange-100border-left-color: rgb(255 237 213); border-right-color: rgb(255 237 213);
border-x-orange-200border-left-color: rgb(254 215 170); border-right-color: rgb(254 215 170);
border-x-orange-300border-left-color: rgb(253 186 116); border-right-color: rgb(253 186 116);
border-x-orange-400border-left-color: rgb(251 146 60); border-right-color: rgb(251 146 60);
border-x-orange-500border-left-color: rgb(249 115 22); border-right-color: rgb(249 115 22);
border-x-orange-600border-left-color: rgb(234 88 12); border-right-color: rgb(234 88 12);
border-x-orange-700border-left-color: rgb(194 65 12); border-right-color: rgb(194 65 12);
border-x-orange-800border-left-color: rgb(154 52 18); border-right-color: rgb(154 52 18);
border-x-orange-900border-left-color: rgb(124 45 18); border-right-color: rgb(124 45 18);
border-x-orange-950border-left-color: rgb(67 20 7); border-right-color: rgb(67 20 7);
border-x-amber-50border-left-color: rgb(255 251 235); border-right-color: rgb(255 251 235);
border-x-amber-100border-left-color: rgb(254 243 199); border-right-color: rgb(254 243 199);
border-x-amber-200border-left-color: rgb(253 230 138); border-right-color: rgb(253 230 138);
border-x-amber-300border-left-color: rgb(252 211 77); border-right-color: rgb(252 211 77);
border-x-amber-400border-left-color: rgb(251 191 36); border-right-color: rgb(251 191 36);
border-x-amber-500border-left-color: rgb(245 158 11); border-right-color: rgb(245 158 11);
border-x-amber-600border-left-color: rgb(217 119 6); border-right-color: rgb(217 119 6);
border-x-amber-700border-left-color: rgb(180 83 9); border-right-color: rgb(180 83 9);
border-x-amber-800border-left-color: rgb(146 64 14); border-right-color: rgb(146 64 14);
border-x-amber-900border-left-color: rgb(120 53 15); border-right-color: rgb(120 53 15);
border-x-amber-950border-left-color: rgb(69 26 3); border-right-color: rgb(69 26 3);
border-x-yellow-50border-left-color: rgb(254 252 232); border-right-color: rgb(254 252 232);
border-x-yellow-100border-left-color: rgb(254 249 195); border-right-color: rgb(254 249 195);
border-x-yellow-200border-left-color: rgb(254 240 138); border-right-color: rgb(254 240 138);
border-x-yellow-300border-left-color: rgb(253 224 71); border-right-color: rgb(253 224 71);
border-x-yellow-400border-left-color: rgb(250 204 21); border-right-color: rgb(250 204 21);
border-x-yellow-500border-left-color: rgb(234 179 8); border-right-color: rgb(234 179 8);
border-x-yellow-600border-left-color: rgb(202 138 4); border-right-color: rgb(202 138 4);
border-x-yellow-700border-left-color: rgb(161 98 7); border-right-color: rgb(161 98 7);
border-x-yellow-800border-left-color: rgb(133 77 14); border-right-color: rgb(133 77 14);
border-x-yellow-900border-left-color: rgb(113 63 18); border-right-color: rgb(113 63 18);
border-x-yellow-950border-left-color: rgb(66 32 6); border-right-color: rgb(66 32 6);
border-x-lime-50border-left-color: rgb(247 254 231); border-right-color: rgb(247 254 231);
border-x-lime-100border-left-color: rgb(236 252 203); border-right-color: rgb(236 252 203);
border-x-lime-200border-left-color: rgb(217 249 157); border-right-color: rgb(217 249 157);
border-x-lime-300border-left-color: rgb(190 242 100); border-right-color: rgb(190 242 100);
border-x-lime-400border-left-color: rgb(163 230 53); border-right-color: rgb(163 230 53);
border-x-lime-500border-left-color: rgb(132 204 22); border-right-color: rgb(132 204 22);
border-x-lime-600border-left-color: rgb(101 163 13); border-right-color: rgb(101 163 13);
border-x-lime-700border-left-color: rgb(77 124 15); border-right-color: rgb(77 124 15);
border-x-lime-800border-left-color: rgb(63 98 18); border-right-color: rgb(63 98 18);
border-x-lime-900border-left-color: rgb(54 83 20); border-right-color: rgb(54 83 20);
border-x-lime-950border-left-color: rgb(26 46 5); border-right-color: rgb(26 46 5);
border-x-green-50border-left-color: rgb(240 253 244); border-right-color: rgb(240 253 244);
border-x-green-100border-left-color: rgb(220 252 231); border-right-color: rgb(220 252 231);
border-x-green-200border-left-color: rgb(187 247 208); border-right-color: rgb(187 247 208);
border-x-green-300border-left-color: rgb(134 239 172); border-right-color: rgb(134 239 172);
border-x-green-400border-left-color: rgb(74 222 128); border-right-color: rgb(74 222 128);
border-x-green-500border-left-color: rgb(34 197 94); border-right-color: rgb(34 197 94);
border-x-green-600border-left-color: rgb(22 163 74); border-right-color: rgb(22 163 74);
border-x-green-700border-left-color: rgb(21 128 61); border-right-color: rgb(21 128 61);
border-x-green-800border-left-color: rgb(22 101 52); border-right-color: rgb(22 101 52);
border-x-green-900border-left-color: rgb(20 83 45); border-right-color: rgb(20 83 45);
border-x-green-950border-left-color: rgb(5 46 22); border-right-color: rgb(5 46 22);
border-x-emerald-50border-left-color: rgb(236 253 245); border-right-color: rgb(236 253 245);
border-x-emerald-100border-left-color: rgb(209 250 229); border-right-color: rgb(209 250 229);
border-x-emerald-200border-left-color: rgb(167 243 208); border-right-color: rgb(167 243 208);
border-x-emerald-300border-left-color: rgb(110 231 183); border-right-color: rgb(110 231 183);
border-x-emerald-400border-left-color: rgb(52 211 153); border-right-color: rgb(52 211 153);
border-x-emerald-500border-left-color: rgb(16 185 129); border-right-color: rgb(16 185 129);
border-x-emerald-600border-left-color: rgb(5 150 105); border-right-color: rgb(5 150 105);
border-x-emerald-700border-left-color: rgb(4 120 87); border-right-color: rgb(4 120 87);
border-x-emerald-800border-left-color: rgb(6 95 70); border-right-color: rgb(6 95 70);
border-x-emerald-900border-left-color: rgb(6 78 59); border-right-color: rgb(6 78 59);
border-x-emerald-950border-left-color: rgb(2 44 34); border-right-color: rgb(2 44 34);
border-x-teal-50border-left-color: rgb(240 253 250); border-right-color: rgb(240 253 250);
border-x-teal-100border-left-color: rgb(204 251 241); border-right-color: rgb(204 251 241);
border-x-teal-200border-left-color: rgb(153 246 228); border-right-color: rgb(153 246 228);
border-x-teal-300border-left-color: rgb(94 234 212); border-right-color: rgb(94 234 212);
border-x-teal-400border-left-color: rgb(45 212 191); border-right-color: rgb(45 212 191);
border-x-teal-500border-left-color: rgb(20 184 166); border-right-color: rgb(20 184 166);
border-x-teal-600border-left-color: rgb(13 148 136); border-right-color: rgb(13 148 136);
border-x-teal-700border-left-color: rgb(15 118 110); border-right-color: rgb(15 118 110);
border-x-teal-800border-left-color: rgb(17 94 89); border-right-color: rgb(17 94 89);
border-x-teal-900border-left-color: rgb(19 78 74); border-right-color: rgb(19 78 74);
border-x-teal-950border-left-color: rgb(4 47 46); border-right-color: rgb(4 47 46);
border-x-cyan-50border-left-color: rgb(236 254 255); border-right-color: rgb(236 254 255);
border-x-cyan-100border-left-color: rgb(207 250 254); border-right-color: rgb(207 250 254);
border-x-cyan-200border-left-color: rgb(165 243 252); border-right-color: rgb(165 243 252);
border-x-cyan-300border-left-color: rgb(103 232 249); border-right-color: rgb(103 232 249);
border-x-cyan-400border-left-color: rgb(34 211 238); border-right-color: rgb(34 211 238);
border-x-cyan-500border-left-color: rgb(6 182 212); border-right-color: rgb(6 182 212);
border-x-cyan-600border-left-color: rgb(8 145 178); border-right-color: rgb(8 145 178);
border-x-cyan-700border-left-color: rgb(14 116 144); border-right-color: rgb(14 116 144);
border-x-cyan-800border-left-color: rgb(21 94 117); border-right-color: rgb(21 94 117);
border-x-cyan-900border-left-color: rgb(22 78 99); border-right-color: rgb(22 78 99);
border-x-cyan-950border-left-color: rgb(8 51 68); border-right-color: rgb(8 51 68);
border-x-sky-50border-left-color: rgb(240 249 255); border-right-color: rgb(240 249 255);
border-x-sky-100border-left-color: rgb(224 242 254); border-right-color: rgb(224 242 254);
border-x-sky-200border-left-color: rgb(186 230 253); border-right-color: rgb(186 230 253);
border-x-sky-300border-left-color: rgb(125 211 252); border-right-color: rgb(125 211 252);
border-x-sky-400border-left-color: rgb(56 189 248); border-right-color: rgb(56 189 248);
border-x-sky-500border-left-color: rgb(14 165 233); border-right-color: rgb(14 165 233);
border-x-sky-600border-left-color: rgb(2 132 199); border-right-color: rgb(2 132 199);
border-x-sky-700border-left-color: rgb(3 105 161); border-right-color: rgb(3 105 161);
border-x-sky-800border-left-color: rgb(7 89 133); border-right-color: rgb(7 89 133);
border-x-sky-900border-left-color: rgb(12 74 110); border-right-color: rgb(12 74 110);
border-x-sky-950border-left-color: rgb(8 47 73); border-right-color: rgb(8 47 73);
border-x-blue-50border-left-color: rgb(239 246 255); border-right-color: rgb(239 246 255);
border-x-blue-100border-left-color: rgb(219 234 254); border-right-color: rgb(219 234 254);
border-x-blue-200border-left-color: rgb(191 219 254); border-right-color: rgb(191 219 254);
border-x-blue-300border-left-color: rgb(147 197 253); border-right-color: rgb(147 197 253);
border-x-blue-400border-left-color: rgb(96 165 250); border-right-color: rgb(96 165 250);
border-x-blue-500border-left-color: rgb(59 130 246); border-right-color: rgb(59 130 246);
border-x-blue-600border-left-color: rgb(37 99 235); border-right-color: rgb(37 99 235);
border-x-blue-700border-left-color: rgb(29 78 216); border-right-color: rgb(29 78 216);
border-x-blue-800border-left-color: rgb(30 64 175); border-right-color: rgb(30 64 175);
border-x-blue-900border-left-color: rgb(30 58 138); border-right-color: rgb(30 58 138);
border-x-blue-950border-left-color: rgb(23 37 84); border-right-color: rgb(23 37 84);
border-x-indigo-50border-left-color: rgb(238 242 255); border-right-color: rgb(238 242 255);
border-x-indigo-100border-left-color: rgb(224 231 255); border-right-color: rgb(224 231 255);
border-x-indigo-200border-left-color: rgb(199 210 254); border-right-color: rgb(199 210 254);
border-x-indigo-300border-left-color: rgb(165 180 252); border-right-color: rgb(165 180 252);
border-x-indigo-400border-left-color: rgb(129 140 248); border-right-color: rgb(129 140 248);
border-x-indigo-500border-left-color: rgb(99 102 241); border-right-color: rgb(99 102 241);
border-x-indigo-600border-left-color: rgb(79 70 229); border-right-color: rgb(79 70 229);
border-x-indigo-700border-left-color: rgb(67 56 202); border-right-color: rgb(67 56 202);
border-x-indigo-800border-left-color: rgb(55 48 163); border-right-color: rgb(55 48 163);
border-x-indigo-900border-left-color: rgb(49 46 129); border-right-color: rgb(49 46 129);
border-x-indigo-950border-left-color: rgb(30 27 75); border-right-color: rgb(30 27 75);
border-x-violet-50border-left-color: rgb(245 243 255); border-right-color: rgb(245 243 255);
border-x-violet-100border-left-color: rgb(237 233 254); border-right-color: rgb(237 233 254);
border-x-violet-200border-left-color: rgb(221 214 254); border-right-color: rgb(221 214 254);
border-x-violet-300border-left-color: rgb(196 181 253); border-right-color: rgb(196 181 253);
border-x-violet-400border-left-color: rgb(167 139 250); border-right-color: rgb(167 139 250);
border-x-violet-500border-left-color: rgb(139 92 246); border-right-color: rgb(139 92 246);
border-x-violet-600border-left-color: rgb(124 58 237); border-right-color: rgb(124 58 237);
border-x-violet-700border-left-color: rgb(109 40 217); border-right-color: rgb(109 40 217);
border-x-violet-800border-left-color: rgb(91 33 182); border-right-color: rgb(91 33 182);
border-x-violet-900border-left-color: rgb(76 29 149); border-right-color: rgb(76 29 149);
border-x-violet-950border-left-color: rgb(46 16 101); border-right-color: rgb(46 16 101);
border-x-purple-50border-left-color: rgb(250 245 255); border-right-color: rgb(250 245 255);
border-x-purple-100border-left-color: rgb(243 232 255); border-right-color: rgb(243 232 255);
border-x-purple-200border-left-color: rgb(233 213 255); border-right-color: rgb(233 213 255);
border-x-purple-300border-left-color: rgb(216 180 254); border-right-color: rgb(216 180 254);
border-x-purple-400border-left-color: rgb(192 132 252); border-right-color: rgb(192 132 252);
border-x-purple-500border-left-color: rgb(168 85 247); border-right-color: rgb(168 85 247);
border-x-purple-600border-left-color: rgb(147 51 234); border-right-color: rgb(147 51 234);
border-x-purple-700border-left-color: rgb(126 34 206); border-right-color: rgb(126 34 206);
border-x-purple-800border-left-color: rgb(107 33 168); border-right-color: rgb(107 33 168);
border-x-purple-900border-left-color: rgb(88 28 135); border-right-color: rgb(88 28 135);
border-x-purple-950border-left-color: rgb(59 7 100); border-right-color: rgb(59 7 100);
border-x-fuchsia-50border-left-color: rgb(253 244 255); border-right-color: rgb(253 244 255);
border-x-fuchsia-100border-left-color: rgb(250 232 255); border-right-color: rgb(250 232 255);
border-x-fuchsia-200border-left-color: rgb(245 208 254); border-right-color: rgb(245 208 254);
border-x-fuchsia-300border-left-color: rgb(240 171 252); border-right-color: rgb(240 171 252);
border-x-fuchsia-400border-left-color: rgb(232 121 249); border-right-color: rgb(232 121 249);
border-x-fuchsia-500border-left-color: rgb(217 70 239); border-right-color: rgb(217 70 239);
border-x-fuchsia-600border-left-color: rgb(192 38 211); border-right-color: rgb(192 38 211);
border-x-fuchsia-700border-left-color: rgb(162 28 175); border-right-color: rgb(162 28 175);
border-x-fuchsia-800border-left-color: rgb(134 25 143); border-right-color: rgb(134 25 143);
border-x-fuchsia-900border-left-color: rgb(112 26 117); border-right-color: rgb(112 26 117);
border-x-fuchsia-950border-left-color: rgb(74 4 78); border-right-color: rgb(74 4 78);
border-x-pink-50border-left-color: rgb(253 242 248); border-right-color: rgb(253 242 248);
border-x-pink-100border-left-color: rgb(252 231 243); border-right-color: rgb(252 231 243);
border-x-pink-200border-left-color: rgb(251 207 232); border-right-color: rgb(251 207 232);
border-x-pink-300border-left-color: rgb(249 168 212); border-right-color: rgb(249 168 212);
border-x-pink-400border-left-color: rgb(244 114 182); border-right-color: rgb(244 114 182);
border-x-pink-500border-left-color: rgb(236 72 153); border-right-color: rgb(236 72 153);
border-x-pink-600border-left-color: rgb(219 39 119); border-right-color: rgb(219 39 119);
border-x-pink-700border-left-color: rgb(190 24 93); border-right-color: rgb(190 24 93);
border-x-pink-800border-left-color: rgb(157 23 77); border-right-color: rgb(157 23 77);
border-x-pink-900border-left-color: rgb(131 24 67); border-right-color: rgb(131 24 67);
border-x-pink-950border-left-color: rgb(80 7 36); border-right-color: rgb(80 7 36);
border-x-rose-50border-left-color: rgb(255 241 242); border-right-color: rgb(255 241 242);
border-x-rose-100border-left-color: rgb(255 228 230); border-right-color: rgb(255 228 230);
border-x-rose-200border-left-color: rgb(254 205 211); border-right-color: rgb(254 205 211);
border-x-rose-300border-left-color: rgb(253 164 175); border-right-color: rgb(253 164 175);
border-x-rose-400border-left-color: rgb(251 113 133); border-right-color: rgb(251 113 133);
border-x-rose-500border-left-color: rgb(244 63 94); border-right-color: rgb(244 63 94);
border-x-rose-600border-left-color: rgb(225 29 72); border-right-color: rgb(225 29 72);
border-x-rose-700border-left-color: rgb(190 18 60); border-right-color: rgb(190 18 60);
border-x-rose-800border-left-color: rgb(159 18 57); border-right-color: rgb(159 18 57);
border-x-rose-900border-left-color: rgb(136 19 55); border-right-color: rgb(136 19 55);
border-x-rose-950border-left-color: rgb(76 5 25); border-right-color: rgb(76 5 25);
border-y-inheritborder-top-color: inherit; border-bottom-color: inherit;
border-y-currentborder-top-color: currentColor; border-bottom-color: currentColor;
border-y-transparentborder-top-color: transparent; border-bottom-color: transparent;
border-y-blackborder-top-color: rgb(0 0 0); border-bottom-color: rgb(0 0 0);
border-y-whiteborder-top-color: rgb(255 255 255); border-bottom-color: rgb(255 255 255);
border-y-slate-50border-top-color: rgb(248 250 252); border-bottom-color: rgb(248 250 252);
border-y-slate-100border-top-color: rgb(241 245 249); border-bottom-color: rgb(241 245 249);
border-y-slate-200border-top-color: rgb(226 232 240); border-bottom-color: rgb(226 232 240);
border-y-slate-300border-top-color: rgb(203 213 225); border-bottom-color: rgb(203 213 225);
border-y-slate-400border-top-color: rgb(148 163 184); border-bottom-color: rgb(148 163 184);
border-y-slate-500border-top-color: rgb(100 116 139); border-bottom-color: rgb(100 116 139);
border-y-slate-600border-top-color: rgb(71 85 105); border-bottom-color: rgb(71 85 105);
border-y-slate-700border-top-color: rgb(51 65 85); border-bottom-color: rgb(51 65 85);
border-y-slate-800border-top-color: rgb(30 41 59); border-bottom-color: rgb(30 41 59);
border-y-slate-900border-top-color: rgb(15 23 42); border-bottom-color: rgb(15 23 42);
border-y-slate-950border-top-color: rgb(2 6 23); border-bottom-color: rgb(2 6 23);
border-y-gray-50border-top-color: rgb(249 250 251); border-bottom-color: rgb(249 250 251);
border-y-gray-100border-top-color: rgb(243 244 246); border-bottom-color: rgb(243 244 246);
border-y-gray-200border-top-color: rgb(229 231 235); border-bottom-color: rgb(229 231 235);
border-y-gray-300border-top-color: rgb(209 213 219); border-bottom-color: rgb(209 213 219);
border-y-gray-400border-top-color: rgb(156 163 175); border-bottom-color: rgb(156 163 175);
border-y-gray-500border-top-color: rgb(107 114 128); border-bottom-color: rgb(107 114 128);
border-y-gray-600border-top-color: rgb(75 85 99); border-bottom-color: rgb(75 85 99);
border-y-gray-700border-top-color: rgb(55 65 81); border-bottom-color: rgb(55 65 81);
border-y-gray-800border-top-color: rgb(31 41 55); border-bottom-color: rgb(31 41 55);
border-y-gray-900border-top-color: rgb(17 24 39); border-bottom-color: rgb(17 24 39);
border-y-gray-950border-top-color: rgb(3 7 18); border-bottom-color: rgb(3 7 18);
border-y-zinc-50border-top-color: rgb(250 250 250); border-bottom-color: rgb(250 250 250);
border-y-zinc-100border-top-color: rgb(244 244 245); border-bottom-color: rgb(244 244 245);
border-y-zinc-200border-top-color: rgb(228 228 231); border-bottom-color: rgb(228 228 231);
border-y-zinc-300border-top-color: rgb(212 212 216); border-bottom-color: rgb(212 212 216);
border-y-zinc-400border-top-color: rgb(161 161 170); border-bottom-color: rgb(161 161 170);
border-y-zinc-500border-top-color: rgb(113 113 122); border-bottom-color: rgb(113 113 122);
border-y-zinc-600border-top-color: rgb(82 82 91); border-bottom-color: rgb(82 82 91);
border-y-zinc-700border-top-color: rgb(63 63 70); border-bottom-color: rgb(63 63 70);
border-y-zinc-800border-top-color: rgb(39 39 42); border-bottom-color: rgb(39 39 42);
border-y-zinc-900border-top-color: rgb(24 24 27); border-bottom-color: rgb(24 24 27);
border-y-zinc-950border-top-color: rgb(9 9 11); border-bottom-color: rgb(9 9 11);
border-y-neutral-50border-top-color: rgb(250 250 250); border-bottom-color: rgb(250 250 250);
border-y-neutral-100border-top-color: rgb(245 245 245); border-bottom-color: rgb(245 245 245);
border-y-neutral-200border-top-color: rgb(229 229 229); border-bottom-color: rgb(229 229 229);
border-y-neutral-300border-top-color: rgb(212 212 212); border-bottom-color: rgb(212 212 212);
border-y-neutral-400border-top-color: rgb(163 163 163); border-bottom-color: rgb(163 163 163);
border-y-neutral-500border-top-color: rgb(115 115 115); border-bottom-color: rgb(115 115 115);
border-y-neutral-600border-top-color: rgb(82 82 82); border-bottom-color: rgb(82 82 82);
border-y-neutral-700border-top-color: rgb(64 64 64); border-bottom-color: rgb(64 64 64);
border-y-neutral-800border-top-color: rgb(38 38 38); border-bottom-color: rgb(38 38 38);
border-y-neutral-900border-top-color: rgb(23 23 23); border-bottom-color: rgb(23 23 23);
border-y-neutral-950border-top-color: rgb(10 10 10); border-bottom-color: rgb(10 10 10);
border-y-stone-50border-top-color: rgb(250 250 249); border-bottom-color: rgb(250 250 249);
border-y-stone-100border-top-color: rgb(245 245 244); border-bottom-color: rgb(245 245 244);
border-y-stone-200border-top-color: rgb(231 229 228); border-bottom-color: rgb(231 229 228);
border-y-stone-300border-top-color: rgb(214 211 209); border-bottom-color: rgb(214 211 209);
border-y-stone-400border-top-color: rgb(168 162 158); border-bottom-color: rgb(168 162 158);
border-y-stone-500border-top-color: rgb(120 113 108); border-bottom-color: rgb(120 113 108);
border-y-stone-600border-top-color: rgb(87 83 78); border-bottom-color: rgb(87 83 78);
border-y-stone-700border-top-color: rgb(68 64 60); border-bottom-color: rgb(68 64 60);
border-y-stone-800border-top-color: rgb(41 37 36); border-bottom-color: rgb(41 37 36);
border-y-stone-900border-top-color: rgb(28 25 23); border-bottom-color: rgb(28 25 23);
border-y-stone-950border-top-color: rgb(12 10 9); border-bottom-color: rgb(12 10 9);
border-y-red-50border-top-color: rgb(254 242 242); border-bottom-color: rgb(254 242 242);
border-y-red-100border-top-color: rgb(254 226 226); border-bottom-color: rgb(254 226 226);
border-y-red-200border-top-color: rgb(254 202 202); border-bottom-color: rgb(254 202 202);
border-y-red-300border-top-color: rgb(252 165 165); border-bottom-color: rgb(252 165 165);
border-y-red-400border-top-color: rgb(248 113 113); border-bottom-color: rgb(248 113 113);
border-y-red-500border-top-color: rgb(239 68 68); border-bottom-color: rgb(239 68 68);
border-y-red-600border-top-color: rgb(220 38 38); border-bottom-color: rgb(220 38 38);
border-y-red-700border-top-color: rgb(185 28 28); border-bottom-color: rgb(185 28 28);
border-y-red-800border-top-color: rgb(153 27 27); border-bottom-color: rgb(153 27 27);
border-y-red-900border-top-color: rgb(127 29 29); border-bottom-color: rgb(127 29 29);
border-y-red-950border-top-color: rgb(69 10 10); border-bottom-color: rgb(69 10 10);
border-y-orange-50border-top-color: rgb(255 247 237); border-bottom-color: rgb(255 247 237);
border-y-orange-100border-top-color: rgb(255 237 213); border-bottom-color: rgb(255 237 213);
border-y-orange-200border-top-color: rgb(254 215 170); border-bottom-color: rgb(254 215 170);
border-y-orange-300border-top-color: rgb(253 186 116); border-bottom-color: rgb(253 186 116);
border-y-orange-400border-top-color: rgb(251 146 60); border-bottom-color: rgb(251 146 60);
border-y-orange-500border-top-color: rgb(249 115 22); border-bottom-color: rgb(249 115 22);
border-y-orange-600border-top-color: rgb(234 88 12); border-bottom-color: rgb(234 88 12);
border-y-orange-700border-top-color: rgb(194 65 12); border-bottom-color: rgb(194 65 12);
border-y-orange-800border-top-color: rgb(154 52 18); border-bottom-color: rgb(154 52 18);
border-y-orange-900border-top-color: rgb(124 45 18); border-bottom-color: rgb(124 45 18);
border-y-orange-950border-top-color: rgb(67 20 7); border-bottom-color: rgb(67 20 7);
border-y-amber-50border-top-color: rgb(255 251 235); border-bottom-color: rgb(255 251 235);
border-y-amber-100border-top-color: rgb(254 243 199); border-bottom-color: rgb(254 243 199);
border-y-amber-200border-top-color: rgb(253 230 138); border-bottom-color: rgb(253 230 138);
border-y-amber-300border-top-color: rgb(252 211 77); border-bottom-color: rgb(252 211 77);
border-y-amber-400border-top-color: rgb(251 191 36); border-bottom-color: rgb(251 191 36);
border-y-amber-500border-top-color: rgb(245 158 11); border-bottom-color: rgb(245 158 11);
border-y-amber-600border-top-color: rgb(217 119 6); border-bottom-color: rgb(217 119 6);
border-y-amber-700border-top-color: rgb(180 83 9); border-bottom-color: rgb(180 83 9);
border-y-amber-800border-top-color: rgb(146 64 14); border-bottom-color: rgb(146 64 14);
border-y-amber-900border-top-color: rgb(120 53 15); border-bottom-color: rgb(120 53 15);
border-y-amber-950border-top-color: rgb(69 26 3); border-bottom-color: rgb(69 26 3);
border-y-yellow-50border-top-color: rgb(254 252 232); border-bottom-color: rgb(254 252 232);
border-y-yellow-100border-top-color: rgb(254 249 195); border-bottom-color: rgb(254 249 195);
border-y-yellow-200border-top-color: rgb(254 240 138); border-bottom-color: rgb(254 240 138);
border-y-yellow-300border-top-color: rgb(253 224 71); border-bottom-color: rgb(253 224 71);
border-y-yellow-400border-top-color: rgb(250 204 21); border-bottom-color: rgb(250 204 21);
border-y-yellow-500border-top-color: rgb(234 179 8); border-bottom-color: rgb(234 179 8);
border-y-yellow-600border-top-color: rgb(202 138 4); border-bottom-color: rgb(202 138 4);
border-y-yellow-700border-top-color: rgb(161 98 7); border-bottom-color: rgb(161 98 7);
border-y-yellow-800border-top-color: rgb(133 77 14); border-bottom-color: rgb(133 77 14);
border-y-yellow-900border-top-color: rgb(113 63 18); border-bottom-color: rgb(113 63 18);
border-y-yellow-950border-top-color: rgb(66 32 6); border-bottom-color: rgb(66 32 6);
border-y-lime-50border-top-color: rgb(247 254 231); border-bottom-color: rgb(247 254 231);
border-y-lime-100border-top-color: rgb(236 252 203); border-bottom-color: rgb(236 252 203);
border-y-lime-200border-top-color: rgb(217 249 157); border-bottom-color: rgb(217 249 157);
border-y-lime-300border-top-color: rgb(190 242 100); border-bottom-color: rgb(190 242 100);
border-y-lime-400border-top-color: rgb(163 230 53); border-bottom-color: rgb(163 230 53);
border-y-lime-500border-top-color: rgb(132 204 22); border-bottom-color: rgb(132 204 22);
border-y-lime-600border-top-color: rgb(101 163 13); border-bottom-color: rgb(101 163 13);
border-y-lime-700border-top-color: rgb(77 124 15); border-bottom-color: rgb(77 124 15);
border-y-lime-800border-top-color: rgb(63 98 18); border-bottom-color: rgb(63 98 18);
border-y-lime-900border-top-color: rgb(54 83 20); border-bottom-color: rgb(54 83 20);
border-y-lime-950border-top-color: rgb(26 46 5); border-bottom-color: rgb(26 46 5);
border-y-green-50border-top-color: rgb(240 253 244); border-bottom-color: rgb(240 253 244);
border-y-green-100border-top-color: rgb(220 252 231); border-bottom-color: rgb(220 252 231);
border-y-green-200border-top-color: rgb(187 247 208); border-bottom-color: rgb(187 247 208);
border-y-green-300border-top-color: rgb(134 239 172); border-bottom-color: rgb(134 239 172);
border-y-green-400border-top-color: rgb(74 222 128); border-bottom-color: rgb(74 222 128);
border-y-green-500border-top-color: rgb(34 197 94); border-bottom-color: rgb(34 197 94);
border-y-green-600border-top-color: rgb(22 163 74); border-bottom-color: rgb(22 163 74);
border-y-green-700border-top-color: rgb(21 128 61); border-bottom-color: rgb(21 128 61);
border-y-green-800border-top-color: rgb(22 101 52); border-bottom-color: rgb(22 101 52);
border-y-green-900border-top-color: rgb(20 83 45); border-bottom-color: rgb(20 83 45);
border-y-green-950border-top-color: rgb(5 46 22); border-bottom-color: rgb(5 46 22);
border-y-emerald-50border-top-color: rgb(236 253 245); border-bottom-color: rgb(236 253 245);
border-y-emerald-100border-top-color: rgb(209 250 229); border-bottom-color: rgb(209 250 229);
border-y-emerald-200border-top-color: rgb(167 243 208); border-bottom-color: rgb(167 243 208);
border-y-emerald-300border-top-color: rgb(110 231 183); border-bottom-color: rgb(110 231 183);
border-y-emerald-400border-top-color: rgb(52 211 153); border-bottom-color: rgb(52 211 153);
border-y-emerald-500border-top-color: rgb(16 185 129); border-bottom-color: rgb(16 185 129);
border-y-emerald-600border-top-color: rgb(5 150 105); border-bottom-color: rgb(5 150 105);
border-y-emerald-700border-top-color: rgb(4 120 87); border-bottom-color: rgb(4 120 87);
border-y-emerald-800border-top-color: rgb(6 95 70); border-bottom-color: rgb(6 95 70);
border-y-emerald-900border-top-color: rgb(6 78 59); border-bottom-color: rgb(6 78 59);
border-y-emerald-950border-top-color: rgb(2 44 34); border-bottom-color: rgb(2 44 34);
border-y-teal-50border-top-color: rgb(240 253 250); border-bottom-color: rgb(240 253 250);
border-y-teal-100border-top-color: rgb(204 251 241); border-bottom-color: rgb(204 251 241);
border-y-teal-200border-top-color: rgb(153 246 228); border-bottom-color: rgb(153 246 228);
border-y-teal-300border-top-color: rgb(94 234 212); border-bottom-color: rgb(94 234 212);
border-y-teal-400border-top-color: rgb(45 212 191); border-bottom-color: rgb(45 212 191);
border-y-teal-500border-top-color: rgb(20 184 166); border-bottom-color: rgb(20 184 166);
border-y-teal-600border-top-color: rgb(13 148 136); border-bottom-color: rgb(13 148 136);
border-y-teal-700border-top-color: rgb(15 118 110); border-bottom-color: rgb(15 118 110);
border-y-teal-800border-top-color: rgb(17 94 89); border-bottom-color: rgb(17 94 89);
border-y-teal-900border-top-color: rgb(19 78 74); border-bottom-color: rgb(19 78 74);
border-y-teal-950border-top-color: rgb(4 47 46); border-bottom-color: rgb(4 47 46);
border-y-cyan-50border-top-color: rgb(236 254 255); border-bottom-color: rgb(236 254 255);
border-y-cyan-100border-top-color: rgb(207 250 254); border-bottom-color: rgb(207 250 254);
border-y-cyan-200border-top-color: rgb(165 243 252); border-bottom-color: rgb(165 243 252);
border-y-cyan-300border-top-color: rgb(103 232 249); border-bottom-color: rgb(103 232 249);
border-y-cyan-400border-top-color: rgb(34 211 238); border-bottom-color: rgb(34 211 238);
border-y-cyan-500border-top-color: rgb(6 182 212); border-bottom-color: rgb(6 182 212);
border-y-cyan-600border-top-color: rgb(8 145 178); border-bottom-color: rgb(8 145 178);
border-y-cyan-700border-top-color: rgb(14 116 144); border-bottom-color: rgb(14 116 144);
border-y-cyan-800border-top-color: rgb(21 94 117); border-bottom-color: rgb(21 94 117);
border-y-cyan-900border-top-color: rgb(22 78 99); border-bottom-color: rgb(22 78 99);
border-y-cyan-950border-top-color: rgb(8 51 68); border-bottom-color: rgb(8 51 68);
border-y-sky-50border-top-color: rgb(240 249 255); border-bottom-color: rgb(240 249 255);
border-y-sky-100border-top-color: rgb(224 242 254); border-bottom-color: rgb(224 242 254);
border-y-sky-200border-top-color: rgb(186 230 253); border-bottom-color: rgb(186 230 253);
border-y-sky-300border-top-color: rgb(125 211 252); border-bottom-color: rgb(125 211 252);
border-y-sky-400border-top-color: rgb(56 189 248); border-bottom-color: rgb(56 189 248);
border-y-sky-500border-top-color: rgb(14 165 233); border-bottom-color: rgb(14 165 233);
border-y-sky-600border-top-color: rgb(2 132 199); border-bottom-color: rgb(2 132 199);
border-y-sky-700border-top-color: rgb(3 105 161); border-bottom-color: rgb(3 105 161);
border-y-sky-800border-top-color: rgb(7 89 133); border-bottom-color: rgb(7 89 133);
border-y-sky-900border-top-color: rgb(12 74 110); border-bottom-color: rgb(12 74 110);
border-y-sky-950border-top-color: rgb(8 47 73); border-bottom-color: rgb(8 47 73);
border-y-blue-50border-top-color: rgb(239 246 255); border-bottom-color: rgb(239 246 255);
border-y-blue-100border-top-color: rgb(219 234 254); border-bottom-color: rgb(219 234 254);
border-y-blue-200border-top-color: rgb(191 219 254); border-bottom-color: rgb(191 219 254);
border-y-blue-300border-top-color: rgb(147 197 253); border-bottom-color: rgb(147 197 253);
border-y-blue-400border-top-color: rgb(96 165 250); border-bottom-color: rgb(96 165 250);
border-y-blue-500border-top-color: rgb(59 130 246); border-bottom-color: rgb(59 130 246);
border-y-blue-600border-top-color: rgb(37 99 235); border-bottom-color: rgb(37 99 235);
border-y-blue-700border-top-color: rgb(29 78 216); border-bottom-color: rgb(29 78 216);
border-y-blue-800border-top-color: rgb(30 64 175); border-bottom-color: rgb(30 64 175);
border-y-blue-900border-top-color: rgb(30 58 138); border-bottom-color: rgb(30 58 138);
border-y-blue-950border-top-color: rgb(23 37 84); border-bottom-color: rgb(23 37 84);
border-y-indigo-50border-top-color: rgb(238 242 255); border-bottom-color: rgb(238 242 255);
border-y-indigo-100border-top-color: rgb(224 231 255); border-bottom-color: rgb(224 231 255);
border-y-indigo-200border-top-color: rgb(199 210 254); border-bottom-color: rgb(199 210 254);
border-y-indigo-300border-top-color: rgb(165 180 252); border-bottom-color: rgb(165 180 252);
border-y-indigo-400border-top-color: rgb(129 140 248); border-bottom-color: rgb(129 140 248);
border-y-indigo-500border-top-color: rgb(99 102 241); border-bottom-color: rgb(99 102 241);
border-y-indigo-600border-top-color: rgb(79 70 229); border-bottom-color: rgb(79 70 229);
border-y-indigo-700border-top-color: rgb(67 56 202); border-bottom-color: rgb(67 56 202);
border-y-indigo-800border-top-color: rgb(55 48 163); border-bottom-color: rgb(55 48 163);
border-y-indigo-900border-top-color: rgb(49 46 129); border-bottom-color: rgb(49 46 129);
border-y-indigo-950border-top-color: rgb(30 27 75); border-bottom-color: rgb(30 27 75);
border-y-violet-50border-top-color: rgb(245 243 255); border-bottom-color: rgb(245 243 255);
border-y-violet-100border-top-color: rgb(237 233 254); border-bottom-color: rgb(237 233 254);
border-y-violet-200border-top-color: rgb(221 214 254); border-bottom-color: rgb(221 214 254);
border-y-violet-300border-top-color: rgb(196 181 253); border-bottom-color: rgb(196 181 253);
border-y-violet-400border-top-color: rgb(167 139 250); border-bottom-color: rgb(167 139 250);
border-y-violet-500border-top-color: rgb(139 92 246); border-bottom-color: rgb(139 92 246);
border-y-violet-600border-top-color: rgb(124 58 237); border-bottom-color: rgb(124 58 237);
border-y-violet-700border-top-color: rgb(109 40 217); border-bottom-color: rgb(109 40 217);
border-y-violet-800border-top-color: rgb(91 33 182); border-bottom-color: rgb(91 33 182);
border-y-violet-900border-top-color: rgb(76 29 149); border-bottom-color: rgb(76 29 149);
border-y-violet-950border-top-color: rgb(46 16 101); border-bottom-color: rgb(46 16 101);
border-y-purple-50border-top-color: rgb(250 245 255); border-bottom-color: rgb(250 245 255);
border-y-purple-100border-top-color: rgb(243 232 255); border-bottom-color: rgb(243 232 255);
border-y-purple-200border-top-color: rgb(233 213 255); border-bottom-color: rgb(233 213 255);
border-y-purple-300border-top-color: rgb(216 180 254); border-bottom-color: rgb(216 180 254);
border-y-purple-400border-top-color: rgb(192 132 252); border-bottom-color: rgb(192 132 252);
border-y-purple-500border-top-color: rgb(168 85 247); border-bottom-color: rgb(168 85 247);
border-y-purple-600border-top-color: rgb(147 51 234); border-bottom-color: rgb(147 51 234);
border-y-purple-700border-top-color: rgb(126 34 206); border-bottom-color: rgb(126 34 206);
border-y-purple-800border-top-color: rgb(107 33 168); border-bottom-color: rgb(107 33 168);
border-y-purple-900border-top-color: rgb(88 28 135); border-bottom-color: rgb(88 28 135);
border-y-purple-950border-top-color: rgb(59 7 100); border-bottom-color: rgb(59 7 100);
border-y-fuchsia-50border-top-color: rgb(253 244 255); border-bottom-color: rgb(253 244 255);
border-y-fuchsia-100border-top-color: rgb(250 232 255); border-bottom-color: rgb(250 232 255);
border-y-fuchsia-200border-top-color: rgb(245 208 254); border-bottom-color: rgb(245 208 254);
border-y-fuchsia-300border-top-color: rgb(240 171 252); border-bottom-color: rgb(240 171 252);
border-y-fuchsia-400border-top-color: rgb(232 121 249); border-bottom-color: rgb(232 121 249);
border-y-fuchsia-500border-top-color: rgb(217 70 239); border-bottom-color: rgb(217 70 239);
border-y-fuchsia-600border-top-color: rgb(192 38 211); border-bottom-color: rgb(192 38 211);
border-y-fuchsia-700border-top-color: rgb(162 28 175); border-bottom-color: rgb(162 28 175);
border-y-fuchsia-800border-top-color: rgb(134 25 143); border-bottom-color: rgb(134 25 143);
border-y-fuchsia-900border-top-color: rgb(112 26 117); border-bottom-color: rgb(112 26 117);
border-y-fuchsia-950border-top-color: rgb(74 4 78); border-bottom-color: rgb(74 4 78);
border-y-pink-50border-top-color: rgb(253 242 248); border-bottom-color: rgb(253 242 248);
border-y-pink-100border-top-color: rgb(252 231 243); border-bottom-color: rgb(252 231 243);
border-y-pink-200border-top-color: rgb(251 207 232); border-bottom-color: rgb(251 207 232);
border-y-pink-300border-top-color: rgb(249 168 212); border-bottom-color: rgb(249 168 212);
border-y-pink-400border-top-color: rgb(244 114 182); border-bottom-color: rgb(244 114 182);
border-y-pink-500border-top-color: rgb(236 72 153); border-bottom-color: rgb(236 72 153);
border-y-pink-600border-top-color: rgb(219 39 119); border-bottom-color: rgb(219 39 119);
border-y-pink-700border-top-color: rgb(190 24 93); border-bottom-color: rgb(190 24 93);
border-y-pink-800border-top-color: rgb(157 23 77); border-bottom-color: rgb(157 23 77);
border-y-pink-900border-top-color: rgb(131 24 67); border-bottom-color: rgb(131 24 67);
border-y-pink-950border-top-color: rgb(80 7 36); border-bottom-color: rgb(80 7 36);
border-y-rose-50border-top-color: rgb(255 241 242); border-bottom-color: rgb(255 241 242);
border-y-rose-100border-top-color: rgb(255 228 230); border-bottom-color: rgb(255 228 230);
border-y-rose-200border-top-color: rgb(254 205 211); border-bottom-color: rgb(254 205 211);
border-y-rose-300border-top-color: rgb(253 164 175); border-bottom-color: rgb(253 164 175);
border-y-rose-400border-top-color: rgb(251 113 133); border-bottom-color: rgb(251 113 133);
border-y-rose-500border-top-color: rgb(244 63 94); border-bottom-color: rgb(244 63 94);
border-y-rose-600border-top-color: rgb(225 29 72); border-bottom-color: rgb(225 29 72);
border-y-rose-700border-top-color: rgb(190 18 60); border-bottom-color: rgb(190 18 60);
border-y-rose-800border-top-color: rgb(159 18 57); border-bottom-color: rgb(159 18 57);
border-y-rose-900border-top-color: rgb(136 19 55); border-bottom-color: rgb(136 19 55);
border-y-rose-950border-top-color: rgb(76 5 25); border-bottom-color: rgb(76 5 25);
border-s-inheritborder-inline-start-color: inherit;
border-s-currentborder-inline-start-color: currentColor;
border-s-transparentborder-inline-start-color: transparent;
border-s-blackborder-inline-start-color: rgb(0 0 0);
border-s-whiteborder-inline-start-color: rgb(255 255 255);
border-s-slate-50border-inline-start-color: rgb(248 250 252);
border-s-slate-100border-inline-start-color: rgb(241 245 249);
border-s-slate-200border-inline-start-color: rgb(226 232 240);
border-s-slate-300border-inline-start-color: rgb(203 213 225);
border-s-slate-400border-inline-start-color: rgb(148 163 184);
border-s-slate-500border-inline-start-color: rgb(100 116 139);
border-s-slate-600border-inline-start-color: rgb(71 85 105);
border-s-slate-700border-inline-start-color: rgb(51 65 85);
border-s-slate-800border-inline-start-color: rgb(30 41 59);
border-s-slate-900border-inline-start-color: rgb(15 23 42);
border-s-slate-950border-inline-start-color: rgb(2 6 23);
border-s-gray-50border-inline-start-color: rgb(249 250 251);
border-s-gray-100border-inline-start-color: rgb(243 244 246);
border-s-gray-200border-inline-start-color: rgb(229 231 235);
border-s-gray-300border-inline-start-color: rgb(209 213 219);
border-s-gray-400border-inline-start-color: rgb(156 163 175);
border-s-gray-500border-inline-start-color: rgb(107 114 128);
border-s-gray-600border-inline-start-color: rgb(75 85 99);
border-s-gray-700border-inline-start-color: rgb(55 65 81);
border-s-gray-800border-inline-start-color: rgb(31 41 55);
border-s-gray-900border-inline-start-color: rgb(17 24 39);
border-s-gray-950border-inline-start-color: rgb(3 7 18);
border-s-zinc-50border-inline-start-color: rgb(250 250 250);
border-s-zinc-100border-inline-start-color: rgb(244 244 245);
border-s-zinc-200border-inline-start-color: rgb(228 228 231);
border-s-zinc-300border-inline-start-color: rgb(212 212 216);
border-s-zinc-400border-inline-start-color: rgb(161 161 170);
border-s-zinc-500border-inline-start-color: rgb(113 113 122);
border-s-zinc-600border-inline-start-color: rgb(82 82 91);
border-s-zinc-700border-inline-start-color: rgb(63 63 70);
border-s-zinc-800border-inline-start-color: rgb(39 39 42);
border-s-zinc-900border-inline-start-color: rgb(24 24 27);
border-s-zinc-950border-inline-start-color: rgb(9 9 11);
border-s-neutral-50border-inline-start-color: rgb(250 250 250);
border-s-neutral-100border-inline-start-color: rgb(245 245 245);
border-s-neutral-200border-inline-start-color: rgb(229 229 229);
border-s-neutral-300border-inline-start-color: rgb(212 212 212);
border-s-neutral-400border-inline-start-color: rgb(163 163 163);
border-s-neutral-500border-inline-start-color: rgb(115 115 115);
border-s-neutral-600border-inline-start-color: rgb(82 82 82);
border-s-neutral-700border-inline-start-color: rgb(64 64 64);
border-s-neutral-800border-inline-start-color: rgb(38 38 38);
border-s-neutral-900border-inline-start-color: rgb(23 23 23);
border-s-neutral-950border-inline-start-color: rgb(10 10 10);
border-s-stone-50border-inline-start-color: rgb(250 250 249);
border-s-stone-100border-inline-start-color: rgb(245 245 244);
border-s-stone-200border-inline-start-color: rgb(231 229 228);
border-s-stone-300border-inline-start-color: rgb(214 211 209);
border-s-stone-400border-inline-start-color: rgb(168 162 158);
border-s-stone-500border-inline-start-color: rgb(120 113 108);
border-s-stone-600border-inline-start-color: rgb(87 83 78);
border-s-stone-700border-inline-start-color: rgb(68 64 60);
border-s-stone-800border-inline-start-color: rgb(41 37 36);
border-s-stone-900border-inline-start-color: rgb(28 25 23);
border-s-stone-950border-inline-start-color: rgb(12 10 9);
border-s-red-50border-inline-start-color: rgb(254 242 242);
border-s-red-100border-inline-start-color: rgb(254 226 226);
border-s-red-200border-inline-start-color: rgb(254 202 202);
border-s-red-300border-inline-start-color: rgb(252 165 165);
border-s-red-400border-inline-start-color: rgb(248 113 113);
border-s-red-500border-inline-start-color: rgb(239 68 68);
border-s-red-600border-inline-start-color: rgb(220 38 38);
border-s-red-700border-inline-start-color: rgb(185 28 28);
border-s-red-800border-inline-start-color: rgb(153 27 27);
border-s-red-900border-inline-start-color: rgb(127 29 29);
border-s-red-950border-inline-start-color: rgb(69 10 10);
border-s-orange-50border-inline-start-color: rgb(255 247 237);
border-s-orange-100border-inline-start-color: rgb(255 237 213);
border-s-orange-200border-inline-start-color: rgb(254 215 170);
border-s-orange-300border-inline-start-color: rgb(253 186 116);
border-s-orange-400border-inline-start-color: rgb(251 146 60);
border-s-orange-500border-inline-start-color: rgb(249 115 22);
border-s-orange-600border-inline-start-color: rgb(234 88 12);
border-s-orange-700border-inline-start-color: rgb(194 65 12);
border-s-orange-800border-inline-start-color: rgb(154 52 18);
border-s-orange-900border-inline-start-color: rgb(124 45 18);
border-s-orange-950border-inline-start-color: rgb(67 20 7);
border-s-amber-50border-inline-start-color: rgb(255 251 235);
border-s-amber-100border-inline-start-color: rgb(254 243 199);
border-s-amber-200border-inline-start-color: rgb(253 230 138);
border-s-amber-300border-inline-start-color: rgb(252 211 77);
border-s-amber-400border-inline-start-color: rgb(251 191 36);
border-s-amber-500border-inline-start-color: rgb(245 158 11);
border-s-amber-600border-inline-start-color: rgb(217 119 6);
border-s-amber-700border-inline-start-color: rgb(180 83 9);
border-s-amber-800border-inline-start-color: rgb(146 64 14);
border-s-amber-900border-inline-start-color: rgb(120 53 15);
border-s-amber-950border-inline-start-color: rgb(69 26 3);
border-s-yellow-50border-inline-start-color: rgb(254 252 232);
border-s-yellow-100border-inline-start-color: rgb(254 249 195);
border-s-yellow-200border-inline-start-color: rgb(254 240 138);
border-s-yellow-300border-inline-start-color: rgb(253 224 71);
border-s-yellow-400border-inline-start-color: rgb(250 204 21);
border-s-yellow-500border-inline-start-color: rgb(234 179 8);
border-s-yellow-600border-inline-start-color: rgb(202 138 4);
border-s-yellow-700border-inline-start-color: rgb(161 98 7);
border-s-yellow-800border-inline-start-color: rgb(133 77 14);
border-s-yellow-900border-inline-start-color: rgb(113 63 18);
border-s-yellow-950border-inline-start-color: rgb(66 32 6);
border-s-lime-50border-inline-start-color: rgb(247 254 231);
border-s-lime-100border-inline-start-color: rgb(236 252 203);
border-s-lime-200border-inline-start-color: rgb(217 249 157);
border-s-lime-300border-inline-start-color: rgb(190 242 100);
border-s-lime-400border-inline-start-color: rgb(163 230 53);
border-s-lime-500border-inline-start-color: rgb(132 204 22);
border-s-lime-600border-inline-start-color: rgb(101 163 13);
border-s-lime-700border-inline-start-color: rgb(77 124 15);
border-s-lime-800border-inline-start-color: rgb(63 98 18);
border-s-lime-900border-inline-start-color: rgb(54 83 20);
border-s-lime-950border-inline-start-color: rgb(26 46 5);
border-s-green-50border-inline-start-color: rgb(240 253 244);
border-s-green-100border-inline-start-color: rgb(220 252 231);
border-s-green-200border-inline-start-color: rgb(187 247 208);
border-s-green-300border-inline-start-color: rgb(134 239 172);
border-s-green-400border-inline-start-color: rgb(74 222 128);
border-s-green-500border-inline-start-color: rgb(34 197 94);
border-s-green-600border-inline-start-color: rgb(22 163 74);
border-s-green-700border-inline-start-color: rgb(21 128 61);
border-s-green-800border-inline-start-color: rgb(22 101 52);
border-s-green-900border-inline-start-color: rgb(20 83 45);
border-s-green-950border-inline-start-color: rgb(5 46 22);
border-s-emerald-50border-inline-start-color: rgb(236 253 245);
border-s-emerald-100border-inline-start-color: rgb(209 250 229);
border-s-emerald-200border-inline-start-color: rgb(167 243 208);
border-s-emerald-300border-inline-start-color: rgb(110 231 183);
border-s-emerald-400border-inline-start-color: rgb(52 211 153);
border-s-emerald-500border-inline-start-color: rgb(16 185 129);
border-s-emerald-600border-inline-start-color: rgb(5 150 105);
border-s-emerald-700border-inline-start-color: rgb(4 120 87);
border-s-emerald-800border-inline-start-color: rgb(6 95 70);
border-s-emerald-900border-inline-start-color: rgb(6 78 59);
border-s-emerald-950border-inline-start-color: rgb(2 44 34);
border-s-teal-50border-inline-start-color: rgb(240 253 250);
border-s-teal-100border-inline-start-color: rgb(204 251 241);
border-s-teal-200border-inline-start-color: rgb(153 246 228);
border-s-teal-300border-inline-start-color: rgb(94 234 212);
border-s-teal-400border-inline-start-color: rgb(45 212 191);
border-s-teal-500border-inline-start-color: rgb(20 184 166);
border-s-teal-600border-inline-start-color: rgb(13 148 136);
border-s-teal-700border-inline-start-color: rgb(15 118 110);
border-s-teal-800border-inline-start-color: rgb(17 94 89);
border-s-teal-900border-inline-start-color: rgb(19 78 74);
border-s-teal-950border-inline-start-color: rgb(4 47 46);
border-s-cyan-50border-inline-start-color: rgb(236 254 255);
border-s-cyan-100border-inline-start-color: rgb(207 250 254);
border-s-cyan-200border-inline-start-color: rgb(165 243 252);
border-s-cyan-300border-inline-start-color: rgb(103 232 249);
border-s-cyan-400border-inline-start-color: rgb(34 211 238);
border-s-cyan-500border-inline-start-color: rgb(6 182 212);
border-s-cyan-600border-inline-start-color: rgb(8 145 178);
border-s-cyan-700border-inline-start-color: rgb(14 116 144);
border-s-cyan-800border-inline-start-color: rgb(21 94 117);
border-s-cyan-900border-inline-start-color: rgb(22 78 99);
border-s-cyan-950border-inline-start-color: rgb(8 51 68);
border-s-sky-50border-inline-start-color: rgb(240 249 255);
border-s-sky-100border-inline-start-color: rgb(224 242 254);
border-s-sky-200border-inline-start-color: rgb(186 230 253);
border-s-sky-300border-inline-start-color: rgb(125 211 252);
border-s-sky-400border-inline-start-color: rgb(56 189 248);
border-s-sky-500border-inline-start-color: rgb(14 165 233);
border-s-sky-600border-inline-start-color: rgb(2 132 199);
border-s-sky-700border-inline-start-color: rgb(3 105 161);
border-s-sky-800border-inline-start-color: rgb(7 89 133);
border-s-sky-900border-inline-start-color: rgb(12 74 110);
border-s-sky-950border-inline-start-color: rgb(8 47 73);
border-s-blue-50border-inline-start-color: rgb(239 246 255);
border-s-blue-100border-inline-start-color: rgb(219 234 254);
border-s-blue-200border-inline-start-color: rgb(191 219 254);
border-s-blue-300border-inline-start-color: rgb(147 197 253);
border-s-blue-400border-inline-start-color: rgb(96 165 250);
border-s-blue-500border-inline-start-color: rgb(59 130 246);
border-s-blue-600border-inline-start-color: rgb(37 99 235);
border-s-blue-700border-inline-start-color: rgb(29 78 216);
border-s-blue-800border-inline-start-color: rgb(30 64 175);
border-s-blue-900border-inline-start-color: rgb(30 58 138);
border-s-blue-950border-inline-start-color: rgb(23 37 84);
border-s-indigo-50border-inline-start-color: rgb(238 242 255);
border-s-indigo-100border-inline-start-color: rgb(224 231 255);
border-s-indigo-200border-inline-start-color: rgb(199 210 254);
border-s-indigo-300border-inline-start-color: rgb(165 180 252);
border-s-indigo-400border-inline-start-color: rgb(129 140 248);
border-s-indigo-500border-inline-start-color: rgb(99 102 241);
border-s-indigo-600border-inline-start-color: rgb(79 70 229);
border-s-indigo-700border-inline-start-color: rgb(67 56 202);
border-s-indigo-800border-inline-start-color: rgb(55 48 163);
border-s-indigo-900border-inline-start-color: rgb(49 46 129);
border-s-indigo-950border-inline-start-color: rgb(30 27 75);
border-s-violet-50border-inline-start-color: rgb(245 243 255);
border-s-violet-100border-inline-start-color: rgb(237 233 254);
border-s-violet-200border-inline-start-color: rgb(221 214 254);
border-s-violet-300border-inline-start-color: rgb(196 181 253);
border-s-violet-400border-inline-start-color: rgb(167 139 250);
border-s-violet-500border-inline-start-color: rgb(139 92 246);
border-s-violet-600border-inline-start-color: rgb(124 58 237);
border-s-violet-700border-inline-start-color: rgb(109 40 217);
border-s-violet-800border-inline-start-color: rgb(91 33 182);
border-s-violet-900border-inline-start-color: rgb(76 29 149);
border-s-violet-950border-inline-start-color: rgb(46 16 101);
border-s-purple-50border-inline-start-color: rgb(250 245 255);
border-s-purple-100border-inline-start-color: rgb(243 232 255);
border-s-purple-200border-inline-start-color: rgb(233 213 255);
border-s-purple-300border-inline-start-color: rgb(216 180 254);
border-s-purple-400border-inline-start-color: rgb(192 132 252);
border-s-purple-500border-inline-start-color: rgb(168 85 247);
border-s-purple-600border-inline-start-color: rgb(147 51 234);
border-s-purple-700border-inline-start-color: rgb(126 34 206);
border-s-purple-800border-inline-start-color: rgb(107 33 168);
border-s-purple-900border-inline-start-color: rgb(88 28 135);
border-s-purple-950border-inline-start-color: rgb(59 7 100);
border-s-fuchsia-50border-inline-start-color: rgb(253 244 255);
border-s-fuchsia-100border-inline-start-color: rgb(250 232 255);
border-s-fuchsia-200border-inline-start-color: rgb(245 208 254);
border-s-fuchsia-300border-inline-start-color: rgb(240 171 252);
border-s-fuchsia-400border-inline-start-color: rgb(232 121 249);
border-s-fuchsia-500border-inline-start-color: rgb(217 70 239);
border-s-fuchsia-600border-inline-start-color: rgb(192 38 211);
border-s-fuchsia-700border-inline-start-color: rgb(162 28 175);
border-s-fuchsia-800border-inline-start-color: rgb(134 25 143);
border-s-fuchsia-900border-inline-start-color: rgb(112 26 117);
border-s-fuchsia-950border-inline-start-color: rgb(74 4 78);
border-s-pink-50border-inline-start-color: rgb(253 242 248);
border-s-pink-100border-inline-start-color: rgb(252 231 243);
border-s-pink-200border-inline-start-color: rgb(251 207 232);
border-s-pink-300border-inline-start-color: rgb(249 168 212);
border-s-pink-400border-inline-start-color: rgb(244 114 182);
border-s-pink-500border-inline-start-color: rgb(236 72 153);
border-s-pink-600border-inline-start-color: rgb(219 39 119);
border-s-pink-700border-inline-start-color: rgb(190 24 93);
border-s-pink-800border-inline-start-color: rgb(157 23 77);
border-s-pink-900border-inline-start-color: rgb(131 24 67);
border-s-pink-950border-inline-start-color: rgb(80 7 36);
border-s-rose-50border-inline-start-color: rgb(255 241 242);
border-s-rose-100border-inline-start-color: rgb(255 228 230);
border-s-rose-200border-inline-start-color: rgb(254 205 211);
border-s-rose-300border-inline-start-color: rgb(253 164 175);
border-s-rose-400border-inline-start-color: rgb(251 113 133);
border-s-rose-500border-inline-start-color: rgb(244 63 94);
border-s-rose-600border-inline-start-color: rgb(225 29 72);
border-s-rose-700border-inline-start-color: rgb(190 18 60);
border-s-rose-800border-inline-start-color: rgb(159 18 57);
border-s-rose-900border-inline-start-color: rgb(136 19 55);
border-s-rose-950border-inline-start-color: rgb(76 5 25);
border-e-inheritborder-inline-end-color: inherit;
border-e-currentborder-inline-end-color: currentColor;
border-e-transparentborder-inline-end-color: transparent;
border-e-blackborder-inline-end-color: rgb(0 0 0);
border-e-whiteborder-inline-end-color: rgb(255 255 255);
border-e-slate-50border-inline-end-color: rgb(248 250 252);
border-e-slate-100border-inline-end-color: rgb(241 245 249);
border-e-slate-200border-inline-end-color: rgb(226 232 240);
border-e-slate-300border-inline-end-color: rgb(203 213 225);
border-e-slate-400border-inline-end-color: rgb(148 163 184);
border-e-slate-500border-inline-end-color: rgb(100 116 139);
border-e-slate-600border-inline-end-color: rgb(71 85 105);
border-e-slate-700border-inline-end-color: rgb(51 65 85);
border-e-slate-800border-inline-end-color: rgb(30 41 59);
border-e-slate-900border-inline-end-color: rgb(15 23 42);
border-e-slate-950border-inline-end-color: rgb(2 6 23);
border-e-gray-50border-inline-end-color: rgb(249 250 251);
border-e-gray-100border-inline-end-color: rgb(243 244 246);
border-e-gray-200border-inline-end-color: rgb(229 231 235);
border-e-gray-300border-inline-end-color: rgb(209 213 219);
border-e-gray-400border-inline-end-color: rgb(156 163 175);
border-e-gray-500border-inline-end-color: rgb(107 114 128);
border-e-gray-600border-inline-end-color: rgb(75 85 99);
border-e-gray-700border-inline-end-color: rgb(55 65 81);
border-e-gray-800border-inline-end-color: rgb(31 41 55);
border-e-gray-900border-inline-end-color: rgb(17 24 39);
border-e-gray-950border-inline-end-color: rgb(3 7 18);
border-e-zinc-50border-inline-end-color: rgb(250 250 250);
border-e-zinc-100border-inline-end-color: rgb(244 244 245);
border-e-zinc-200border-inline-end-color: rgb(228 228 231);
border-e-zinc-300border-inline-end-color: rgb(212 212 216);
border-e-zinc-400border-inline-end-color: rgb(161 161 170);
border-e-zinc-500border-inline-end-color: rgb(113 113 122);
border-e-zinc-600border-inline-end-color: rgb(82 82 91);
border-e-zinc-700border-inline-end-color: rgb(63 63 70);
border-e-zinc-800border-inline-end-color: rgb(39 39 42);
border-e-zinc-900border-inline-end-color: rgb(24 24 27);
border-e-zinc-950border-inline-end-color: rgb(9 9 11);
border-e-neutral-50border-inline-end-color: rgb(250 250 250);
border-e-neutral-100border-inline-end-color: rgb(245 245 245);
border-e-neutral-200border-inline-end-color: rgb(229 229 229);
border-e-neutral-300border-inline-end-color: rgb(212 212 212);
border-e-neutral-400border-inline-end-color: rgb(163 163 163);
border-e-neutral-500border-inline-end-color: rgb(115 115 115);
border-e-neutral-600border-inline-end-color: rgb(82 82 82);
border-e-neutral-700border-inline-end-color: rgb(64 64 64);
border-e-neutral-800border-inline-end-color: rgb(38 38 38);
border-e-neutral-900border-inline-end-color: rgb(23 23 23);
border-e-neutral-950border-inline-end-color: rgb(10 10 10);
border-e-stone-50border-inline-end-color: rgb(250 250 249);
border-e-stone-100border-inline-end-color: rgb(245 245 244);
border-e-stone-200border-inline-end-color: rgb(231 229 228);
border-e-stone-300border-inline-end-color: rgb(214 211 209);
border-e-stone-400border-inline-end-color: rgb(168 162 158);
border-e-stone-500border-inline-end-color: rgb(120 113 108);
border-e-stone-600border-inline-end-color: rgb(87 83 78);
border-e-stone-700border-inline-end-color: rgb(68 64 60);
border-e-stone-800border-inline-end-color: rgb(41 37 36);
border-e-stone-900border-inline-end-color: rgb(28 25 23);
border-e-stone-950border-inline-end-color: rgb(12 10 9);
border-e-red-50border-inline-end-color: rgb(254 242 242);
border-e-red-100border-inline-end-color: rgb(254 226 226);
border-e-red-200border-inline-end-color: rgb(254 202 202);
border-e-red-300border-inline-end-color: rgb(252 165 165);
border-e-red-400border-inline-end-color: rgb(248 113 113);
border-e-red-500border-inline-end-color: rgb(239 68 68);
border-e-red-600border-inline-end-color: rgb(220 38 38);
border-e-red-700border-inline-end-color: rgb(185 28 28);
border-e-red-800border-inline-end-color: rgb(153 27 27);
border-e-red-900border-inline-end-color: rgb(127 29 29);
border-e-red-950border-inline-end-color: rgb(69 10 10);
border-e-orange-50border-inline-end-color: rgb(255 247 237);
border-e-orange-100border-inline-end-color: rgb(255 237 213);
border-e-orange-200border-inline-end-color: rgb(254 215 170);
border-e-orange-300border-inline-end-color: rgb(253 186 116);
border-e-orange-400border-inline-end-color: rgb(251 146 60);
border-e-orange-500border-inline-end-color: rgb(249 115 22);
border-e-orange-600border-inline-end-color: rgb(234 88 12);
border-e-orange-700border-inline-end-color: rgb(194 65 12);
border-e-orange-800border-inline-end-color: rgb(154 52 18);
border-e-orange-900border-inline-end-color: rgb(124 45 18);
border-e-orange-950border-inline-end-color: rgb(67 20 7);
border-e-amber-50border-inline-end-color: rgb(255 251 235);
border-e-amber-100border-inline-end-color: rgb(254 243 199);
border-e-amber-200border-inline-end-color: rgb(253 230 138);
border-e-amber-300border-inline-end-color: rgb(252 211 77);
border-e-amber-400border-inline-end-color: rgb(251 191 36);
border-e-amber-500border-inline-end-color: rgb(245 158 11);
border-e-amber-600border-inline-end-color: rgb(217 119 6);
border-e-amber-700border-inline-end-color: rgb(180 83 9);
border-e-amber-800border-inline-end-color: rgb(146 64 14);
border-e-amber-900border-inline-end-color: rgb(120 53 15);
border-e-amber-950border-inline-end-color: rgb(69 26 3);
border-e-yellow-50border-inline-end-color: rgb(254 252 232);
border-e-yellow-100border-inline-end-color: rgb(254 249 195);
border-e-yellow-200border-inline-end-color: rgb(254 240 138);
border-e-yellow-300border-inline-end-color: rgb(253 224 71);
border-e-yellow-400border-inline-end-color: rgb(250 204 21);
border-e-yellow-500border-inline-end-color: rgb(234 179 8);
border-e-yellow-600border-inline-end-color: rgb(202 138 4);
border-e-yellow-700border-inline-end-color: rgb(161 98 7);
border-e-yellow-800border-inline-end-color: rgb(133 77 14);
border-e-yellow-900border-inline-end-color: rgb(113 63 18);
border-e-yellow-950border-inline-end-color: rgb(66 32 6);
border-e-lime-50border-inline-end-color: rgb(247 254 231);
border-e-lime-100border-inline-end-color: rgb(236 252 203);
border-e-lime-200border-inline-end-color: rgb(217 249 157);
border-e-lime-300border-inline-end-color: rgb(190 242 100);
border-e-lime-400border-inline-end-color: rgb(163 230 53);
border-e-lime-500border-inline-end-color: rgb(132 204 22);
border-e-lime-600border-inline-end-color: rgb(101 163 13);
border-e-lime-700border-inline-end-color: rgb(77 124 15);
border-e-lime-800border-inline-end-color: rgb(63 98 18);
border-e-lime-900border-inline-end-color: rgb(54 83 20);
border-e-lime-950border-inline-end-color: rgb(26 46 5);
border-e-green-50border-inline-end-color: rgb(240 253 244);
border-e-green-100border-inline-end-color: rgb(220 252 231);
border-e-green-200border-inline-end-color: rgb(187 247 208);
border-e-green-300border-inline-end-color: rgb(134 239 172);
border-e-green-400border-inline-end-color: rgb(74 222 128);
border-e-green-500border-inline-end-color: rgb(34 197 94);
border-e-green-600border-inline-end-color: rgb(22 163 74);
border-e-green-700border-inline-end-color: rgb(21 128 61);
border-e-green-800border-inline-end-color: rgb(22 101 52);
border-e-green-900border-inline-end-color: rgb(20 83 45);
border-e-green-950border-inline-end-color: rgb(5 46 22);
border-e-emerald-50border-inline-end-color: rgb(236 253 245);
border-e-emerald-100border-inline-end-color: rgb(209 250 229);
border-e-emerald-200border-inline-end-color: rgb(167 243 208);
border-e-emerald-300border-inline-end-color: rgb(110 231 183);
border-e-emerald-400border-inline-end-color: rgb(52 211 153);
border-e-emerald-500border-inline-end-color: rgb(16 185 129);
border-e-emerald-600border-inline-end-color: rgb(5 150 105);
border-e-emerald-700border-inline-end-color: rgb(4 120 87);
border-e-emerald-800border-inline-end-color: rgb(6 95 70);
border-e-emerald-900border-inline-end-color: rgb(6 78 59);
border-e-emerald-950border-inline-end-color: rgb(2 44 34);
border-e-teal-50border-inline-end-color: rgb(240 253 250);
border-e-teal-100border-inline-end-color: rgb(204 251 241);
border-e-teal-200border-inline-end-color: rgb(153 246 228);
border-e-teal-300border-inline-end-color: rgb(94 234 212);
border-e-teal-400border-inline-end-color: rgb(45 212 191);
border-e-teal-500border-inline-end-color: rgb(20 184 166);
border-e-teal-600border-inline-end-color: rgb(13 148 136);
border-e-teal-700border-inline-end-color: rgb(15 118 110);
border-e-teal-800border-inline-end-color: rgb(17 94 89);
border-e-teal-900border-inline-end-color: rgb(19 78 74);
border-e-teal-950border-inline-end-color: rgb(4 47 46);
border-e-cyan-50border-inline-end-color: rgb(236 254 255);
border-e-cyan-100border-inline-end-color: rgb(207 250 254);
border-e-cyan-200border-inline-end-color: rgb(165 243 252);
border-e-cyan-300border-inline-end-color: rgb(103 232 249);
border-e-cyan-400border-inline-end-color: rgb(34 211 238);
border-e-cyan-500border-inline-end-color: rgb(6 182 212);
border-e-cyan-600border-inline-end-color: rgb(8 145 178);
border-e-cyan-700border-inline-end-color: rgb(14 116 144);
border-e-cyan-800border-inline-end-color: rgb(21 94 117);
border-e-cyan-900border-inline-end-color: rgb(22 78 99);
border-e-cyan-950border-inline-end-color: rgb(8 51 68);
border-e-sky-50border-inline-end-color: rgb(240 249 255);
border-e-sky-100border-inline-end-color: rgb(224 242 254);
border-e-sky-200border-inline-end-color: rgb(186 230 253);
border-e-sky-300border-inline-end-color: rgb(125 211 252);
border-e-sky-400border-inline-end-color: rgb(56 189 248);
border-e-sky-500border-inline-end-color: rgb(14 165 233);
border-e-sky-600border-inline-end-color: rgb(2 132 199);
border-e-sky-700border-inline-end-color: rgb(3 105 161);
border-e-sky-800border-inline-end-color: rgb(7 89 133);
border-e-sky-900border-inline-end-color: rgb(12 74 110);
border-e-sky-950border-inline-end-color: rgb(8 47 73);
border-e-blue-50border-inline-end-color: rgb(239 246 255);
border-e-blue-100border-inline-end-color: rgb(219 234 254);
border-e-blue-200border-inline-end-color: rgb(191 219 254);
border-e-blue-300border-inline-end-color: rgb(147 197 253);
border-e-blue-400border-inline-end-color: rgb(96 165 250);
border-e-blue-500border-inline-end-color: rgb(59 130 246);
border-e-blue-600border-inline-end-color: rgb(37 99 235);
border-e-blue-700border-inline-end-color: rgb(29 78 216);
border-e-blue-800border-inline-end-color: rgb(30 64 175);
border-e-blue-900border-inline-end-color: rgb(30 58 138);
border-e-blue-950border-inline-end-color: rgb(23 37 84);
border-e-indigo-50border-inline-end-color: rgb(238 242 255);
border-e-indigo-100border-inline-end-color: rgb(224 231 255);
border-e-indigo-200border-inline-end-color: rgb(199 210 254);
border-e-indigo-300border-inline-end-color: rgb(165 180 252);
border-e-indigo-400border-inline-end-color: rgb(129 140 248);
border-e-indigo-500border-inline-end-color: rgb(99 102 241);
border-e-indigo-600border-inline-end-color: rgb(79 70 229);
border-e-indigo-700border-inline-end-color: rgb(67 56 202);
border-e-indigo-800border-inline-end-color: rgb(55 48 163);
border-e-indigo-900border-inline-end-color: rgb(49 46 129);
border-e-indigo-950border-inline-end-color: rgb(30 27 75);
border-e-violet-50border-inline-end-color: rgb(245 243 255);
border-e-violet-100border-inline-end-color: rgb(237 233 254);
border-e-violet-200border-inline-end-color: rgb(221 214 254);
border-e-violet-300border-inline-end-color: rgb(196 181 253);
border-e-violet-400border-inline-end-color: rgb(167 139 250);
border-e-violet-500border-inline-end-color: rgb(139 92 246);
border-e-violet-600border-inline-end-color: rgb(124 58 237);
border-e-violet-700border-inline-end-color: rgb(109 40 217);
border-e-violet-800border-inline-end-color: rgb(91 33 182);
border-e-violet-900border-inline-end-color: rgb(76 29 149);
border-e-violet-950border-inline-end-color: rgb(46 16 101);
border-e-purple-50border-inline-end-color: rgb(250 245 255);
border-e-purple-100border-inline-end-color: rgb(243 232 255);
border-e-purple-200border-inline-end-color: rgb(233 213 255);
border-e-purple-300border-inline-end-color: rgb(216 180 254);
border-e-purple-400border-inline-end-color: rgb(192 132 252);
border-e-purple-500border-inline-end-color: rgb(168 85 247);
border-e-purple-600border-inline-end-color: rgb(147 51 234);
border-e-purple-700border-inline-end-color: rgb(126 34 206);
border-e-purple-800border-inline-end-color: rgb(107 33 168);
border-e-purple-900border-inline-end-color: rgb(88 28 135);
border-e-purple-950border-inline-end-color: rgb(59 7 100);
border-e-fuchsia-50border-inline-end-color: rgb(253 244 255);
border-e-fuchsia-100border-inline-end-color: rgb(250 232 255);
border-e-fuchsia-200border-inline-end-color: rgb(245 208 254);
border-e-fuchsia-300border-inline-end-color: rgb(240 171 252);
border-e-fuchsia-400border-inline-end-color: rgb(232 121 249);
border-e-fuchsia-500border-inline-end-color: rgb(217 70 239);
border-e-fuchsia-600border-inline-end-color: rgb(192 38 211);
border-e-fuchsia-700border-inline-end-color: rgb(162 28 175);
border-e-fuchsia-800border-inline-end-color: rgb(134 25 143);
border-e-fuchsia-900border-inline-end-color: rgb(112 26 117);
border-e-fuchsia-950border-inline-end-color: rgb(74 4 78);
border-e-pink-50border-inline-end-color: rgb(253 242 248);
border-e-pink-100border-inline-end-color: rgb(252 231 243);
border-e-pink-200border-inline-end-color: rgb(251 207 232);
border-e-pink-300border-inline-end-color: rgb(249 168 212);
border-e-pink-400border-inline-end-color: rgb(244 114 182);
border-e-pink-500border-inline-end-color: rgb(236 72 153);
border-e-pink-600border-inline-end-color: rgb(219 39 119);
border-e-pink-700border-inline-end-color: rgb(190 24 93);
border-e-pink-800border-inline-end-color: rgb(157 23 77);
border-e-pink-900border-inline-end-color: rgb(131 24 67);
border-e-pink-950border-inline-end-color: rgb(80 7 36);
border-e-rose-50border-inline-end-color: rgb(255 241 242);
border-e-rose-100border-inline-end-color: rgb(255 228 230);
border-e-rose-200border-inline-end-color: rgb(254 205 211);
border-e-rose-300border-inline-end-color: rgb(253 164 175);
border-e-rose-400border-inline-end-color: rgb(251 113 133);
border-e-rose-500border-inline-end-color: rgb(244 63 94);
border-e-rose-600border-inline-end-color: rgb(225 29 72);
border-e-rose-700border-inline-end-color: rgb(190 18 60);
border-e-rose-800border-inline-end-color: rgb(159 18 57);
border-e-rose-900border-inline-end-color: rgb(136 19 55);
border-e-rose-950border-inline-end-color: rgb(76 5 25);
border-t-inheritborder-top-color: inherit;
border-t-currentborder-top-color: currentColor;
border-t-transparentborder-top-color: transparent;
border-t-blackborder-top-color: rgb(0 0 0);
border-t-whiteborder-top-color: rgb(255 255 255);
border-t-slate-50border-top-color: rgb(248 250 252);
border-t-slate-100border-top-color: rgb(241 245 249);
border-t-slate-200border-top-color: rgb(226 232 240);
border-t-slate-300border-top-color: rgb(203 213 225);
border-t-slate-400border-top-color: rgb(148 163 184);
border-t-slate-500border-top-color: rgb(100 116 139);
border-t-slate-600border-top-color: rgb(71 85 105);
border-t-slate-700border-top-color: rgb(51 65 85);
border-t-slate-800border-top-color: rgb(30 41 59);
border-t-slate-900border-top-color: rgb(15 23 42);
border-t-slate-950border-top-color: rgb(2 6 23);
border-t-gray-50border-top-color: rgb(249 250 251);
border-t-gray-100border-top-color: rgb(243 244 246);
border-t-gray-200border-top-color: rgb(229 231 235);
border-t-gray-300border-top-color: rgb(209 213 219);
border-t-gray-400border-top-color: rgb(156 163 175);
border-t-gray-500border-top-color: rgb(107 114 128);
border-t-gray-600border-top-color: rgb(75 85 99);
border-t-gray-700border-top-color: rgb(55 65 81);
border-t-gray-800border-top-color: rgb(31 41 55);
border-t-gray-900border-top-color: rgb(17 24 39);
border-t-gray-950border-top-color: rgb(3 7 18);
border-t-zinc-50border-top-color: rgb(250 250 250);
border-t-zinc-100border-top-color: rgb(244 244 245);
border-t-zinc-200border-top-color: rgb(228 228 231);
border-t-zinc-300border-top-color: rgb(212 212 216);
border-t-zinc-400border-top-color: rgb(161 161 170);
border-t-zinc-500border-top-color: rgb(113 113 122);
border-t-zinc-600border-top-color: rgb(82 82 91);
border-t-zinc-700border-top-color: rgb(63 63 70);
border-t-zinc-800border-top-color: rgb(39 39 42);
border-t-zinc-900border-top-color: rgb(24 24 27);
border-t-zinc-950border-top-color: rgb(9 9 11);
border-t-neutral-50border-top-color: rgb(250 250 250);
border-t-neutral-100border-top-color: rgb(245 245 245);
border-t-neutral-200border-top-color: rgb(229 229 229);
border-t-neutral-300border-top-color: rgb(212 212 212);
border-t-neutral-400border-top-color: rgb(163 163 163);
border-t-neutral-500border-top-color: rgb(115 115 115);
border-t-neutral-600border-top-color: rgb(82 82 82);
border-t-neutral-700border-top-color: rgb(64 64 64);
border-t-neutral-800border-top-color: rgb(38 38 38);
border-t-neutral-900border-top-color: rgb(23 23 23);
border-t-neutral-950border-top-color: rgb(10 10 10);
border-t-stone-50border-top-color: rgb(250 250 249);
border-t-stone-100border-top-color: rgb(245 245 244);
border-t-stone-200border-top-color: rgb(231 229 228);
border-t-stone-300border-top-color: rgb(214 211 209);
border-t-stone-400border-top-color: rgb(168 162 158);
border-t-stone-500border-top-color: rgb(120 113 108);
border-t-stone-600border-top-color: rgb(87 83 78);
border-t-stone-700border-top-color: rgb(68 64 60);
border-t-stone-800border-top-color: rgb(41 37 36);
border-t-stone-900border-top-color: rgb(28 25 23);
border-t-stone-950border-top-color: rgb(12 10 9);
border-t-red-50border-top-color: rgb(254 242 242);
border-t-red-100border-top-color: rgb(254 226 226);
border-t-red-200border-top-color: rgb(254 202 202);
border-t-red-300border-top-color: rgb(252 165 165);
border-t-red-400border-top-color: rgb(248 113 113);
border-t-red-500border-top-color: rgb(239 68 68);
border-t-red-600border-top-color: rgb(220 38 38);
border-t-red-700border-top-color: rgb(185 28 28);
border-t-red-800border-top-color: rgb(153 27 27);
border-t-red-900border-top-color: rgb(127 29 29);
border-t-red-950border-top-color: rgb(69 10 10);
border-t-orange-50border-top-color: rgb(255 247 237);
border-t-orange-100border-top-color: rgb(255 237 213);
border-t-orange-200border-top-color: rgb(254 215 170);
border-t-orange-300border-top-color: rgb(253 186 116);
border-t-orange-400border-top-color: rgb(251 146 60);
border-t-orange-500border-top-color: rgb(249 115 22);
border-t-orange-600border-top-color: rgb(234 88 12);
border-t-orange-700border-top-color: rgb(194 65 12);
border-t-orange-800border-top-color: rgb(154 52 18);
border-t-orange-900border-top-color: rgb(124 45 18);
border-t-orange-950border-top-color: rgb(67 20 7);
border-t-amber-50border-top-color: rgb(255 251 235);
border-t-amber-100border-top-color: rgb(254 243 199);
border-t-amber-200border-top-color: rgb(253 230 138);
border-t-amber-300border-top-color: rgb(252 211 77);
border-t-amber-400border-top-color: rgb(251 191 36);
border-t-amber-500border-top-color: rgb(245 158 11);
border-t-amber-600border-top-color: rgb(217 119 6);
border-t-amber-700border-top-color: rgb(180 83 9);
border-t-amber-800border-top-color: rgb(146 64 14);
border-t-amber-900border-top-color: rgb(120 53 15);
border-t-amber-950border-top-color: rgb(69 26 3);
border-t-yellow-50border-top-color: rgb(254 252 232);
border-t-yellow-100border-top-color: rgb(254 249 195);
border-t-yellow-200border-top-color: rgb(254 240 138);
border-t-yellow-300border-top-color: rgb(253 224 71);
border-t-yellow-400border-top-color: rgb(250 204 21);
border-t-yellow-500border-top-color: rgb(234 179 8);
border-t-yellow-600border-top-color: rgb(202 138 4);
border-t-yellow-700border-top-color: rgb(161 98 7);
border-t-yellow-800border-top-color: rgb(133 77 14);
border-t-yellow-900border-top-color: rgb(113 63 18);
border-t-yellow-950border-top-color: rgb(66 32 6);
border-t-lime-50border-top-color: rgb(247 254 231);
border-t-lime-100border-top-color: rgb(236 252 203);
border-t-lime-200border-top-color: rgb(217 249 157);
border-t-lime-300border-top-color: rgb(190 242 100);
border-t-lime-400border-top-color: rgb(163 230 53);
border-t-lime-500border-top-color: rgb(132 204 22);
border-t-lime-600border-top-color: rgb(101 163 13);
border-t-lime-700border-top-color: rgb(77 124 15);
border-t-lime-800border-top-color: rgb(63 98 18);
border-t-lime-900border-top-color: rgb(54 83 20);
border-t-lime-950border-top-color: rgb(26 46 5);
border-t-green-50border-top-color: rgb(240 253 244);
border-t-green-100border-top-color: rgb(220 252 231);
border-t-green-200border-top-color: rgb(187 247 208);
border-t-green-300border-top-color: rgb(134 239 172);
border-t-green-400border-top-color: rgb(74 222 128);
border-t-green-500border-top-color: rgb(34 197 94);
border-t-green-600border-top-color: rgb(22 163 74);
border-t-green-700border-top-color: rgb(21 128 61);
border-t-green-800border-top-color: rgb(22 101 52);
border-t-green-900border-top-color: rgb(20 83 45);
border-t-green-950border-top-color: rgb(5 46 22);
border-t-emerald-50border-top-color: rgb(236 253 245);
border-t-emerald-100border-top-color: rgb(209 250 229);
border-t-emerald-200border-top-color: rgb(167 243 208);
border-t-emerald-300border-top-color: rgb(110 231 183);
border-t-emerald-400border-top-color: rgb(52 211 153);
border-t-emerald-500border-top-color: rgb(16 185 129);
border-t-emerald-600border-top-color: rgb(5 150 105);
border-t-emerald-700border-top-color: rgb(4 120 87);
border-t-emerald-800border-top-color: rgb(6 95 70);
border-t-emerald-900border-top-color: rgb(6 78 59);
border-t-emerald-950border-top-color: rgb(2 44 34);
border-t-teal-50border-top-color: rgb(240 253 250);
border-t-teal-100border-top-color: rgb(204 251 241);
border-t-teal-200border-top-color: rgb(153 246 228);
border-t-teal-300border-top-color: rgb(94 234 212);
border-t-teal-400border-top-color: rgb(45 212 191);
border-t-teal-500border-top-color: rgb(20 184 166);
border-t-teal-600border-top-color: rgb(13 148 136);
border-t-teal-700border-top-color: rgb(15 118 110);
border-t-teal-800border-top-color: rgb(17 94 89);
border-t-teal-900border-top-color: rgb(19 78 74);
border-t-teal-950border-top-color: rgb(4 47 46);
border-t-cyan-50border-top-color: rgb(236 254 255);
border-t-cyan-100border-top-color: rgb(207 250 254);
border-t-cyan-200border-top-color: rgb(165 243 252);
border-t-cyan-300border-top-color: rgb(103 232 249);
border-t-cyan-400border-top-color: rgb(34 211 238);
border-t-cyan-500border-top-color: rgb(6 182 212);
border-t-cyan-600border-top-color: rgb(8 145 178);
border-t-cyan-700border-top-color: rgb(14 116 144);
border-t-cyan-800border-top-color: rgb(21 94 117);
border-t-cyan-900border-top-color: rgb(22 78 99);
border-t-cyan-950border-top-color: rgb(8 51 68);
border-t-sky-50border-top-color: rgb(240 249 255);
border-t-sky-100border-top-color: rgb(224 242 254);
border-t-sky-200border-top-color: rgb(186 230 253);
border-t-sky-300border-top-color: rgb(125 211 252);
border-t-sky-400border-top-color: rgb(56 189 248);
border-t-sky-500border-top-color: rgb(14 165 233);
border-t-sky-600border-top-color: rgb(2 132 199);
border-t-sky-700border-top-color: rgb(3 105 161);
border-t-sky-800border-top-color: rgb(7 89 133);
border-t-sky-900border-top-color: rgb(12 74 110);
border-t-sky-950border-top-color: rgb(8 47 73);
border-t-blue-50border-top-color: rgb(239 246 255);
border-t-blue-100border-top-color: rgb(219 234 254);
border-t-blue-200border-top-color: rgb(191 219 254);
border-t-blue-300border-top-color: rgb(147 197 253);
border-t-blue-400border-top-color: rgb(96 165 250);
border-t-blue-500border-top-color: rgb(59 130 246);
border-t-blue-600border-top-color: rgb(37 99 235);
border-t-blue-700border-top-color: rgb(29 78 216);
border-t-blue-800border-top-color: rgb(30 64 175);
border-t-blue-900border-top-color: rgb(30 58 138);
border-t-blue-950border-top-color: rgb(23 37 84);
border-t-indigo-50border-top-color: rgb(238 242 255);
border-t-indigo-100border-top-color: rgb(224 231 255);
border-t-indigo-200border-top-color: rgb(199 210 254);
border-t-indigo-300border-top-color: rgb(165 180 252);
border-t-indigo-400border-top-color: rgb(129 140 248);
border-t-indigo-500border-top-color: rgb(99 102 241);
border-t-indigo-600border-top-color: rgb(79 70 229);
border-t-indigo-700border-top-color: rgb(67 56 202);
border-t-indigo-800border-top-color: rgb(55 48 163);
border-t-indigo-900border-top-color: rgb(49 46 129);
border-t-indigo-950border-top-color: rgb(30 27 75);
border-t-violet-50border-top-color: rgb(245 243 255);
border-t-violet-100border-top-color: rgb(237 233 254);
border-t-violet-200border-top-color: rgb(221 214 254);
border-t-violet-300border-top-color: rgb(196 181 253);
border-t-violet-400border-top-color: rgb(167 139 250);
border-t-violet-500border-top-color: rgb(139 92 246);
border-t-violet-600border-top-color: rgb(124 58 237);
border-t-violet-700border-top-color: rgb(109 40 217);
border-t-violet-800border-top-color: rgb(91 33 182);
border-t-violet-900border-top-color: rgb(76 29 149);
border-t-violet-950border-top-color: rgb(46 16 101);
border-t-purple-50border-top-color: rgb(250 245 255);
border-t-purple-100border-top-color: rgb(243 232 255);
border-t-purple-200border-top-color: rgb(233 213 255);
border-t-purple-300border-top-color: rgb(216 180 254);
border-t-purple-400border-top-color: rgb(192 132 252);
border-t-purple-500border-top-color: rgb(168 85 247);
border-t-purple-600border-top-color: rgb(147 51 234);
border-t-purple-700border-top-color: rgb(126 34 206);
border-t-purple-800border-top-color: rgb(107 33 168);
border-t-purple-900border-top-color: rgb(88 28 135);
border-t-purple-950border-top-color: rgb(59 7 100);
border-t-fuchsia-50border-top-color: rgb(253 244 255);
border-t-fuchsia-100border-top-color: rgb(250 232 255);
border-t-fuchsia-200border-top-color: rgb(245 208 254);
border-t-fuchsia-300border-top-color: rgb(240 171 252);
border-t-fuchsia-400border-top-color: rgb(232 121 249);
border-t-fuchsia-500border-top-color: rgb(217 70 239);
border-t-fuchsia-600border-top-color: rgb(192 38 211);
border-t-fuchsia-700border-top-color: rgb(162 28 175);
border-t-fuchsia-800border-top-color: rgb(134 25 143);
border-t-fuchsia-900border-top-color: rgb(112 26 117);
border-t-fuchsia-950border-top-color: rgb(74 4 78);
border-t-pink-50border-top-color: rgb(253 242 248);
border-t-pink-100border-top-color: rgb(252 231 243);
border-t-pink-200border-top-color: rgb(251 207 232);
border-t-pink-300border-top-color: rgb(249 168 212);
border-t-pink-400border-top-color: rgb(244 114 182);
border-t-pink-500border-top-color: rgb(236 72 153);
border-t-pink-600border-top-color: rgb(219 39 119);
border-t-pink-700border-top-color: rgb(190 24 93);
border-t-pink-800border-top-color: rgb(157 23 77);
border-t-pink-900border-top-color: rgb(131 24 67);
border-t-pink-950border-top-color: rgb(80 7 36);
border-t-rose-50border-top-color: rgb(255 241 242);
border-t-rose-100border-top-color: rgb(255 228 230);
border-t-rose-200border-top-color: rgb(254 205 211);
border-t-rose-300border-top-color: rgb(253 164 175);
border-t-rose-400border-top-color: rgb(251 113 133);
border-t-rose-500border-top-color: rgb(244 63 94);
border-t-rose-600border-top-color: rgb(225 29 72);
border-t-rose-700border-top-color: rgb(190 18 60);
border-t-rose-800border-top-color: rgb(159 18 57);
border-t-rose-900border-top-color: rgb(136 19 55);
border-t-rose-950border-top-color: rgb(76 5 25);
border-r-inheritborder-right-color: inherit;
border-r-currentborder-right-color: currentColor;
border-r-transparentborder-right-color: transparent;
border-r-blackborder-right-color: rgb(0 0 0);
border-r-whiteborder-right-color: rgb(255 255 255);
border-r-slate-50border-right-color: rgb(248 250 252);
border-r-slate-100border-right-color: rgb(241 245 249);
border-r-slate-200border-right-color: rgb(226 232 240);
border-r-slate-300border-right-color: rgb(203 213 225);
border-r-slate-400border-right-color: rgb(148 163 184);
border-r-slate-500border-right-color: rgb(100 116 139);
border-r-slate-600border-right-color: rgb(71 85 105);
border-r-slate-700border-right-color: rgb(51 65 85);
border-r-slate-800border-right-color: rgb(30 41 59);
border-r-slate-900border-right-color: rgb(15 23 42);
border-r-slate-950border-right-color: rgb(2 6 23);
border-r-gray-50border-right-color: rgb(249 250 251);
border-r-gray-100border-right-color: rgb(243 244 246);
border-r-gray-200border-right-color: rgb(229 231 235);
border-r-gray-300border-right-color: rgb(209 213 219);
border-r-gray-400border-right-color: rgb(156 163 175);
border-r-gray-500border-right-color: rgb(107 114 128);
border-r-gray-600border-right-color: rgb(75 85 99);
border-r-gray-700border-right-color: rgb(55 65 81);
border-r-gray-800border-right-color: rgb(31 41 55);
border-r-gray-900border-right-color: rgb(17 24 39);
border-r-gray-950border-right-color: rgb(3 7 18);
border-r-zinc-50border-right-color: rgb(250 250 250);
border-r-zinc-100border-right-color: rgb(244 244 245);
border-r-zinc-200border-right-color: rgb(228 228 231);
border-r-zinc-300border-right-color: rgb(212 212 216);
border-r-zinc-400border-right-color: rgb(161 161 170);
border-r-zinc-500border-right-color: rgb(113 113 122);
border-r-zinc-600border-right-color: rgb(82 82 91);
border-r-zinc-700border-right-color: rgb(63 63 70);
border-r-zinc-800border-right-color: rgb(39 39 42);
border-r-zinc-900border-right-color: rgb(24 24 27);
border-r-zinc-950border-right-color: rgb(9 9 11);
border-r-neutral-50border-right-color: rgb(250 250 250);
border-r-neutral-100border-right-color: rgb(245 245 245);
border-r-neutral-200border-right-color: rgb(229 229 229);
border-r-neutral-300border-right-color: rgb(212 212 212);
border-r-neutral-400border-right-color: rgb(163 163 163);
border-r-neutral-500border-right-color: rgb(115 115 115);
border-r-neutral-600border-right-color: rgb(82 82 82);
border-r-neutral-700border-right-color: rgb(64 64 64);
border-r-neutral-800border-right-color: rgb(38 38 38);
border-r-neutral-900border-right-color: rgb(23 23 23);
border-r-neutral-950border-right-color: rgb(10 10 10);
border-r-stone-50border-right-color: rgb(250 250 249);
border-r-stone-100border-right-color: rgb(245 245 244);
border-r-stone-200border-right-color: rgb(231 229 228);
border-r-stone-300border-right-color: rgb(214 211 209);
border-r-stone-400border-right-color: rgb(168 162 158);
border-r-stone-500border-right-color: rgb(120 113 108);
border-r-stone-600border-right-color: rgb(87 83 78);
border-r-stone-700border-right-color: rgb(68 64 60);
border-r-stone-800border-right-color: rgb(41 37 36);
border-r-stone-900border-right-color: rgb(28 25 23);
border-r-stone-950border-right-color: rgb(12 10 9);
border-r-red-50border-right-color: rgb(254 242 242);
border-r-red-100border-right-color: rgb(254 226 226);
border-r-red-200border-right-color: rgb(254 202 202);
border-r-red-300border-right-color: rgb(252 165 165);
border-r-red-400border-right-color: rgb(248 113 113);
border-r-red-500border-right-color: rgb(239 68 68);
border-r-red-600border-right-color: rgb(220 38 38);
border-r-red-700border-right-color: rgb(185 28 28);
border-r-red-800border-right-color: rgb(153 27 27);
border-r-red-900border-right-color: rgb(127 29 29);
border-r-red-950border-right-color: rgb(69 10 10);
border-r-orange-50border-right-color: rgb(255 247 237);
border-r-orange-100border-right-color: rgb(255 237 213);
border-r-orange-200border-right-color: rgb(254 215 170);
border-r-orange-300border-right-color: rgb(253 186 116);
border-r-orange-400border-right-color: rgb(251 146 60);
border-r-orange-500border-right-color: rgb(249 115 22);
border-r-orange-600border-right-color: rgb(234 88 12);
border-r-orange-700border-right-color: rgb(194 65 12);
border-r-orange-800border-right-color: rgb(154 52 18);
border-r-orange-900border-right-color: rgb(124 45 18);
border-r-orange-950border-right-color: rgb(67 20 7);
border-r-amber-50border-right-color: rgb(255 251 235);
border-r-amber-100border-right-color: rgb(254 243 199);
border-r-amber-200border-right-color: rgb(253 230 138);
border-r-amber-300border-right-color: rgb(252 211 77);
border-r-amber-400border-right-color: rgb(251 191 36);
border-r-amber-500border-right-color: rgb(245 158 11);
border-r-amber-600border-right-color: rgb(217 119 6);
border-r-amber-700border-right-color: rgb(180 83 9);
border-r-amber-800border-right-color: rgb(146 64 14);
border-r-amber-900border-right-color: rgb(120 53 15);
border-r-amber-950border-right-color: rgb(69 26 3);
border-r-yellow-50border-right-color: rgb(254 252 232);
border-r-yellow-100border-right-color: rgb(254 249 195);
border-r-yellow-200border-right-color: rgb(254 240 138);
border-r-yellow-300border-right-color: rgb(253 224 71);
border-r-yellow-400border-right-color: rgb(250 204 21);
border-r-yellow-500border-right-color: rgb(234 179 8);
border-r-yellow-600border-right-color: rgb(202 138 4);
border-r-yellow-700border-right-color: rgb(161 98 7);
border-r-yellow-800border-right-color: rgb(133 77 14);
border-r-yellow-900border-right-color: rgb(113 63 18);
border-r-yellow-950border-right-color: rgb(66 32 6);
border-r-lime-50border-right-color: rgb(247 254 231);
border-r-lime-100border-right-color: rgb(236 252 203);
border-r-lime-200border-right-color: rgb(217 249 157);
border-r-lime-300border-right-color: rgb(190 242 100);
border-r-lime-400border-right-color: rgb(163 230 53);
border-r-lime-500border-right-color: rgb(132 204 22);
border-r-lime-600border-right-color: rgb(101 163 13);
border-r-lime-700border-right-color: rgb(77 124 15);
border-r-lime-800border-right-color: rgb(63 98 18);
border-r-lime-900border-right-color: rgb(54 83 20);
border-r-lime-950border-right-color: rgb(26 46 5);
border-r-green-50border-right-color: rgb(240 253 244);
border-r-green-100border-right-color: rgb(220 252 231);
border-r-green-200border-right-color: rgb(187 247 208);
border-r-green-300border-right-color: rgb(134 239 172);
border-r-green-400border-right-color: rgb(74 222 128);
border-r-green-500border-right-color: rgb(34 197 94);
border-r-green-600border-right-color: rgb(22 163 74);
border-r-green-700border-right-color: rgb(21 128 61);
border-r-green-800border-right-color: rgb(22 101 52);
border-r-green-900border-right-color: rgb(20 83 45);
border-r-green-950border-right-color: rgb(5 46 22);
border-r-emerald-50border-right-color: rgb(236 253 245);
border-r-emerald-100border-right-color: rgb(209 250 229);
border-r-emerald-200border-right-color: rgb(167 243 208);
border-r-emerald-300border-right-color: rgb(110 231 183);
border-r-emerald-400border-right-color: rgb(52 211 153);
border-r-emerald-500border-right-color: rgb(16 185 129);
border-r-emerald-600border-right-color: rgb(5 150 105);
border-r-emerald-700border-right-color: rgb(4 120 87);
border-r-emerald-800border-right-color: rgb(6 95 70);
border-r-emerald-900border-right-color: rgb(6 78 59);
border-r-emerald-950border-right-color: rgb(2 44 34);
border-r-teal-50border-right-color: rgb(240 253 250);
border-r-teal-100border-right-color: rgb(204 251 241);
border-r-teal-200border-right-color: rgb(153 246 228);
border-r-teal-300border-right-color: rgb(94 234 212);
border-r-teal-400border-right-color: rgb(45 212 191);
border-r-teal-500border-right-color: rgb(20 184 166);
border-r-teal-600border-right-color: rgb(13 148 136);
border-r-teal-700border-right-color: rgb(15 118 110);
border-r-teal-800border-right-color: rgb(17 94 89);
border-r-teal-900border-right-color: rgb(19 78 74);
border-r-teal-950border-right-color: rgb(4 47 46);
border-r-cyan-50border-right-color: rgb(236 254 255);
border-r-cyan-100border-right-color: rgb(207 250 254);
border-r-cyan-200border-right-color: rgb(165 243 252);
border-r-cyan-300border-right-color: rgb(103 232 249);
border-r-cyan-400border-right-color: rgb(34 211 238);
border-r-cyan-500border-right-color: rgb(6 182 212);
border-r-cyan-600border-right-color: rgb(8 145 178);
border-r-cyan-700border-right-color: rgb(14 116 144);
border-r-cyan-800border-right-color: rgb(21 94 117);
border-r-cyan-900border-right-color: rgb(22 78 99);
border-r-cyan-950border-right-color: rgb(8 51 68);
border-r-sky-50border-right-color: rgb(240 249 255);
border-r-sky-100border-right-color: rgb(224 242 254);
border-r-sky-200border-right-color: rgb(186 230 253);
border-r-sky-300border-right-color: rgb(125 211 252);
border-r-sky-400border-right-color: rgb(56 189 248);
border-r-sky-500border-right-color: rgb(14 165 233);
border-r-sky-600border-right-color: rgb(2 132 199);
border-r-sky-700border-right-color: rgb(3 105 161);
border-r-sky-800border-right-color: rgb(7 89 133);
border-r-sky-900border-right-color: rgb(12 74 110);
border-r-sky-950border-right-color: rgb(8 47 73);
border-r-blue-50border-right-color: rgb(239 246 255);
border-r-blue-100border-right-color: rgb(219 234 254);
border-r-blue-200border-right-color: rgb(191 219 254);
border-r-blue-300border-right-color: rgb(147 197 253);
border-r-blue-400border-right-color: rgb(96 165 250);
border-r-blue-500border-right-color: rgb(59 130 246);
border-r-blue-600border-right-color: rgb(37 99 235);
border-r-blue-700border-right-color: rgb(29 78 216);
border-r-blue-800border-right-color: rgb(30 64 175);
border-r-blue-900border-right-color: rgb(30 58 138);
border-r-blue-950border-right-color: rgb(23 37 84);
border-r-indigo-50border-right-color: rgb(238 242 255);
border-r-indigo-100border-right-color: rgb(224 231 255);
border-r-indigo-200border-right-color: rgb(199 210 254);
border-r-indigo-300border-right-color: rgb(165 180 252);
border-r-indigo-400border-right-color: rgb(129 140 248);
border-r-indigo-500border-right-color: rgb(99 102 241);
border-r-indigo-600border-right-color: rgb(79 70 229);
border-r-indigo-700border-right-color: rgb(67 56 202);
border-r-indigo-800border-right-color: rgb(55 48 163);
border-r-indigo-900border-right-color: rgb(49 46 129);
border-r-indigo-950border-right-color: rgb(30 27 75);
border-r-violet-50border-right-color: rgb(245 243 255);
border-r-violet-100border-right-color: rgb(237 233 254);
border-r-violet-200border-right-color: rgb(221 214 254);
border-r-violet-300border-right-color: rgb(196 181 253);
border-r-violet-400border-right-color: rgb(167 139 250);
border-r-violet-500border-right-color: rgb(139 92 246);
border-r-violet-600border-right-color: rgb(124 58 237);
border-r-violet-700border-right-color: rgb(109 40 217);
border-r-violet-800border-right-color: rgb(91 33 182);
border-r-violet-900border-right-color: rgb(76 29 149);
border-r-violet-950border-right-color: rgb(46 16 101);
border-r-purple-50border-right-color: rgb(250 245 255);
border-r-purple-100border-right-color: rgb(243 232 255);
border-r-purple-200border-right-color: rgb(233 213 255);
border-r-purple-300border-right-color: rgb(216 180 254);
border-r-purple-400border-right-color: rgb(192 132 252);
border-r-purple-500border-right-color: rgb(168 85 247);
border-r-purple-600border-right-color: rgb(147 51 234);
border-r-purple-700border-right-color: rgb(126 34 206);
border-r-purple-800border-right-color: rgb(107 33 168);
border-r-purple-900border-right-color: rgb(88 28 135);
border-r-purple-950border-right-color: rgb(59 7 100);
border-r-fuchsia-50border-right-color: rgb(253 244 255);
border-r-fuchsia-100border-right-color: rgb(250 232 255);
border-r-fuchsia-200border-right-color: rgb(245 208 254);
border-r-fuchsia-300border-right-color: rgb(240 171 252);
border-r-fuchsia-400border-right-color: rgb(232 121 249);
border-r-fuchsia-500border-right-color: rgb(217 70 239);
border-r-fuchsia-600border-right-color: rgb(192 38 211);
border-r-fuchsia-700border-right-color: rgb(162 28 175);
border-r-fuchsia-800border-right-color: rgb(134 25 143);
border-r-fuchsia-900border-right-color: rgb(112 26 117);
border-r-fuchsia-950border-right-color: rgb(74 4 78);
border-r-pink-50border-right-color: rgb(253 242 248);
border-r-pink-100border-right-color: rgb(252 231 243);
border-r-pink-200border-right-color: rgb(251 207 232);
border-r-pink-300border-right-color: rgb(249 168 212);
border-r-pink-400border-right-color: rgb(244 114 182);
border-r-pink-500border-right-color: rgb(236 72 153);
border-r-pink-600border-right-color: rgb(219 39 119);
border-r-pink-700border-right-color: rgb(190 24 93);
border-r-pink-800border-right-color: rgb(157 23 77);
border-r-pink-900border-right-color: rgb(131 24 67);
border-r-pink-950border-right-color: rgb(80 7 36);
border-r-rose-50border-right-color: rgb(255 241 242);
border-r-rose-100border-right-color: rgb(255 228 230);
border-r-rose-200border-right-color: rgb(254 205 211);
border-r-rose-300border-right-color: rgb(253 164 175);
border-r-rose-400border-right-color: rgb(251 113 133);
border-r-rose-500border-right-color: rgb(244 63 94);
border-r-rose-600border-right-color: rgb(225 29 72);
border-r-rose-700border-right-color: rgb(190 18 60);
border-r-rose-800border-right-color: rgb(159 18 57);
border-r-rose-900border-right-color: rgb(136 19 55);
border-r-rose-950border-right-color: rgb(76 5 25);
border-b-inheritborder-bottom-color: inherit;
border-b-currentborder-bottom-color: currentColor;
border-b-transparentborder-bottom-color: transparent;
border-b-blackborder-bottom-color: rgb(0 0 0);
border-b-whiteborder-bottom-color: rgb(255 255 255);
border-b-slate-50border-bottom-color: rgb(248 250 252);
border-b-slate-100border-bottom-color: rgb(241 245 249);
border-b-slate-200border-bottom-color: rgb(226 232 240);
border-b-slate-300border-bottom-color: rgb(203 213 225);
border-b-slate-400border-bottom-color: rgb(148 163 184);
border-b-slate-500border-bottom-color: rgb(100 116 139);
border-b-slate-600border-bottom-color: rgb(71 85 105);
border-b-slate-700border-bottom-color: rgb(51 65 85);
border-b-slate-800border-bottom-color: rgb(30 41 59);
border-b-slate-900border-bottom-color: rgb(15 23 42);
border-b-slate-950border-bottom-color: rgb(2 6 23);
border-b-gray-50border-bottom-color: rgb(249 250 251);
border-b-gray-100border-bottom-color: rgb(243 244 246);
border-b-gray-200border-bottom-color: rgb(229 231 235);
border-b-gray-300border-bottom-color: rgb(209 213 219);
border-b-gray-400border-bottom-color: rgb(156 163 175);
border-b-gray-500border-bottom-color: rgb(107 114 128);
border-b-gray-600border-bottom-color: rgb(75 85 99);
border-b-gray-700border-bottom-color: rgb(55 65 81);
border-b-gray-800border-bottom-color: rgb(31 41 55);
border-b-gray-900border-bottom-color: rgb(17 24 39);
border-b-gray-950border-bottom-color: rgb(3 7 18);
border-b-zinc-50border-bottom-color: rgb(250 250 250);
border-b-zinc-100border-bottom-color: rgb(244 244 245);
border-b-zinc-200border-bottom-color: rgb(228 228 231);
border-b-zinc-300border-bottom-color: rgb(212 212 216);
border-b-zinc-400border-bottom-color: rgb(161 161 170);
border-b-zinc-500border-bottom-color: rgb(113 113 122);
border-b-zinc-600border-bottom-color: rgb(82 82 91);
border-b-zinc-700border-bottom-color: rgb(63 63 70);
border-b-zinc-800border-bottom-color: rgb(39 39 42);
border-b-zinc-900border-bottom-color: rgb(24 24 27);
border-b-zinc-950border-bottom-color: rgb(9 9 11);
border-b-neutral-50border-bottom-color: rgb(250 250 250);
border-b-neutral-100border-bottom-color: rgb(245 245 245);
border-b-neutral-200border-bottom-color: rgb(229 229 229);
border-b-neutral-300border-bottom-color: rgb(212 212 212);
border-b-neutral-400border-bottom-color: rgb(163 163 163);
border-b-neutral-500border-bottom-color: rgb(115 115 115);
border-b-neutral-600border-bottom-color: rgb(82 82 82);
border-b-neutral-700border-bottom-color: rgb(64 64 64);
border-b-neutral-800border-bottom-color: rgb(38 38 38);
border-b-neutral-900border-bottom-color: rgb(23 23 23);
border-b-neutral-950border-bottom-color: rgb(10 10 10);
border-b-stone-50border-bottom-color: rgb(250 250 249);
border-b-stone-100border-bottom-color: rgb(245 245 244);
border-b-stone-200border-bottom-color: rgb(231 229 228);
border-b-stone-300border-bottom-color: rgb(214 211 209);
border-b-stone-400border-bottom-color: rgb(168 162 158);
border-b-stone-500border-bottom-color: rgb(120 113 108);
border-b-stone-600border-bottom-color: rgb(87 83 78);
border-b-stone-700border-bottom-color: rgb(68 64 60);
border-b-stone-800border-bottom-color: rgb(41 37 36);
border-b-stone-900border-bottom-color: rgb(28 25 23);
border-b-stone-950border-bottom-color: rgb(12 10 9);
border-b-red-50border-bottom-color: rgb(254 242 242);
border-b-red-100border-bottom-color: rgb(254 226 226);
border-b-red-200border-bottom-color: rgb(254 202 202);
border-b-red-300border-bottom-color: rgb(252 165 165);
border-b-red-400border-bottom-color: rgb(248 113 113);
border-b-red-500border-bottom-color: rgb(239 68 68);
border-b-red-600border-bottom-color: rgb(220 38 38);
border-b-red-700border-bottom-color: rgb(185 28 28);
border-b-red-800border-bottom-color: rgb(153 27 27);
border-b-red-900border-bottom-color: rgb(127 29 29);
border-b-red-950border-bottom-color: rgb(69 10 10);
border-b-orange-50border-bottom-color: rgb(255 247 237);
border-b-orange-100border-bottom-color: rgb(255 237 213);
border-b-orange-200border-bottom-color: rgb(254 215 170);
border-b-orange-300border-bottom-color: rgb(253 186 116);
border-b-orange-400border-bottom-color: rgb(251 146 60);
border-b-orange-500border-bottom-color: rgb(249 115 22);
border-b-orange-600border-bottom-color: rgb(234 88 12);
border-b-orange-700border-bottom-color: rgb(194 65 12);
border-b-orange-800border-bottom-color: rgb(154 52 18);
border-b-orange-900border-bottom-color: rgb(124 45 18);
border-b-orange-950border-bottom-color: rgb(67 20 7);
border-b-amber-50border-bottom-color: rgb(255 251 235);
border-b-amber-100border-bottom-color: rgb(254 243 199);
border-b-amber-200border-bottom-color: rgb(253 230 138);
border-b-amber-300border-bottom-color: rgb(252 211 77);
border-b-amber-400border-bottom-color: rgb(251 191 36);
border-b-amber-500border-bottom-color: rgb(245 158 11);
border-b-amber-600border-bottom-color: rgb(217 119 6);
border-b-amber-700border-bottom-color: rgb(180 83 9);
border-b-amber-800border-bottom-color: rgb(146 64 14);
border-b-amber-900border-bottom-color: rgb(120 53 15);
border-b-amber-950border-bottom-color: rgb(69 26 3);
border-b-yellow-50border-bottom-color: rgb(254 252 232);
border-b-yellow-100border-bottom-color: rgb(254 249 195);
border-b-yellow-200border-bottom-color: rgb(254 240 138);
border-b-yellow-300border-bottom-color: rgb(253 224 71);
border-b-yellow-400border-bottom-color: rgb(250 204 21);
border-b-yellow-500border-bottom-color: rgb(234 179 8);
border-b-yellow-600border-bottom-color: rgb(202 138 4);
border-b-yellow-700border-bottom-color: rgb(161 98 7);
border-b-yellow-800border-bottom-color: rgb(133 77 14);
border-b-yellow-900border-bottom-color: rgb(113 63 18);
border-b-yellow-950border-bottom-color: rgb(66 32 6);
border-b-lime-50border-bottom-color: rgb(247 254 231);
border-b-lime-100border-bottom-color: rgb(236 252 203);
border-b-lime-200border-bottom-color: rgb(217 249 157);
border-b-lime-300border-bottom-color: rgb(190 242 100);
border-b-lime-400border-bottom-color: rgb(163 230 53);
border-b-lime-500border-bottom-color: rgb(132 204 22);
border-b-lime-600border-bottom-color: rgb(101 163 13);
border-b-lime-700border-bottom-color: rgb(77 124 15);
border-b-lime-800border-bottom-color: rgb(63 98 18);
border-b-lime-900border-bottom-color: rgb(54 83 20);
border-b-lime-950border-bottom-color: rgb(26 46 5);
border-b-green-50border-bottom-color: rgb(240 253 244);
border-b-green-100border-bottom-color: rgb(220 252 231);
border-b-green-200border-bottom-color: rgb(187 247 208);
border-b-green-300border-bottom-color: rgb(134 239 172);
border-b-green-400border-bottom-color: rgb(74 222 128);
border-b-green-500border-bottom-color: rgb(34 197 94);
border-b-green-600border-bottom-color: rgb(22 163 74);
border-b-green-700border-bottom-color: rgb(21 128 61);
border-b-green-800border-bottom-color: rgb(22 101 52);
border-b-green-900border-bottom-color: rgb(20 83 45);
border-b-green-950border-bottom-color: rgb(5 46 22);
border-b-emerald-50border-bottom-color: rgb(236 253 245);
border-b-emerald-100border-bottom-color: rgb(209 250 229);
border-b-emerald-200border-bottom-color: rgb(167 243 208);
border-b-emerald-300border-bottom-color: rgb(110 231 183);
border-b-emerald-400border-bottom-color: rgb(52 211 153);
border-b-emerald-500border-bottom-color: rgb(16 185 129);
border-b-emerald-600border-bottom-color: rgb(5 150 105);
border-b-emerald-700border-bottom-color: rgb(4 120 87);
border-b-emerald-800border-bottom-color: rgb(6 95 70);
border-b-emerald-900border-bottom-color: rgb(6 78 59);
border-b-emerald-950border-bottom-color: rgb(2 44 34);
border-b-teal-50border-bottom-color: rgb(240 253 250);
border-b-teal-100border-bottom-color: rgb(204 251 241);
border-b-teal-200border-bottom-color: rgb(153 246 228);
border-b-teal-300border-bottom-color: rgb(94 234 212);
border-b-teal-400border-bottom-color: rgb(45 212 191);
border-b-teal-500border-bottom-color: rgb(20 184 166);
border-b-teal-600border-bottom-color: rgb(13 148 136);
border-b-teal-700border-bottom-color: rgb(15 118 110);
border-b-teal-800border-bottom-color: rgb(17 94 89);
border-b-teal-900border-bottom-color: rgb(19 78 74);
border-b-teal-950border-bottom-color: rgb(4 47 46);
border-b-cyan-50border-bottom-color: rgb(236 254 255);
border-b-cyan-100border-bottom-color: rgb(207 250 254);
border-b-cyan-200border-bottom-color: rgb(165 243 252);
border-b-cyan-300border-bottom-color: rgb(103 232 249);
border-b-cyan-400border-bottom-color: rgb(34 211 238);
border-b-cyan-500border-bottom-color: rgb(6 182 212);
border-b-cyan-600border-bottom-color: rgb(8 145 178);
border-b-cyan-700border-bottom-color: rgb(14 116 144);
border-b-cyan-800border-bottom-color: rgb(21 94 117);
border-b-cyan-900border-bottom-color: rgb(22 78 99);
border-b-cyan-950border-bottom-color: rgb(8 51 68);
border-b-sky-50border-bottom-color: rgb(240 249 255);
border-b-sky-100border-bottom-color: rgb(224 242 254);
border-b-sky-200border-bottom-color: rgb(186 230 253);
border-b-sky-300border-bottom-color: rgb(125 211 252);
border-b-sky-400border-bottom-color: rgb(56 189 248);
border-b-sky-500border-bottom-color: rgb(14 165 233);
border-b-sky-600border-bottom-color: rgb(2 132 199);
border-b-sky-700border-bottom-color: rgb(3 105 161);
border-b-sky-800border-bottom-color: rgb(7 89 133);
border-b-sky-900border-bottom-color: rgb(12 74 110);
border-b-sky-950border-bottom-color: rgb(8 47 73);
border-b-blue-50border-bottom-color: rgb(239 246 255);
border-b-blue-100border-bottom-color: rgb(219 234 254);
border-b-blue-200border-bottom-color: rgb(191 219 254);
border-b-blue-300border-bottom-color: rgb(147 197 253);
border-b-blue-400border-bottom-color: rgb(96 165 250);
border-b-blue-500border-bottom-color: rgb(59 130 246);
border-b-blue-600border-bottom-color: rgb(37 99 235);
border-b-blue-700border-bottom-color: rgb(29 78 216);
border-b-blue-800border-bottom-color: rgb(30 64 175);
border-b-blue-900border-bottom-color: rgb(30 58 138);
border-b-blue-950border-bottom-color: rgb(23 37 84);
border-b-indigo-50border-bottom-color: rgb(238 242 255);
border-b-indigo-100border-bottom-color: rgb(224 231 255);
border-b-indigo-200border-bottom-color: rgb(199 210 254);
border-b-indigo-300border-bottom-color: rgb(165 180 252);
border-b-indigo-400border-bottom-color: rgb(129 140 248);
border-b-indigo-500border-bottom-color: rgb(99 102 241);
border-b-indigo-600border-bottom-color: rgb(79 70 229);
border-b-indigo-700border-bottom-color: rgb(67 56 202);
border-b-indigo-800border-bottom-color: rgb(55 48 163);
border-b-indigo-900border-bottom-color: rgb(49 46 129);
border-b-indigo-950border-bottom-color: rgb(30 27 75);
border-b-violet-50border-bottom-color: rgb(245 243 255);
border-b-violet-100border-bottom-color: rgb(237 233 254);
border-b-violet-200border-bottom-color: rgb(221 214 254);
border-b-violet-300border-bottom-color: rgb(196 181 253);
border-b-violet-400border-bottom-color: rgb(167 139 250);
border-b-violet-500border-bottom-color: rgb(139 92 246);
border-b-violet-600border-bottom-color: rgb(124 58 237);
border-b-violet-700border-bottom-color: rgb(109 40 217);
border-b-violet-800border-bottom-color: rgb(91 33 182);
border-b-violet-900border-bottom-color: rgb(76 29 149);
border-b-violet-950border-bottom-color: rgb(46 16 101);
border-b-purple-50border-bottom-color: rgb(250 245 255);
border-b-purple-100border-bottom-color: rgb(243 232 255);
border-b-purple-200border-bottom-color: rgb(233 213 255);
border-b-purple-300border-bottom-color: rgb(216 180 254);
border-b-purple-400border-bottom-color: rgb(192 132 252);
border-b-purple-500border-bottom-color: rgb(168 85 247);
border-b-purple-600border-bottom-color: rgb(147 51 234);
border-b-purple-700border-bottom-color: rgb(126 34 206);
border-b-purple-800border-bottom-color: rgb(107 33 168);
border-b-purple-900border-bottom-color: rgb(88 28 135);
border-b-purple-950border-bottom-color: rgb(59 7 100);
border-b-fuchsia-50border-bottom-color: rgb(253 244 255);
border-b-fuchsia-100border-bottom-color: rgb(250 232 255);
border-b-fuchsia-200border-bottom-color: rgb(245 208 254);
border-b-fuchsia-300border-bottom-color: rgb(240 171 252);
border-b-fuchsia-400border-bottom-color: rgb(232 121 249);
border-b-fuchsia-500border-bottom-color: rgb(217 70 239);
border-b-fuchsia-600border-bottom-color: rgb(192 38 211);
border-b-fuchsia-700border-bottom-color: rgb(162 28 175);
border-b-fuchsia-800border-bottom-color: rgb(134 25 143);
border-b-fuchsia-900border-bottom-color: rgb(112 26 117);
border-b-fuchsia-950border-bottom-color: rgb(74 4 78);
border-b-pink-50border-bottom-color: rgb(253 242 248);
border-b-pink-100border-bottom-color: rgb(252 231 243);
border-b-pink-200border-bottom-color: rgb(251 207 232);
border-b-pink-300border-bottom-color: rgb(249 168 212);
border-b-pink-400border-bottom-color: rgb(244 114 182);
border-b-pink-500border-bottom-color: rgb(236 72 153);
border-b-pink-600border-bottom-color: rgb(219 39 119);
border-b-pink-700border-bottom-color: rgb(190 24 93);
border-b-pink-800border-bottom-color: rgb(157 23 77);
border-b-pink-900border-bottom-color: rgb(131 24 67);
border-b-pink-950border-bottom-color: rgb(80 7 36);
border-b-rose-50border-bottom-color: rgb(255 241 242);
border-b-rose-100border-bottom-color: rgb(255 228 230);
border-b-rose-200border-bottom-color: rgb(254 205 211);
border-b-rose-300border-bottom-color: rgb(253 164 175);
border-b-rose-400border-bottom-color: rgb(251 113 133);
border-b-rose-500border-bottom-color: rgb(244 63 94);
border-b-rose-600border-bottom-color: rgb(225 29 72);
border-b-rose-700border-bottom-color: rgb(190 18 60);
border-b-rose-800border-bottom-color: rgb(159 18 57);
border-b-rose-900border-bottom-color: rgb(136 19 55);
border-b-rose-950border-bottom-color: rgb(76 5 25);
border-l-inheritborder-left-color: inherit;
border-l-currentborder-left-color: currentColor;
border-l-transparentborder-left-color: transparent;
border-l-blackborder-left-color: rgb(0 0 0);
border-l-whiteborder-left-color: rgb(255 255 255);
border-l-slate-50border-left-color: rgb(248 250 252);
border-l-slate-100border-left-color: rgb(241 245 249);
border-l-slate-200border-left-color: rgb(226 232 240);
border-l-slate-300border-left-color: rgb(203 213 225);
border-l-slate-400border-left-color: rgb(148 163 184);
border-l-slate-500border-left-color: rgb(100 116 139);
border-l-slate-600border-left-color: rgb(71 85 105);
border-l-slate-700border-left-color: rgb(51 65 85);
border-l-slate-800border-left-color: rgb(30 41 59);
border-l-slate-900border-left-color: rgb(15 23 42);
border-l-slate-950border-left-color: rgb(2 6 23);
border-l-gray-50border-left-color: rgb(249 250 251);
border-l-gray-100border-left-color: rgb(243 244 246);
border-l-gray-200border-left-color: rgb(229 231 235);
border-l-gray-300border-left-color: rgb(209 213 219);
border-l-gray-400border-left-color: rgb(156 163 175);
border-l-gray-500border-left-color: rgb(107 114 128);
border-l-gray-600border-left-color: rgb(75 85 99);
border-l-gray-700border-left-color: rgb(55 65 81);
border-l-gray-800border-left-color: rgb(31 41 55);
border-l-gray-900border-left-color: rgb(17 24 39);
border-l-gray-950border-left-color: rgb(3 7 18);
border-l-zinc-50border-left-color: rgb(250 250 250);
border-l-zinc-100border-left-color: rgb(244 244 245);
border-l-zinc-200border-left-color: rgb(228 228 231);
border-l-zinc-300border-left-color: rgb(212 212 216);
border-l-zinc-400border-left-color: rgb(161 161 170);
border-l-zinc-500border-left-color: rgb(113 113 122);
border-l-zinc-600border-left-color: rgb(82 82 91);
border-l-zinc-700border-left-color: rgb(63 63 70);
border-l-zinc-800border-left-color: rgb(39 39 42);
border-l-zinc-900border-left-color: rgb(24 24 27);
border-l-zinc-950border-left-color: rgb(9 9 11);
border-l-neutral-50border-left-color: rgb(250 250 250);
border-l-neutral-100border-left-color: rgb(245 245 245);
border-l-neutral-200border-left-color: rgb(229 229 229);
border-l-neutral-300border-left-color: rgb(212 212 212);
border-l-neutral-400border-left-color: rgb(163 163 163);
border-l-neutral-500border-left-color: rgb(115 115 115);
border-l-neutral-600border-left-color: rgb(82 82 82);
border-l-neutral-700border-left-color: rgb(64 64 64);
border-l-neutral-800border-left-color: rgb(38 38 38);
border-l-neutral-900border-left-color: rgb(23 23 23);
border-l-neutral-950border-left-color: rgb(10 10 10);
border-l-stone-50border-left-color: rgb(250 250 249);
border-l-stone-100border-left-color: rgb(245 245 244);
border-l-stone-200border-left-color: rgb(231 229 228);
border-l-stone-300border-left-color: rgb(214 211 209);
border-l-stone-400border-left-color: rgb(168 162 158);
border-l-stone-500border-left-color: rgb(120 113 108);
border-l-stone-600border-left-color: rgb(87 83 78);
border-l-stone-700border-left-color: rgb(68 64 60);
border-l-stone-800border-left-color: rgb(41 37 36);
border-l-stone-900border-left-color: rgb(28 25 23);
border-l-stone-950border-left-color: rgb(12 10 9);
border-l-red-50border-left-color: rgb(254 242 242);
border-l-red-100border-left-color: rgb(254 226 226);
border-l-red-200border-left-color: rgb(254 202 202);
border-l-red-300border-left-color: rgb(252 165 165);
border-l-red-400border-left-color: rgb(248 113 113);
border-l-red-500border-left-color: rgb(239 68 68);
border-l-red-600border-left-color: rgb(220 38 38);
border-l-red-700border-left-color: rgb(185 28 28);
border-l-red-800border-left-color: rgb(153 27 27);
border-l-red-900border-left-color: rgb(127 29 29);
border-l-red-950border-left-color: rgb(69 10 10);
border-l-orange-50border-left-color: rgb(255 247 237);
border-l-orange-100border-left-color: rgb(255 237 213);
border-l-orange-200border-left-color: rgb(254 215 170);
border-l-orange-300border-left-color: rgb(253 186 116);
border-l-orange-400border-left-color: rgb(251 146 60);
border-l-orange-500border-left-color: rgb(249 115 22);
border-l-orange-600border-left-color: rgb(234 88 12);
border-l-orange-700border-left-color: rgb(194 65 12);
border-l-orange-800border-left-color: rgb(154 52 18);
border-l-orange-900border-left-color: rgb(124 45 18);
border-l-orange-950border-left-color: rgb(67 20 7);
border-l-amber-50border-left-color: rgb(255 251 235);
border-l-amber-100border-left-color: rgb(254 243 199);
border-l-amber-200border-left-color: rgb(253 230 138);
border-l-amber-300border-left-color: rgb(252 211 77);
border-l-amber-400border-left-color: rgb(251 191 36);
border-l-amber-500border-left-color: rgb(245 158 11);
border-l-amber-600border-left-color: rgb(217 119 6);
border-l-amber-700border-left-color: rgb(180 83 9);
border-l-amber-800border-left-color: rgb(146 64 14);
border-l-amber-900border-left-color: rgb(120 53 15);
border-l-amber-950border-left-color: rgb(69 26 3);
border-l-yellow-50border-left-color: rgb(254 252 232);
border-l-yellow-100border-left-color: rgb(254 249 195);
border-l-yellow-200border-left-color: rgb(254 240 138);
border-l-yellow-300border-left-color: rgb(253 224 71);
border-l-yellow-400border-left-color: rgb(250 204 21);
border-l-yellow-500border-left-color: rgb(234 179 8);
border-l-yellow-600border-left-color: rgb(202 138 4);
border-l-yellow-700border-left-color: rgb(161 98 7);
border-l-yellow-800border-left-color: rgb(133 77 14);
border-l-yellow-900border-left-color: rgb(113 63 18);
border-l-yellow-950border-left-color: rgb(66 32 6);
border-l-lime-50border-left-color: rgb(247 254 231);
border-l-lime-100border-left-color: rgb(236 252 203);
border-l-lime-200border-left-color: rgb(217 249 157);
border-l-lime-300border-left-color: rgb(190 242 100);
border-l-lime-400border-left-color: rgb(163 230 53);
border-l-lime-500border-left-color: rgb(132 204 22);
border-l-lime-600border-left-color: rgb(101 163 13);
border-l-lime-700border-left-color: rgb(77 124 15);
border-l-lime-800border-left-color: rgb(63 98 18);
border-l-lime-900border-left-color: rgb(54 83 20);
border-l-lime-950border-left-color: rgb(26 46 5);
border-l-green-50border-left-color: rgb(240 253 244);
border-l-green-100border-left-color: rgb(220 252 231);
border-l-green-200border-left-color: rgb(187 247 208);
border-l-green-300border-left-color: rgb(134 239 172);
border-l-green-400border-left-color: rgb(74 222 128);
border-l-green-500border-left-color: rgb(34 197 94);
border-l-green-600border-left-color: rgb(22 163 74);
border-l-green-700border-left-color: rgb(21 128 61);
border-l-green-800border-left-color: rgb(22 101 52);
border-l-green-900border-left-color: rgb(20 83 45);
border-l-green-950border-left-color: rgb(5 46 22);
border-l-emerald-50border-left-color: rgb(236 253 245);
border-l-emerald-100border-left-color: rgb(209 250 229);
border-l-emerald-200border-left-color: rgb(167 243 208);
border-l-emerald-300border-left-color: rgb(110 231 183);
border-l-emerald-400border-left-color: rgb(52 211 153);
border-l-emerald-500border-left-color: rgb(16 185 129);
border-l-emerald-600border-left-color: rgb(5 150 105);
border-l-emerald-700border-left-color: rgb(4 120 87);
border-l-emerald-800border-left-color: rgb(6 95 70);
border-l-emerald-900border-left-color: rgb(6 78 59);
border-l-emerald-950border-left-color: rgb(2 44 34);
border-l-teal-50border-left-color: rgb(240 253 250);
border-l-teal-100border-left-color: rgb(204 251 241);
border-l-teal-200border-left-color: rgb(153 246 228);
border-l-teal-300border-left-color: rgb(94 234 212);
border-l-teal-400border-left-color: rgb(45 212 191);
border-l-teal-500border-left-color: rgb(20 184 166);
border-l-teal-600border-left-color: rgb(13 148 136);
border-l-teal-700border-left-color: rgb(15 118 110);
border-l-teal-800border-left-color: rgb(17 94 89);
border-l-teal-900border-left-color: rgb(19 78 74);
border-l-teal-950border-left-color: rgb(4 47 46);
border-l-cyan-50border-left-color: rgb(236 254 255);
border-l-cyan-100border-left-color: rgb(207 250 254);
border-l-cyan-200border-left-color: rgb(165 243 252);
border-l-cyan-300border-left-color: rgb(103 232 249);
border-l-cyan-400border-left-color: rgb(34 211 238);
border-l-cyan-500border-left-color: rgb(6 182 212);
border-l-cyan-600border-left-color: rgb(8 145 178);
border-l-cyan-700border-left-color: rgb(14 116 144);
border-l-cyan-800border-left-color: rgb(21 94 117);
border-l-cyan-900border-left-color: rgb(22 78 99);
border-l-cyan-950border-left-color: rgb(8 51 68);
border-l-sky-50border-left-color: rgb(240 249 255);
border-l-sky-100border-left-color: rgb(224 242 254);
border-l-sky-200border-left-color: rgb(186 230 253);
border-l-sky-300border-left-color: rgb(125 211 252);
border-l-sky-400border-left-color: rgb(56 189 248);
border-l-sky-500border-left-color: rgb(14 165 233);
border-l-sky-600border-left-color: rgb(2 132 199);
border-l-sky-700border-left-color: rgb(3 105 161);
border-l-sky-800border-left-color: rgb(7 89 133);
border-l-sky-900border-left-color: rgb(12 74 110);
border-l-sky-950border-left-color: rgb(8 47 73);
border-l-blue-50border-left-color: rgb(239 246 255);
border-l-blue-100border-left-color: rgb(219 234 254);
border-l-blue-200border-left-color: rgb(191 219 254);
border-l-blue-300border-left-color: rgb(147 197 253);
border-l-blue-400border-left-color: rgb(96 165 250);
border-l-blue-500border-left-color: rgb(59 130 246);
border-l-blue-600border-left-color: rgb(37 99 235);
border-l-blue-700border-left-color: rgb(29 78 216);
border-l-blue-800border-left-color: rgb(30 64 175);
border-l-blue-900border-left-color: rgb(30 58 138);
border-l-blue-950border-left-color: rgb(23 37 84);
border-l-indigo-50border-left-color: rgb(238 242 255);
border-l-indigo-100border-left-color: rgb(224 231 255);
border-l-indigo-200border-left-color: rgb(199 210 254);
border-l-indigo-300border-left-color: rgb(165 180 252);
border-l-indigo-400border-left-color: rgb(129 140 248);
border-l-indigo-500border-left-color: rgb(99 102 241);
border-l-indigo-600border-left-color: rgb(79 70 229);
border-l-indigo-700border-left-color: rgb(67 56 202);
border-l-indigo-800border-left-color: rgb(55 48 163);
border-l-indigo-900border-left-color: rgb(49 46 129);
border-l-indigo-950border-left-color: rgb(30 27 75);
border-l-violet-50border-left-color: rgb(245 243 255);
border-l-violet-100border-left-color: rgb(237 233 254);
border-l-violet-200border-left-color: rgb(221 214 254);
border-l-violet-300border-left-color: rgb(196 181 253);
border-l-violet-400border-left-color: rgb(167 139 250);
border-l-violet-500border-left-color: rgb(139 92 246);
border-l-violet-600border-left-color: rgb(124 58 237);
border-l-violet-700border-left-color: rgb(109 40 217);
border-l-violet-800border-left-color: rgb(91 33 182);
border-l-violet-900border-left-color: rgb(76 29 149);
border-l-violet-950border-left-color: rgb(46 16 101);
border-l-purple-50border-left-color: rgb(250 245 255);
border-l-purple-100border-left-color: rgb(243 232 255);
border-l-purple-200border-left-color: rgb(233 213 255);
border-l-purple-300border-left-color: rgb(216 180 254);
border-l-purple-400border-left-color: rgb(192 132 252);
border-l-purple-500border-left-color: rgb(168 85 247);
border-l-purple-600border-left-color: rgb(147 51 234);
border-l-purple-700border-left-color: rgb(126 34 206);
border-l-purple-800border-left-color: rgb(107 33 168);
border-l-purple-900border-left-color: rgb(88 28 135);
border-l-purple-950border-left-color: rgb(59 7 100);
border-l-fuchsia-50border-left-color: rgb(253 244 255);
border-l-fuchsia-100border-left-color: rgb(250 232 255);
border-l-fuchsia-200border-left-color: rgb(245 208 254);
border-l-fuchsia-300border-left-color: rgb(240 171 252);
border-l-fuchsia-400border-left-color: rgb(232 121 249);
border-l-fuchsia-500border-left-color: rgb(217 70 239);
border-l-fuchsia-600border-left-color: rgb(192 38 211);
border-l-fuchsia-700border-left-color: rgb(162 28 175);
border-l-fuchsia-800border-left-color: rgb(134 25 143);
border-l-fuchsia-900border-left-color: rgb(112 26 117);
border-l-fuchsia-950border-left-color: rgb(74 4 78);
border-l-pink-50border-left-color: rgb(253 242 248);
border-l-pink-100border-left-color: rgb(252 231 243);
border-l-pink-200border-left-color: rgb(251 207 232);
border-l-pink-300border-left-color: rgb(249 168 212);
border-l-pink-400border-left-color: rgb(244 114 182);
border-l-pink-500border-left-color: rgb(236 72 153);
border-l-pink-600border-left-color: rgb(219 39 119);
border-l-pink-700border-left-color: rgb(190 24 93);
border-l-pink-800border-left-color: rgb(157 23 77);
border-l-pink-900border-left-color: rgb(131 24 67);
border-l-pink-950border-left-color: rgb(80 7 36);
border-l-rose-50border-left-color: rgb(255 241 242);
border-l-rose-100border-left-color: rgb(255 228 230);
border-l-rose-200border-left-color: rgb(254 205 211);
border-l-rose-300border-left-color: rgb(253 164 175);
border-l-rose-400border-left-color: rgb(251 113 133);
border-l-rose-500border-left-color: rgb(244 63 94);
border-l-rose-600border-left-color: rgb(225 29 72);
border-l-rose-700border-left-color: rgb(190 18 60);
border-l-rose-800border-left-color: rgb(159 18 57);
border-l-rose-900border-left-color: rgb(136 19 55);
border-l-rose-950border-left-color: rgb(76 5 25);

边框样式 ​

类对应的 CSS
border-solidborder-style: solid;
border-dashedborder-style: dashed;
border-dottedborder-style: dotted;
border-doubleborder-style: double;
border-hiddenborder-style: hidden;
border-noneborder-style: none;

阴影位置 ​

类对应的 CSS
shadow-smbox-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadowbox-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-mdbox-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lgbox-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xlbox-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xlbox-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-innerbox-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-nonebox-shadow: 0 0 #0000;

阴影颜色 ​

类对应的 CSS
shadow-inherit--tw-shadow-color: inherit;
shadow-current--tw-shadow-color: currentColor;
shadow-transparent--tw-shadow-color: transparent;
shadow-black--tw-shadow-color: #000;
shadow-white--tw-shadow-color: #fff;
shadow-slate-50--tw-shadow-color: #f8fafc;
shadow-slate-100--tw-shadow-color: #f1f5f9;
shadow-slate-200--tw-shadow-color: #e2e8f0;
shadow-slate-300--tw-shadow-color: #cbd5e1;
shadow-slate-400--tw-shadow-color: #94a3b8;
shadow-slate-500--tw-shadow-color: #64748b;
shadow-slate-600--tw-shadow-color: #475569;
shadow-slate-700--tw-shadow-color: #334155;
shadow-slate-800--tw-shadow-color: #1e293b;
shadow-slate-900--tw-shadow-color: #0f172a;
shadow-slate-950--tw-shadow-color: #020617;
shadow-gray-50--tw-shadow-color: #f9fafb;
shadow-gray-100--tw-shadow-color: #f3f4f6;
shadow-gray-200--tw-shadow-color: #e5e7eb;
shadow-gray-300--tw-shadow-color: #d1d5db;
shadow-gray-400--tw-shadow-color: #9ca3af;
shadow-gray-500--tw-shadow-color: #6b7280;
shadow-gray-600--tw-shadow-color: #4b5563;
shadow-gray-700--tw-shadow-color: #374151;
shadow-gray-800--tw-shadow-color: #1f2937;
shadow-gray-900--tw-shadow-color: #111827;
shadow-gray-950--tw-shadow-color: #030712;
shadow-zinc-50--tw-shadow-color: #fafafa;
shadow-zinc-100--tw-shadow-color: #f4f4f5;
shadow-zinc-200--tw-shadow-color: #e4e4e7;
shadow-zinc-300--tw-shadow-color: #d4d4d8;
shadow-zinc-400--tw-shadow-color: #a1a1aa;
shadow-zinc-500--tw-shadow-color: #71717a;
shadow-zinc-600--tw-shadow-color: #52525b;
shadow-zinc-700--tw-shadow-color: #3f3f46;
shadow-zinc-800--tw-shadow-color: #27272a;
shadow-zinc-900--tw-shadow-color: #18181b;
shadow-zinc-950--tw-shadow-color: #09090b;
shadow-neutral-50--tw-shadow-color: #fafafa;
shadow-neutral-100--tw-shadow-color: #f5f5f5;
shadow-neutral-200--tw-shadow-color: #e5e5e5;
shadow-neutral-300--tw-shadow-color: #d4d4d4;
shadow-neutral-400--tw-shadow-color: #a3a3a3;
shadow-neutral-500--tw-shadow-color: #737373;
shadow-neutral-600--tw-shadow-color: #525252;
shadow-neutral-700--tw-shadow-color: #404040;
shadow-neutral-800--tw-shadow-color: #262626;
shadow-neutral-900--tw-shadow-color: #171717;
shadow-neutral-950--tw-shadow-color: #0a0a0a;
shadow-stone-50--tw-shadow-color: #fafaf9;
shadow-stone-100--tw-shadow-color: #f5f5f4;
shadow-stone-200--tw-shadow-color: #e7e5e4;
shadow-stone-300--tw-shadow-color: #d6d3d1;
shadow-stone-400--tw-shadow-color: #a8a29e;
shadow-stone-500--tw-shadow-color: #78716c;
shadow-stone-600--tw-shadow-color: #57534e;
shadow-stone-700--tw-shadow-color: #44403c;
shadow-stone-800--tw-shadow-color: #292524;
shadow-stone-900--tw-shadow-color: #1c1917;
shadow-stone-950--tw-shadow-color: #0c0a09;
shadow-red-50--tw-shadow-color: #fef2f2;
shadow-red-100--tw-shadow-color: #fee2e2;
shadow-red-200--tw-shadow-color: #fecaca;
shadow-red-300--tw-shadow-color: #fca5a5;
shadow-red-400--tw-shadow-color: #f87171;
shadow-red-500--tw-shadow-color: #ef4444;
shadow-red-600--tw-shadow-color: #dc2626;
shadow-red-700--tw-shadow-color: #b91c1c;
shadow-red-800--tw-shadow-color: #991b1b;
shadow-red-900--tw-shadow-color: #7f1d1d;
shadow-red-950--tw-shadow-color: #450a0a;
shadow-orange-50--tw-shadow-color: #fff7ed;
shadow-orange-100--tw-shadow-color: #ffedd5;
shadow-orange-200--tw-shadow-color: #fed7aa;
shadow-orange-300--tw-shadow-color: #fdba74;
shadow-orange-400--tw-shadow-color: #fb923c;
shadow-orange-500--tw-shadow-color: #f97316;
shadow-orange-600--tw-shadow-color: #ea580c;
shadow-orange-700--tw-shadow-color: #c2410c;
shadow-orange-800--tw-shadow-color: #9a3412;
shadow-orange-900--tw-shadow-color: #7c2d12;
shadow-orange-950--tw-shadow-color: #431407;
shadow-amber-50--tw-shadow-color: #fffbeb;
shadow-amber-100--tw-shadow-color: #fef3c7;
shadow-amber-200--tw-shadow-color: #fde68a;
shadow-amber-300--tw-shadow-color: #fcd34d;
shadow-amber-400--tw-shadow-color: #fbbf24;
shadow-amber-500--tw-shadow-color: #f59e0b;
shadow-amber-600--tw-shadow-color: #d97706;
shadow-amber-700--tw-shadow-color: #b45309;
shadow-amber-800--tw-shadow-color: #92400e;
shadow-amber-900--tw-shadow-color: #78350f;
shadow-amber-950--tw-shadow-color: #451a03;
shadow-yellow-50--tw-shadow-color: #fefce8;
shadow-yellow-100--tw-shadow-color: #fef9c3;
shadow-yellow-200--tw-shadow-color: #fef08a;
shadow-yellow-300--tw-shadow-color: #fde047;
shadow-yellow-400--tw-shadow-color: #facc15;
shadow-yellow-500--tw-shadow-color: #eab308;
shadow-yellow-600--tw-shadow-color: #ca8a04;
shadow-yellow-700--tw-shadow-color: #a16207;
shadow-yellow-800--tw-shadow-color: #854d0e;
shadow-yellow-900--tw-shadow-color: #713f12;
shadow-yellow-950--tw-shadow-color: #422006;
shadow-lime-50--tw-shadow-color: #f7fee7;
shadow-lime-100--tw-shadow-color: #ecfccb;
shadow-lime-200--tw-shadow-color: #d9f99d;
shadow-lime-300--tw-shadow-color: #bef264;
shadow-lime-400--tw-shadow-color: #a3e635;
shadow-lime-500--tw-shadow-color: #84cc16;
shadow-lime-600--tw-shadow-color: #65a30d;
shadow-lime-700--tw-shadow-color: #4d7c0f;
shadow-lime-800--tw-shadow-color: #3f6212;
shadow-lime-900--tw-shadow-color: #365314;
shadow-lime-950--tw-shadow-color: #1a2e05;
shadow-green-50--tw-shadow-color: #f0fdf4;
shadow-green-100--tw-shadow-color: #dcfce7;
shadow-green-200--tw-shadow-color: #bbf7d0;
shadow-green-300--tw-shadow-color: #86efac;
shadow-green-400--tw-shadow-color: #4ade80;
shadow-green-500--tw-shadow-color: #22c55e;
shadow-green-600--tw-shadow-color: #16a34a;
shadow-green-700--tw-shadow-color: #15803d;
shadow-green-800--tw-shadow-color: #166534;
shadow-green-900--tw-shadow-color: #14532d;
shadow-green-950--tw-shadow-color: #052e16;
shadow-emerald-50--tw-shadow-color: #ecfdf5;
shadow-emerald-100--tw-shadow-color: #d1fae5;
shadow-emerald-200--tw-shadow-color: #a7f3d0;
shadow-emerald-300--tw-shadow-color: #6ee7b7;
shadow-emerald-400--tw-shadow-color: #34d399;
shadow-emerald-500--tw-shadow-color: #10b981;
shadow-emerald-600--tw-shadow-color: #059669;
shadow-emerald-700--tw-shadow-color: #047857;
shadow-emerald-800--tw-shadow-color: #065f46;
shadow-emerald-900--tw-shadow-color: #064e3b;
shadow-emerald-950--tw-shadow-color: #022c22;
shadow-teal-50--tw-shadow-color: #f0fdfa;
shadow-teal-100--tw-shadow-color: #ccfbf1;
shadow-teal-200--tw-shadow-color: #99f6e4;
shadow-teal-300--tw-shadow-color: #5eead4;
shadow-teal-400--tw-shadow-color: #2dd4bf;
shadow-teal-500--tw-shadow-color: #14b8a6;
shadow-teal-600--tw-shadow-color: #0d9488;
shadow-teal-700--tw-shadow-color: #0f766e;
shadow-teal-800--tw-shadow-color: #115e59;
shadow-teal-900--tw-shadow-color: #134e4a;
shadow-teal-950--tw-shadow-color: #042f2e;
shadow-cyan-50--tw-shadow-color: #ecfeff;
shadow-cyan-100--tw-shadow-color: #cffafe;
shadow-cyan-200--tw-shadow-color: #a5f3fc;
shadow-cyan-300--tw-shadow-color: #67e8f9;
shadow-cyan-400--tw-shadow-color: #22d3ee;
shadow-cyan-500--tw-shadow-color: #06b6d4;
shadow-cyan-600--tw-shadow-color: #0891b2;
shadow-cyan-700--tw-shadow-color: #0e7490;
shadow-cyan-800--tw-shadow-color: #155e75;
shadow-cyan-900--tw-shadow-color: #164e63;
shadow-cyan-950--tw-shadow-color: #083344;
shadow-sky-50--tw-shadow-color: #f0f9ff;
shadow-sky-100--tw-shadow-color: #e0f2fe;
shadow-sky-200--tw-shadow-color: #bae6fd;
shadow-sky-300--tw-shadow-color: #7dd3fc;
shadow-sky-400--tw-shadow-color: #38bdf8;
shadow-sky-500--tw-shadow-color: #0ea5e9;
shadow-sky-600--tw-shadow-color: #0284c7;
shadow-sky-700--tw-shadow-color: #0369a1;
shadow-sky-800--tw-shadow-color: #075985;
shadow-sky-900--tw-shadow-color: #0c4a6e;
shadow-sky-950--tw-shadow-color: #082f49;
shadow-blue-50--tw-shadow-color: #eff6ff;
shadow-blue-100--tw-shadow-color: #dbeafe;
shadow-blue-200--tw-shadow-color: #bfdbfe;
shadow-blue-300--tw-shadow-color: #93c5fd;
shadow-blue-400--tw-shadow-color: #60a5fa;
shadow-blue-500--tw-shadow-color: #3b82f6;
shadow-blue-600--tw-shadow-color: #2563eb;
shadow-blue-700--tw-shadow-color: #1d4ed8;
shadow-blue-800--tw-shadow-color: #1e40af;
shadow-blue-900--tw-shadow-color: #1e3a8a;
shadow-blue-950--tw-shadow-color: #172554;
shadow-indigo-50--tw-shadow-color: #eef2ff;
shadow-indigo-100--tw-shadow-color: #e0e7ff;
shadow-indigo-200--tw-shadow-color: #c7d2fe;
shadow-indigo-300--tw-shadow-color: #a5b4fc;
shadow-indigo-400--tw-shadow-color: #818cf8;
shadow-indigo-500--tw-shadow-color: #6366f1;
shadow-indigo-600--tw-shadow-color: #4f46e5;
shadow-indigo-700--tw-shadow-color: #4338ca;
shadow-indigo-800--tw-shadow-color: #3730a3;
shadow-indigo-900--tw-shadow-color: #312e81;
shadow-indigo-950--tw-shadow-color: #1e1b4b;
shadow-violet-50--tw-shadow-color: #f5f3ff;
shadow-violet-100--tw-shadow-color: #ede9fe;
shadow-violet-200--tw-shadow-color: #ddd6fe;
shadow-violet-300--tw-shadow-color: #c4b5fd;
shadow-violet-400--tw-shadow-color: #a78bfa;
shadow-violet-500--tw-shadow-color: #8b5cf6;
shadow-violet-600--tw-shadow-color: #7c3aed;
shadow-violet-700--tw-shadow-color: #6d28d9;
shadow-violet-800--tw-shadow-color: #5b21b6;
shadow-violet-900--tw-shadow-color: #4c1d95;
shadow-violet-950--tw-shadow-color: #2e1065;
shadow-purple-50--tw-shadow-color: #faf5ff;
shadow-purple-100--tw-shadow-color: #f3e8ff;
shadow-purple-200--tw-shadow-color: #e9d5ff;
shadow-purple-300--tw-shadow-color: #d8b4fe;
shadow-purple-400--tw-shadow-color: #c084fc;
shadow-purple-500--tw-shadow-color: #a855f7;
shadow-purple-600--tw-shadow-color: #9333ea;
shadow-purple-700--tw-shadow-color: #7e22ce;
shadow-purple-800--tw-shadow-color: #6b21a8;
shadow-purple-900--tw-shadow-color: #581c87;
shadow-purple-950--tw-shadow-color: #3b0764;
shadow-fuchsia-50--tw-shadow-color: #fdf4ff;
shadow-fuchsia-100--tw-shadow-color: #fae8ff;
shadow-fuchsia-200--tw-shadow-color: #f5d0fe;
shadow-fuchsia-300--tw-shadow-color: #f0abfc;
shadow-fuchsia-400--tw-shadow-color: #e879f9;
shadow-fuchsia-500--tw-shadow-color: #d946ef;
shadow-fuchsia-600--tw-shadow-color: #c026d3;
shadow-fuchsia-700--tw-shadow-color: #a21caf;
shadow-fuchsia-800--tw-shadow-color: #86198f;
shadow-fuchsia-900--tw-shadow-color: #701a75;
shadow-fuchsia-950--tw-shadow-color: #4a044e;
shadow-pink-50--tw-shadow-color: #fdf2f8;
shadow-pink-100--tw-shadow-color: #fce7f3;
shadow-pink-200--tw-shadow-color: #fbcfe8;
shadow-pink-300--tw-shadow-color: #f9a8d4;
shadow-pink-400--tw-shadow-color: #f472b6;
shadow-pink-500--tw-shadow-color: #ec4899;
shadow-pink-600--tw-shadow-color: #db2777;
shadow-pink-700--tw-shadow-color: #be185d;
shadow-pink-800--tw-shadow-color: #9d174d;
shadow-pink-900--tw-shadow-color: #831843;
shadow-pink-950--tw-shadow-color: #500724;
shadow-rose-50--tw-shadow-color: #fff1f2;
shadow-rose-100--tw-shadow-color: #ffe4e6;
shadow-rose-200--tw-shadow-color: #fecdd3;
shadow-rose-300--tw-shadow-color: #fda4af;
shadow-rose-400--tw-shadow-color: #fb7185;
shadow-rose-500--tw-shadow-color: #f43f5e;
shadow-rose-600--tw-shadow-color: #e11d48;
shadow-rose-700--tw-shadow-color: #be123c;
shadow-rose-800--tw-shadow-color: #9f1239;
shadow-rose-900--tw-shadow-color: #881337;
shadow-rose-950--tw-shadow-color: #4c0519;

不透明度 ​

类对应的 CSS
opacity-0opacity: 0;
opacity-5opacity: 0.05;
opacity-10opacity: 0.1;
opacity-15opacity: 0.15;
opacity-20opacity: 0.2;
opacity-25opacity: 0.25;
opacity-30opacity: 0.3;
opacity-35opacity: 0.35;
opacity-40opacity: 0.4;
opacity-45opacity: 0.45;
opacity-50opacity: 0.5;
opacity-55opacity: 0.55;
opacity-60opacity: 0.6;
opacity-65opacity: 0.65;
opacity-70opacity: 0.7;
opacity-75opacity: 0.75;
opacity-80opacity: 0.8;
opacity-85opacity: 0.85;
opacity-90opacity: 0.9;
opacity-95opacity: 0.95;
opacity-100opacity: 1;

滤镜 - 模糊 ​

Class对应的 CSS
blur-nonefilter: blur(0);
blur-smfilter: blur(4px);
blurfilter: blur(8px);
blur-mdfilter: blur(12px);
blur-lgfilter: blur(16px);
blur-xlfilter: blur(24px);
blur-2xlfilter: blur(40px);
blur-3xlfilter: blur(64px);

滤镜 - 明亮 ​

Class对应的 CSS
brightness-0filter: brightness(0);
brightness-50filter: brightness(.5);
brightness-75filter: brightness(.75);
brightness-90filter: brightness(.9);
brightness-95filter: brightness(.95);
brightness-100filter: brightness(1);
brightness-105filter: brightness(1.05);
brightness-110filter: brightness(1.1);
brightness-125filter: brightness(1.25);
brightness-150filter: brightness(1.5);
brightness-200filter: brightness(2);

滤镜 - 反转颜色 ​

Class对应的 CSS
invert-0filter: invert(0);
invertfilter: invert(100%);

背景滤镜 - 背景模糊 ​

Class对应的 CSS
backdrop-blur-nonebackdrop-filter: blur(0);
backdrop-blur-smbackdrop-filter: blur(4px);
backdrop-blurbackdrop-filter: blur(8px);
backdrop-blur-mdbackdrop-filter: blur(12px);
backdrop-blur-lgbackdrop-filter: blur(16px);
backdrop-blur-xlbackdrop-filter: blur(24px);
backdrop-blur-2xlbackdrop-filter: blur(40px);
backdrop-blur-3xlbackdrop-filter: blur(64px);

动画 - 变换属性 ​

Class对应的 CSS
transition-nonetransition-property: none;
transition-alltransition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transitiontransition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-colorstransition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-opacitytransition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-shadowtransition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-transformtransition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;

动画 - 持续时间 ​

Class对应的 CSS
duration-0transition-duration: 0s;
duration-75transition-duration: 75ms;
duration-100transition-duration: 100ms;
duration-150transition-duration: 150ms;
duration-200transition-duration: 200ms;
duration-300transition-duration: 300ms;
duration-500transition-duration: 500ms;
duration-700transition-duration: 700ms;
duration-1000transition-duration: 1000ms;

动画 - 动画类型 ​

Class对应的 CSS
ease-lineartransition-timing-function: linear;
ease-intransition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-outtransition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-outtransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

动画 - 延迟 ​

Class对应的 CSS
delay-0transition-delay: 0s;
delay-75transition-delay: 75ms;
delay-100transition-delay: 100ms;
delay-150transition-delay: 150ms;
delay-200transition-delay: 200ms;
delay-300transition-delay: 300ms;
delay-500transition-delay: 500ms;
delay-700transition-delay: 700ms;
delay-1000transition-delay: 1000ms;

变换 - 缩放 ​

Class对应的 CSS
scale-0transform: scale(0);
scale-x-0transform: scaleX(0);
scale-y-0transform: scaleY(0);
scale-50transform: scale(.5);
scale-x-50transform: scaleX(.5);
scale-y-50transform: scaleY(.5);
scale-75transform: scale(.75);
scale-x-75transform: scaleX(.75);
scale-y-75transform: scaleY(.75);
scale-90transform: scale(.9);
scale-x-90transform: scaleX(.9);
scale-y-90transform: scaleY(.9);
scale-95transform: scale(.95);
scale-x-95transform: scaleX(.95);
scale-y-95transform: scaleY(.95);
scale-100transform: scale(1);
scale-x-100transform: scaleX(1);
scale-y-100transform: scaleY(1);
scale-105transform: scale(1.05);
scale-x-105transform: scaleX(1.05);
scale-y-105transform: scaleY(1.05);
scale-110transform: scale(1.1);
scale-x-110transform: scaleX(1.1);
scale-y-110transform: scaleY(1.1);
scale-125transform: scale(1.25);
scale-x-125transform: scaleX(1.25);
scale-y-125transform: scaleY(1.25);
scale-150transform: scale(1.5);
scale-x-150transform: scaleX(1.5);
scale-y-150transform: scaleY(1.5);

变换 - 旋转 ​

Class对应的 CSS
rotate-0transform: rotate(0deg);
rotate-1transform: rotate(1deg);
rotate-2transform: rotate(2deg);
rotate-3transform: rotate(3deg);
rotate-6transform: rotate(6deg);
rotate-12transform: rotate(12deg);
rotate-45transform: rotate(45deg);
rotate-90transform: rotate(90deg);
rotate-180transform: rotate(180deg);

变换 - 移动 ​

Class对应的 CSS
translate-x-0transform: translateX(0px);
translate-y-0transform: translateY(0px);
translate-x-pxtransform: translateX(1px);
translate-y-pxtransform: translateY(1px);
translate-x-0.5transform: translateX(0.125rem);
translate-y-0.5transform: translateY(0.125rem);
translate-x-1transform: translateX(0.25rem);
translate-y-1transform: translateY(0.25rem);
translate-x-1.5transform: translateX(0.375rem);
translate-y-1.5transform: translateY(0.375rem);
translate-x-2transform: translateX(0.5rem);
translate-y-2transform: translateY(0.5rem);
translate-x-2.5transform: translateX(0.625rem);
translate-y-2.5transform: translateY(0.625rem);
translate-x-3transform: translateX(0.75rem);
translate-y-3transform: translateY(0.75rem);
translate-x-3.5transform: translateX(0.875rem);
translate-y-3.5transform: translateY(0.875rem);
translate-x-4transform: translateX(1rem);
translate-y-4transform: translateY(1rem);
translate-x-5transform: translateX(1.25rem);
translate-y-5transform: translateY(1.25rem);
translate-x-6transform: translateX(1.5rem);
translate-y-6transform: translateY(1.5rem);
translate-x-7transform: translateX(1.75rem);
translate-y-7transform: translateY(1.75rem);
translate-x-8transform: translateX(2rem);
translate-y-8transform: translateY(2rem);
translate-x-9transform: translateX(2.25rem);
translate-y-9transform: translateY(2.25rem);
translate-x-10transform: translateX(2.5rem);
translate-y-10transform: translateY(2.5rem);
translate-x-11transform: translateX(2.75rem);
translate-y-11transform: translateY(2.75rem);
translate-x-12transform: translateX(3rem);
translate-y-12transform: translateY(3rem);
translate-x-14transform: translateX(3.5rem);
translate-y-14transform: translateY(3.5rem);
translate-x-16transform: translateX(4rem);
translate-y-16transform: translateY(4rem);
translate-x-20transform: translateX(5rem);
translate-y-20transform: translateY(5rem);
translate-x-24transform: translateX(6rem);
translate-y-24transform: translateY(6rem);
translate-x-28transform: translateX(7rem);
translate-y-28transform: translateY(7rem);
translate-x-32transform: translateX(8rem);
translate-y-32transform: translateY(8rem);
translate-x-36transform: translateX(9rem);
translate-y-36transform: translateY(9rem);
translate-x-40transform: translateX(10rem);
translate-y-40transform: translateY(10rem);
translate-x-44transform: translateX(11rem);
translate-y-44transform: translateY(11rem);
translate-x-48transform: translateX(12rem);
translate-y-48transform: translateY(12rem);
translate-x-52transform: translateX(13rem);
translate-y-52transform: translateY(13rem);
translate-x-56transform: translateX(14rem);
translate-y-56transform: translateY(14rem);
translate-x-60transform: translateX(15rem);
translate-y-60transform: translateY(15rem);
translate-x-64transform: translateX(16rem);
translate-y-64transform: translateY(16rem);
translate-x-72transform: translateX(18rem);
translate-y-72transform: translateY(18rem);
translate-x-80transform: translateX(20rem);
translate-y-80transform: translateY(20rem);
translate-x-96transform: translateX(24rem);
translate-y-96transform: translateY(24rem);
translate-x-1/2transform: translateX(50%);
translate-x-1/3transform: translateX(33.333333%);
translate-x-2/3transform: translateX(66.666667%);
translate-x-1/4transform: translateX(25%);
translate-x-2/4transform: translateX(50%);
translate-x-3/4transform: translateX(75%);
translate-x-fulltransform: translateX(100%);
translate-y-1/2transform: translateY(50%);
translate-y-1/3transform: translateY(33.333333%);
translate-y-2/3transform: translateY(66.666667%);
translate-y-1/4transform: translateY(25%);
translate-y-2/4transform: translateY(50%);
translate-y-3/4transform: translateY(75%);
translate-y-fulltransform: translateY(100%);

变换 - 相对位置 ​

Class对应的 CSS
origin-centertransform-origin: center;
origin-toptransform-origin: top;
origin-top-righttransform-origin: top right;
origin-righttransform-origin: right;
origin-bottom-righttransform-origin: bottom right;
origin-bottomtransform-origin: bottom;
origin-bottom-lefttransform-origin: bottom left;
origin-lefttransform-origin: left;
origin-top-lefttransform-origin: top left;

为方便开发而创建的常用库指南

2024 © ImQi1