README

这是一个轻量级（且底层）的CSS工具库，旨在简化并标准化常见的CSS模式。它提供了一种动态生成CSS属性和值的工具函数。

安装

该库使用TypeScript和PHP实现。您可以通过npm安装TypeScript版本

npm install @lnear/marco

和composer安装PHP版本

composer require lnear/marco

用法

import { replace } from "@lnear/marco";
console.log(
  `div { ${replace(
    "transition-colors",
    "transition-none",
    "blur-md",
    "drop-shadow-xl"
  )} }`
);

use Lnear\Marco\Marco;
$m = Marco::macro(
  'transition-colors',
  'transition-none',
  'blur-md',
  'drop-shadow-xl'
);
echo "div { $m }";

这将生成以下CSS字符串

div {
  transition-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-property: none;
  filter: blur(12px);
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(
      0 8px 5px rgb(0 0 0 / 0.08)
    );
}

您也可以使用generateCSS函数为具有多个宏的Web组件（或任何支持:host的任何其他范围样式引擎）生成CSS字符串

import { generateCSS } from "@lnear/marco";
console.log(
  generateCSS({
    sm: "div { color: red; }",
    md: "div { color: green; }",
    lg: "div { color: blue; }",
    xl: "div { color: yellow; }",
    xl2: "div { color: pink; }",
    dark: "div { color: black; }",
    light: "div { color: white; }",
    macros: "sm:md:lg:xl:xl2:dark:bg-red-500",
  })
);

或PHP中的Marco类的generate方法

use Lnear\Marco\Marco;
echo Marco::generate(
  sm: 'div { color: red; }',
  md: 'div { color: green; }',
  lg: 'div { color: blue; }',
  xl: 'div { color: yellow; }',
  xl2: 'div { color: pink; }',
  dark: 'div { color: black; }',
  light: 'div { color: white; }',
  macros: 'sm:md:lg:xl:xl2:dark:bg-red-500',
);

两者都将生成以下CSS字符串

:host {
  @media (min-width: 640px) {
    background-color: rgb(239 68 68);
  }
  @media (min-width: 768px) {
    background-color: rgb(239 68 68);
  }
  @media (min-width: 1024px) {
    background-color: rgb(239 68 68);
  }
  @media (min-width: 1280px) {
    background-color: rgb(239 68 68);
  }
  @media (min-width: 1536px) {
    background-color: rgb(239 68 68);
  }
  @media (prefers-color-scheme: dark) {
    background-color: rgb(239 68 68);
  }
}
@media (min-width: 640px) {
  div {
    color: red;
  }
}
@media (min-width: 768px) {
  div {
    color: green;
  }
}
@media (min-width: 1024px) {
  div {
    color: blue;
  }
}
@media (min-width: 1280px) {
  div {
    color: yellow;
  }
}
@media (min-width: 1536px) {
  div {
    color: pink;
  }
}
@media (prefers-color-scheme: dark) {
  div {
    color: black;
  }
}
@media (prefers-color-scheme: light) {
  div {
    color: white;
  }
}

更多文档即将推出...

模式

以下是可以与replace函数一起使用的预定义模式。这不是一个详尽的列表，根据需要实现直观的模式。例如，这里只记录了"saturate-(0, 50, 100, 150, 200)"，但任何值都可以与"saturate"模式一起使用。（saturate-x，其中x是数字，将被替换为"filter: saturate({x / 100});")

查看模式

`drop-shadow`

filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));

`drop-shadow-sm`

filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));

`drop-shadow-md`

filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));

`drop-shadow-lg`

filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));

`drop-shadow-xl`

filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));

`drop-shadow-xl2`

filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));

`drop-shadow-none`

filter: drop-shadow(0 0 #0000);

`backdrop-hue-rotate-0`

backdrop-filter: hue-rotate(0deg);

`backdrop-hue-rotate-15`

backdrop-filter: hue-rotate(15deg);

`backdrop-hue-rotate-16`

backdrop-filter: hue-rotate(16deg);

`backdrop-hue-rotate-30`

backdrop-filter: hue-rotate(30deg);

`backdrop-hue-rotate-60`

backdrop-filter: hue-rotate(60deg);

`backdrop-hue-rotate-90`

backdrop-filter: hue-rotate(90deg);

`backdrop-hue-rotate-180`

backdrop-filter: hue-rotate(180deg);

`hue-rotate-0`

filter: hue-rotate(0deg);

`hue-rotate-15`

filter: hue-rotate(15deg);

`hue-rotate-30`

filter: hue-rotate(30deg);

`hue-rotate-60`

filter: hue-rotate(60deg);

`hue-rotate-90`

filter: hue-rotate(90deg);

`hue-rotate-180`

filter: hue-rotate(180deg);

`grayscale-0`

filter: grayscale(0);

`grayscale`

filter: grayscale(100%);

`invert-0`

filter: invert(0);

`invert`

filter: invert(100%);

`sepia-0`

filter: sepia(0);

`sepia`

filter: sepia(100%);

`backdrop-grayscale-0`

backdrop-filter: grayscale(0);

`backdrop-grayscale`

backdrop-filter: grayscale(100%);

`saturate-0`

filter: saturate(0);

`saturate-50`

filter: saturate(0.5);

`saturate-100`

filter: saturate(1);

`saturate-150`

filter: saturate(1.5);

`saturate-200`

filter: saturate(2);

`backdrop-blur`

backdrop-filter: blur(8px);

`backdrop-blur-none`

backdrop-filter: blur(0);

`backdrop-blur-sm`

backdrop-filter: blur(4px);

`backdrop-blur-md`

backdrop-filter: blur(12px);

`backdrop-blur-lg`

backdrop-filter: blur(16px);

`backdrop-blur-xl`

backdrop-filter: blur(24px);

`backdrop-blur-xl2`

backdrop-filter: blur(40px);

`backdrop-blur-xl3`

backdrop-filter: blur(64px);

`blur`

filter: blur(8px);

`blur-none`

filter: blur(0);

`blur-sm`

filter: blur(4px);

`blur-md`

filter: blur(12px);

`blur-lg`

filter: blur(16px);

`blur-xl`

filter: blur(24px);

`blur-xl2`

filter: blur(40px);

`blur-xl3`

filter: blur(64px);

`backdrop-brightness-0`

backdrop-filter: brightness(0);

`backdrop-brightness-50`

backdrop-filter: brightness(0.5);

`backdrop-brightness-75`

backdrop-filter: brightness(0.75);

`backdrop-brightness-90`

backdrop-filter: brightness(0.9);

`backdrop-brightness-95`

backdrop-filter: brightness(0.95);

`backdrop-brightness-100`

backdrop-filter: brightness(1);

`backdrop-brightness-105`

backdrop-filter: brightness(1.05);

`backdrop-brightness-110`

backdrop-filter: brightness(1.1);

`backdrop-brightness-125`

backdrop-filter: brightness(1.25);

`backdrop-brightness-150`

backdrop-filter: brightness(1.5);

`backdrop-brightness-200`

backdrop-filter: brightness(2);

`brightness-0`

filter: brightness(0);

`brightness-50`

filter: brightness(0.5);

`brightness-75`

filter: brightness(0.75);

`brightness-90`

filter: brightness(0.9);

`brightness-95`

filter: brightness(0.95);

`brightness-100`

filter: brightness(1);

`brightness-105`

filter: brightness(1.05);

`brightness-110`

filter: brightness(1.1);

`brightness-125`

filter: brightness(1.25);

`brightness-150`

filter: brightness(1.5);

`brightness-200`

filter: brightness(2);

`contrast-0`

filter: contrast(0);

`contrast-50`

filter: contrast(0.5);

`contrast-75`

filter: contrast(0.75);

`contrast-100`

filter: contrast(1);

`contrast-125`

filter: contrast(1.25);

`contrast-150`

filter: contrast(1.5);

`contrast-200`

filter: contrast(2);

`backdrop-contrast-0`

backdrop-filter: contrast(0);

`backdrop-contrast-50`

backdrop-filter: contrast(0.5);

`backdrop-contrast-75`

backdrop-filter: contrast(0.75);

`backdrop-contrast-100`

backdrop-filter: contrast(1);

`backdrop-contrast-125`

backdrop-filter: contrast(1.25);

`backdrop-contrast-150`

backdrop-filter: contrast(1.5);

`backdrop-contrast-200`

backdrop-filter: contrast(2);

`ease-linear`

transition-timing-function: linear;

`ease-in`

transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

`ease-out`

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

`ease-in-out`

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

`timing-linear`

transition-timing-function: linear;

`timing-in`

transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

`timing-out`

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

`timing-in-out`

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

`transition-colors`

transition-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-opacity`

transition-property: opacity;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

`transition-all`

transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

`transition-shadow`

transition-property: shadow;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

`transition-none`

transition-property: none;

`float-start`

float: start;

`float-end`

float: end;

`float-right`

float: right;

`float-left`

float: left;

`float-none`

float: none;

`clear-start`

clear: start;

`clear-end`

clear: end;

`clear-right`

clear: right;

`clear-left`

clear: left;

`clear-both`

clear: both;

`clear-none`

clear: none;

`inline-block`

display: inline-block;

`inline-flex`

display: inline-flex;

`inline-table`

display: inline-table;

`block`

display: block;

`inline`

display: inline;

`hidden`

display: none;

`table`

display: table;

`table-caption`

display: table-caption;

`table-cell`

display: table-cell;

`table-column`

display: table-column;

`table-column-group`

display: table-column-group;

`table-footer-group`

display: table-footer-group;

`table-header-group`

display: table-header-group;

`table-row-group`

display: table-row-group;

`table-row`

display: table-row;

`flow-root`

display: flow-root;

`grid`

display: grid;

`inline-grid`

display: inline-grid;

`contents`

display: contents;

`列表项`

display: list-item;

`背景继承`

background-color: inherit;

`背景透明`

background-color: transparent;

`背景自动`

background-size: auto;

`背景覆盖`

background-size: cover;

`背景包含`

background-size: contain;

`背景固定`

background-attachment: fixed;

`背景局部`

background-attachment: local;

`背景滚动`

background-attachment: scroll;

`背景居中`

background-position: center;

`背景顶部`

background-position: top;

`背景右顶部`

background-position: right-top;

`背景右侧`

background-position: right;

`背景右底部`

background-position: right-bottom;

`背景底部`

background-position: bottom;

`背景左底部`

background-position: left-bottom;

`背景左侧`

background-position: left;

`背景左顶部`

background-position: left-top;

`背景重复`

background-repeat: repeat;

`背景不重复`

background-repeat: no-repeat;

`背景重复X`

background-repeat: repeat-x;

`背景重复Y`

background-repeat: repeat-y;

`背景圆角`

background-repeat: round;

`背景间隔`

background-repeat: space;

`背景无`

background-image: none;

`指针事件无`

pointer-events: none;

`指针事件自动`

pointer-events: auto;

`位置内容居中`

place-content: center;

`位置内容起始`

place-content: start;

`位置内容结束`

place-content: end;

`位置内容之间`

place-content: between;

`位置内容环绕`

place-content: around;

`位置内容均匀`

place-content: evenly;

`位置内容基线`

place-content: baseline;

`位置内容拉伸`

place-content: stretch;

`位置项目居中`

place-items: center;

`位置项目起始`

place-items: start;

`位置项目结束`

place-items: end;

`位置项目基线`

place-items: baseline;

`位置项目拉伸`

place-items: stretch;

`内边距自动`

inset: auto;

`起始自动`

inset-inline-start: auto;

`结束自动`

inset-inline-end: auto;

`顶部自动`

top: auto;

`右侧自动`

right: auto;

`底部自动`

bottom: auto;

`左侧自动`

left: auto;

`独立`

isolation: isolate;

`隔离自动`

isolation: auto;

`z轴自动`

z-index: auto;

`顺序第一`

order: calc(-infinity);

`顺序最后`

order: calc(infinity);

`顺序无`

order: 0;

`列自动`

grid-column: auto;

`列全宽`

grid-column: 1 / -1;

`列起始自动`

grid-column-start: auto;

`列结束自动`

grid-column-end: auto;

`行自动`

grid-row: auto;

`行全宽`

grid-row: 1 / -1;

`行起始自动`

grid-row-start: auto;

`行结束自动`

grid-row-end: auto;

`框边框`

box-sizing: border-box;

`框内容`

box-sizing: content-box;

`宽高比自动`

aspect-ratio: auto;

`宽高比方形`

aspect-ratio: 1 / 1;

`宽高比视频`

aspect-ratio: 16 / 9;

`弹性自动`

flex: auto;

`弹性初始`

flex: 0 auto;

`弹性无`

flex: none;

`基础自动`

flex-basis: auto;

`基础全宽`

flex-basis: 100%;

`表格自动`

table-layout: auto;

`表格固定`

table-layout: fixed;

`标题顶部`

caption-side: top;

`标题底部`

caption-side: bottom;

`边框折叠`

border-collapse: collapse;

`边框分离`

border-collapse: separate;

`原点中心`

transform-origin: center;

`原点顶部`

transform-origin: top;

`原点顶部右`

transform-origin: top right;

`原点右侧`

transform-origin: right;

`原点底部右`

transform-origin: bottom right;

`原点底部`

transform-origin: bottom;

`原点底部左`

transform-origin: bottom left;

`原点左侧`

transform-origin: left;

`原点顶部左`

transform-origin: top left;

`透视原点中心`

perspective-origin: center;

`透视原点顶部`

perspective-origin: top;

`透视原点顶部右`

perspective-origin: top right;

`透视原点右侧`

perspective-origin: right;

`透视原点底部右`

perspective-origin: bottom right;

`透视原点底部`

perspective-origin: bottom;

`透视原点底部左`

perspective-origin: bottom left;

`透视原点左侧`

perspective-origin: left;

`透视原点顶部左`

perspective-origin: top left;

`透视无`

perspective: none;

`平移无`

translate: none;

`变换无`

transform: none;

`变换平面`

transform-style: flat;

`变换3D`

transform-style: preserve-3d;

`变换内容`

transform-box: content-box;

`变换边框`

transform-box: border-box;

`变换填充`

transform-box: fill-box;

`变换描边`

transform-box: stroke-box;

`变换视图`

transform-box: view-box;

`背面可见`

backface-visibility: visible;

`背面隐藏`

backface-visibility: hidden;

`可调整无`

resize: none;

`可调整两侧`

resize: both;

`可调整X`

resize: horizontal;

`可调整Y`

resize: vertical;

`吸附无`

scroll-snap-type: none;

`吸附对齐无`

scroll-snap-align: none;

`吸附起始`

scroll-snap-align: start;

`吸附结束`

scroll-snap-align: end;

`吸附居中`

scroll-snap-align: center;

`吸附正常`

scroll-snap-stop: normal;

`吸附始终`

scroll-snap-stop: always;

`列表内部`

list-style-position: inside;

`列表外部`

list-style-position: outside;

`列表无`

list-style-type: none;

`列表圆点`

list-style-type: disc;

`列表小数`

list-style-type: decimal;

`列表图片无`

list-style-image: none;

`外观无`

appearance: none;

`外观自动`

appearance: auto;

`列自动`

columns: auto;

`网格流行`

grid-auto-flow: row;

`网格流列`

grid-auto-flow: column;

`网格流密集`

grid-auto-flow: dense;

`网格流行列密集`

grid-auto-flow: row dense;

`网格流列密集`

grid-auto-flow: column dense;

`自动列自动`

grid-auto-columns: auto;

`自动列最小`

grid-auto-columns: min-content;

`自动列最大`

grid-auto-columns: max-content;

`自动列fr`

grid-auto-columns: minmax(0, 1fr);

`自动行自动`

grid-auto-rows: auto;

`自动行最小`

grid-auto-rows: min-content;

`自动行最大`

grid-auto-rows: max-content;

`自动行fr`

grid-auto-rows: minmax(0, 1fr);

`网格列无`

grid-template-columns: none;

`网格列子网格`

grid-template-columns: subgrid;

`网格行无`

grid-template-rows: none;

`网格行子网格`

grid-template-rows: subgrid;

`弹性行`

flex-direction: row;

`弹性行反向`

flex-direction: row-reverse;

`弹性列`

flex-direction: column;

`弹性列反向`

flex-direction: column-reverse;

`弹性换行`

flex-wrap: wrap;

`弹性不换行`

flex-wrap: nowrap;

`弹性换行反向`

flex-wrap: wrap-reverse;

`内容正常`

align-content: normal;

`内容居中`

align-content: center;

`内容起始`

align-content: flex-start;

`内容结束`

align-content: flex-end;

`内容之间`

align-content: space-between;

`内容环绕`

align-content: space-around;

`内容均匀`

align-content: space-evenly;

`内容基线`

align-content: baseline;

`内容拉伸`

align-content: stretch;

`项目居中`

align-items: center;

`项目起始`

align-items: flex-start;

`项目结束`

align-items: flex-end;

`项目基线`

align-items: baseline;

`项目拉伸`

align-items: stretch;

`对齐正常`

justify-content: normal;

`对齐居中`

justify-content: center;

`对齐起始`

justify-content: flex-start;

`对齐结束`

justify-content: flex-end;

`对齐之间`

justify-content: space-between;

`对齐环绕`

justify-content: space-around;

`对齐均匀`

justify-content: space-evenly;

`对齐基线`

justify-content: baseline;

`对齐拉伸`

justify-content: stretch;

`对齐项目正常`

justify-items: normal;

`对齐项目居中`

justify-items: center;

`对齐项目起始`

justify-items: start;

`对齐项目结束`

justify-items: end;

`对齐项目拉伸`

justify-items: stretch;

`自我自动`

place-self: auto;

`自我起始`

place-self: start;

`自我结束`

place-self: end;

`自我居中`

place-self: center;

`自我拉伸`

place-self: stretch;

`自我自动`

align-self: auto;

`自我起始`

align-self: flex-start;

`自我结束`

align-self: flex-end;

`自我居中`

align-self: center;

`自我拉伸`

align-self: stretch;

`自我基线`

align-self: baseline;

`自我对齐自动`

justify-self: auto;

`自我对齐起始`

justify-self: flex-start;

`自我对齐结束`

justify-self: flex-end;

`justify-self-center`

justify-self: center;

`justify-self-stretch`

justify-self: stretch;

`scroll-auto`

scroll-behavior: auto;

`scroll-smooth`

scroll-behavior: smooth;

`text-ellipsis`

text-overflow: ellipsis;

`text-clip`

text-overflow: clip;

`whitespace-normal`

white-space: normal;

`whitespace-nowrap`

white-space: nowrap;

`whitespace-pre`

white-space: pre;

`whitespace-pre-line`

white-space: pre-line;

`whitespace-pre-wrap`

white-space: pre-wrap;

`whitespace-break-spaces`

white-space: break-spaces;

`text-wrap`

text-wrap: wrap;

`text-nowrap`

text-wrap: nowrap;

`text-balance`

text-wrap: balance;

`text-pretty`

text-wrap: pretty;

`break-words`

overflow-wrap: break-word;

`break-all`

word-break: break-all;

`break-keep`

word-break: break-keep;

`via-none`

--tw-gradient-via-stops: initial;

`bg-clip-text`

background-clip: text;

`bg-clip-border`

background-clip: border-box;

`bg-clip-padding`

background-clip: padding-box;

`bg-clip-content`

background-clip: content-box;

`bg-origin-border`

background-origin: border-box;

`bg-origin-padding`

background-origin: padding-box;

`bg-origin-content`

background-origin: content-box;

`mix-blend-plus-darker`

mix-blend-mode: plus-darker;

`mix-blend-plus-lighter`

mix-blend-mode: plus-lighter;

`stroke-none`

stroke: none;

`object-contain`

object-fit: contain;

`object-cover`

object-fit: cover;

`object-fill`

object-fit: fill;

`object-none`

object-fit: none;

`object-scale-down`

object-fit: scale-down;

`object-bottom`

object-position: bottom;

`object-center`

object-position: center;

`object-left`

object-position: left;

`object-left-bottom`

object-position: left bottom;

`object-left-top`

object-position: left top;

`object-right`

object-position: right;

`object-right-bottom`

object-position: right bottom;

`object-right-top`

object-position: right top;

`object-top`

object-position: top;

`text-left`

text-align: left;

`text-center`

text-align: center;

`text-right`

text-align: right;

`text-justify`

text-align: justify;

`text-start`

text-align: start;

`text-end`

text-align: end;

`align-baseline`

vertical-align: baseline;

`align-top`

vertical-align: top;

`align-middle`

vertical-align: middle;

`align-bottom`

vertical-align: bottom;

`align-text-top`

vertical-align: text-top;

`align-text-bottom`

vertical-align: text-bottom;

`align-sub`

vertical-align: sub;

`align-super`

vertical-align: super;

`uppercase`

text-transform: uppercase;

`lowercase`

text-transform: lowercase;

`capitalize`

text-transform: capitalize;

`normal-case`

text-transform: none;

`italic`

font-style: italic;

`not-italic`

font-style: normal;

`underline`

text-decoration-line: underline;

`overline`

text-decoration-line: overline;

`line-through`

text-decoration-line: line-through;

`no-underline`

text-decoration-line: none;

`font-stretch-normal`

font-stretch: normal;

`font-stretch-ultra-condensed`

font-stretch: ultra-condensed;

`font-stretch-extra-condensed`

font-stretch: extra-condensed;

`font-stretch-condensed`

font-stretch: condensed;

`font-stretch-semi-condensed`

font-stretch: semi-condensed;

`font-stretch-semi-expanded`

font-stretch: semi-expanded;

`font-stretch-expanded`

font-stretch: expanded;

`font-stretch-extra-expanded`

font-stretch: extra-expanded;

`font-stretch-ultra-expanded`

font-stretch: ultra-expanded;

`decoration-solid`

text-decoration-style: solid;

`decoration-double`

text-decoration-style: double;

`decoration-dotted`

text-decoration-style: dotted;

`decoration-dashed`

text-decoration-style: dashed;

`decoration-wavy`

text-decoration-style: wavy;

`decoration-auto`

text-decoration-thickness: auto;

`decoration-from-font`

text-decoration-thickness: from-font;

`animate-none`

animation: none;

`will-change-auto`

will-change: auto;

`will-change-scroll`

will-change: scroll-position;

`will-change-contents`

will-change: contents;

`will-change-transform`

will-change: transform;

`contain-none`

contain: none;

`contain-content`

contain: content;

`contain-strict`

contain: strict;

`forced-color-adjust-none`

forced-color-adjust: none;

`forced-color-adjust-auto`

forced-color-adjust: auto;

`normal-nums`

font-variant-numeric: normal;

`underline-offset-auto`

text-underline-offset: auto;

`touch-none`

touch-action: none;

`touch-auto`

touch-action: auto;

`touch-pan-x`

touch-action: pan-x;

`cursor-auto`

cursor: auto;

`cursor-default`

cursor: default;

`select-none`

-webkit-user-select: none;user-select: none;

`select-text`

-webkit-user-select: text;user-select: text;

`rotate-0`

rotate: 0deg;

`rotate-90`

rotate: 90deg;

`border-inherit`

border-color: inherit;

`border-current`

border-color: currentColor;

`border-transparent`

border-color: transparent;

`border-x-black`

border-left-color: rgb(0 0 0); border-right-color: rgb(0 0 0);

`border-black`

border-color: rgb(0 0 0);

`border-white`

border-color: rgb(255 255 255);

`border-slate-50`

border-color: rgb(248 250 252);

`border-slate-100`

border-color: rgb(241 245 249);

`border-slate-200`

border-color: rgb(226 232 240);

`border-slate-300`

border-color: rgb(203 213 225);

`border-slate-400`

border-color: rgb(148 163 184);

`border-slate-500`

border-color: rgb(100 116 139);

`border-slate-600`

border-color: rgb(71 85 105);

`border-slate-700`

border-color: rgb(51 65 85);

`border-slate-800`

border-color: rgb(30 41 59);

`border-slate-900`

border-color: rgb(15 23 42);

`border-slate-950`

border-color: rgb(2 6 23);

`border-gray-50`

border-color: rgb(249 250 251);

`border-gray-100`

border-color: rgb(243 244 246);

`border-gray-200`

border-color: rgb(229 231 235);

`border-gray-300`

border-color: rgb(209 213 219);

`border-gray-400`

border-color: rgb(156 163 175);

`border-gray-500`

border-color: rgb(107 114 128);

`border-gray-600`

border-color: rgb(75 85 99);

`border-gray-700`

border-color: rgb(55 65 81);

`border-gray-800`

border-color: rgb(31 41 55);

`border-gray-900`

border-color: rgb(17 24 39);

`border-gray-950`

border-color: rgb(3 7 18);

`border-zinc-50`

border-color: rgb(250 250 250);

`border-zinc-100`

border-color: rgb(244 244 245);

`border-zinc-200`

border-color: rgb(228 228 231);

`border-zinc-300`

border-color: rgb(212 212 216);

`border-zinc-400`

border-color: rgb(161 161 170);

`border-zinc-500`

border-color: rgb(113 113 122);

`border-zinc-600`

border-color: rgb(82 82 91);

`border-zinc-700`

border-color: rgb(63 63 70);

`border-zinc-800`

border-color: rgb(39 39 42);

`border-zinc-900`

border-color: rgb(24 24 27);

`border-zinc-950`

border-color: rgb(9 9 11);

`border-neutral-50`

border-color: rgb(250 250 250);

`border-neutral-100`

border-color: rgb(245 245 245);

`border-neutral-200`

border-color: rgb(229 229 229);

`border-neutral-300`

border-color: rgb(212 212 212);

`border-neutral-400`

border-color: rgb(163 163 163);

`border-neutral-500`

border-color: rgb(115 115 115);

`border-neutral-600`

border-color: rgb(82 82 82);

`border-neutral-700`

border-color: rgb(64 64 64);

`border-neutral-800`

border-color: rgb(38 38 38);

`border-neutral-900`

border-color: rgb(23 23 23);

`border-neutral-950`

border-color: rgb(10 10 10);

`border-stone-50`

border-color: rgb(250 250 249);

`border-stone-100`

border-color: rgb(245 245 244);

`border-stone-200`

border-color: rgb(231 229 228);

`border-stone-300`

border-color: rgb(214 211 209);

`border-stone-400`

border-color: rgb(168 162 158);

`border-stone-500`

border-color: rgb(120 113 108);

`border-stone-600`

border-color: rgb(87 83 78);

`border-stone-700`

border-color: rgb(68 64 60);

`border-stone-800`

border-color: rgb(41 37 36);

`border-stone-900`

border-color: rgb(28 25 23);

`border-stone-950`

border-color: rgb(12 10 9);

`border-red-50`

border-color: rgb(254 242 242);

`border-red-100`

border-color: rgb(254 226 226);

`border-red-200`

border-color: rgb(254 202 202);

`border-red-300`

border-color: rgb(252 165 165);

`border-red-400`

border-color: rgb(248 113 113);

`border-red-500`

border-color: rgb(239 68 68);

`border-red-600`

border-color: rgb(220 38 38);

`border-red-700`

border-color: rgb(185 28 28);

`border-red-800`

border-color: rgb(153 27 27);

`border-red-900`

border-color: rgb(127 29 29);

`border-red-950`

border-color: rgb(69 10 10);

`border-orange-50`

border-color: rgb(255 247 237);

`border-orange-100`

border-color: rgb(255 237 213);

`border-orange-200`

border-color: rgb(254 215 170);

`border-orange-300`

border-color: rgb(253 186 116);

`border-orange-400`

border-color: rgb(251 146 60);

`border-orange-500`

border-color: rgb(249 115 22);

`border-orange-600`

border-color: rgb(234 88 12);

`border-orange-700`

border-color: rgb(194 65 12);

`border-orange-800`

border-color: rgb(154 52 18);

`border-orange-900`

border-color: rgb(124 45 18);

`边框-橙色-950`

border-color: rgb(67 20 7);

`边框-琥珀色-50`

border-color: rgb(255 251 235);

`边框-琥珀色-100`

border-color: rgb(254 243 199);

`边框-琥珀色-200`

border-color: rgb(253 230 138);

`边框-琥珀色-300`

border-color: rgb(252 211 77);

`边框-琥珀色-400`

border-color: rgb(251 191 36);

`边框-琥珀色-500`

border-color: rgb(245 158 11);

`边框-琥珀色-600`

border-color: rgb(217 119 6);

`边框-琥珀色-700`

border-color: rgb(180 83 9);

`边框-琥珀色-800`

border-color: rgb(146 64 14);

`边框-琥珀色-900`

border-color: rgb(120 53 15);

`边框-琥珀色-950`

border-color: rgb(69 26 3);

`边框-黄色-50`

border-color: rgb(254 252 232);

`边框-黄色-100`

border-color: rgb(254 249 195);

`边框-黄色-200`

border-color: rgb(254 240 138);

`边框-黄色-300`

border-color: rgb(253 224 71);

`边框-黄色-400`

border-color: rgb(250 204 21);

`边框-黄色-500`

border-color: rgb(234 179 8);

`边框-黄色-600`

border-color: rgb(202 138 4);

`边框-黄色-700`

border-color: rgb(161 98 7);

`边框-黄色-800`

border-color: rgb(133 77 14);

`边框-黄色-900`

border-color: rgb(113 63 18);

`边框-黄色-950`

border-color: rgb(66 32 6);

`边框-草绿色-50`

border-color: rgb(247 254 231);

`边框-草绿色-100`

border-color: rgb(236 252 203);

`边框-草绿色-200`

border-color: rgb(217 249 157);

`边框-草绿色-300`

border-color: rgb(190 242 100);

`边框-草绿色-400`

border-color: rgb(163 230 53);

`边框-草绿色-500`

border-color: rgb(132 204 22);

`边框-草绿色-600`

border-color: rgb(101 163 13);

`边框-草绿色-700`

border-color: rgb(77 124 15);

`边框-草绿色-800`

border-color: rgb(63 98 18);

`边框-草绿色-900`

border-color: rgb(54 83 20);

`边框-草绿色-950`

border-color: rgb(26 46 5);

`边框-绿色-50`

border-color: rgb(240 253 244);

`边框-绿色-100`

border-color: rgb(220 252 231);

`边框-绿色-200`

border-color: rgb(187 247 208);

`边框-绿色-300`

border-color: rgb(134 239 172);

`边框-绿色-400`

border-color: rgb(74 222 128);

`边框-绿色-500`

border-color: rgb(34 197 94);

`边框-绿色-600`

border-color: rgb(22 163 74);

`边框-绿色-700`

border-color: rgb(21 128 61);

`边框-绿色-800`

border-color: rgb(22 101 52);

`边框-绿色-900`

border-color: rgb(20 83 45);

`边框-绿色-950`

border-color: rgb(5 46 22);

`边框-翡翠绿-50`

border-color: rgb(236 253 245);

`边框-翡翠绿-100`

border-color: rgb(209 250 229);

`边框-翡翠绿-200`

border-color: rgb(167 243 208);

`边框-翡翠绿-300`

border-color: rgb(110 231 183);

`边框-翡翠绿-400`

border-color: rgb(52 211 153);

`边框-翡翠绿-500`

border-color: rgb(16 185 129);

`边框-翡翠绿-600`

border-color: rgb(5 150 105);

`边框-翡翠绿-700`

border-color: rgb(4 120 87);

`边框-翡翠绿-800`

border-color: rgb(6 95 70);

`边框-翡翠绿-900`

border-color: rgb(6 78 59);

`边框-翡翠绿-950`

border-color: rgb(2 44 34);

`边框-蓝绿色-50`

border-color: rgb(240 253 250);

`边框-蓝绿色-100`

border-color: rgb(204 251 241);

`边框-蓝绿色-200`

border-color: rgb(153 246 228);

`边框-蓝绿色-300`

border-color: rgb(94 234 212);

`边框-蓝绿色-400`

border-color: rgb(45 212 191);

`边框-蓝绿色-500`

border-color: rgb(20 184 166);

`边框-蓝绿色-600`

border-color: rgb(13 148 136);

`边框-蓝绿色-700`

border-color: rgb(15 118 110);

`边框-蓝绿色-800`

border-color: rgb(17 94 89);

`边框-蓝绿色-900`

border-color: rgb(19 78 74);

`边框-蓝绿色-950`

border-color: rgb(4 47 46);

`边框-青色-50`

border-color: rgb(236 254 255);

`边框-青色-100`

border-color: rgb(207 250 254);

`边框-青色-200`

border-color: rgb(165 243 252);

`边框-青色-300`

border-color: rgb(103 232 249);

`边框-青色-400`

border-color: rgb(34 211 238);

`边框-青色-500`

border-color: rgb(6 182 212);

`边框-青色-600`

border-color: rgb(8 145 178);

`边框-青色-700`

border-color: rgb(14 116 144);

`边框-青色-800`

border-color: rgb(21 94 117);

`边框-青色-900`

border-color: rgb(22 78 99);

`边框-青色-950`

border-color: rgb(8 51 68);

`边框-天蓝色-50`

border-color: rgb(240 249 255);

`边框-天蓝色-100`

border-color: rgb(224 242 254);

`边框-天蓝色-200`

border-color: rgb(186 230 253);

`边框-天蓝色-300`

border-color: rgb(125 211 252);

`边框-天蓝色-400`

border-color: rgb(56 189 248);

`边框-天蓝色-500`

border-color: rgb(14 165 233);

`边框-天蓝色-600`

border-color: rgb(2 132 199);

`边框-天蓝色-700`

border-color: rgb(3 105 161);

`边框-天蓝色-800`

border-color: rgb(7 89 133);

`边框-天蓝色-900`

border-color: rgb(12 74 110);

`边框-天蓝色-950`

border-color: rgb(8 47 73);

`边框-蓝色-50`

border-color: rgb(239 246 255);

`边框-蓝色-100`

border-color: rgb(219 234 254);

`边框-蓝色-200`

border-color: rgb(191 219 254);

`边框-蓝色-300`

border-color: rgb(147 197 253);

`边框-蓝色-400`

border-color: rgb(96 165 250);

`边框-蓝色-500`

border-color: rgb(59 130 246);

`边框-蓝色-600`

border-color: rgb(37 99 235);

`边框-蓝色-700`

border-color: rgb(29 78 216);

`边框-蓝色-800`

border-color: rgb(30 64 175);

`边框-蓝色-900`

border-color: rgb(30 58 138);

`边框-蓝色-950`

border-color: rgb(23 37 84);

`边框-靛蓝色-50`

border-color: rgb(238 242 255);

`边框-靛蓝色-100`

border-color: rgb(224 231 255);

`边框-靛蓝色-200`

border-color: rgb(199 210 254);

`边框-靛蓝色-300`

border-color: rgb(165 180 252);

`边框-靛蓝色-400`

border-color: rgb(129 140 248);

`边框-靛蓝色-500`

border-color: rgb(99 102 241);

`边框-靛蓝色-600`

border-color: rgb(79 70 229);

`边框-靛蓝色-700`

border-color: rgb(67 56 202);

`边框-靛蓝色-800`

border-color: rgb(55 48 163);

`边框-靛蓝色-900`

border-color: rgb(49 46 129);

`边框-靛蓝色-950`

border-color: rgb(30 27 75);

`边框-紫色-50`

border-color: rgb(245 243 255);

`边框-紫色-100`

border-color: rgb(237 233 254);

`边框-紫色-200`

border-color: rgb(221 214 254);

`边框-紫色-300`

border-color: rgb(196 181 253);

`边框-紫色-400`

border-color: rgb(167 139 250);

`边框-紫色-500`

border-color: rgb(139 92 246);

`边框-紫色-600`

border-color: rgb(124 58 237);

`边框-紫色-700`

border-color: rgb(109 40 217);

`边框-紫色-800`

border-color: rgb(91 33 182);

`边框-紫色-900`

border-color: rgb(76 29 149);

`边框-紫色-950`

border-color: rgb(46 16 101);

`边框-紫色-50`

border-color: rgb(250 245 255);

`边框-紫色-100`

border-color: rgb(243 232 255);

`边框-紫色-200`

border-color: rgb(233 213 255);

`边框-紫色-300`

border-color: rgb(216 180 254);

`边框-紫色-400`

border-color: rgb(192 132 252);

`边框-紫色-500`

border-color: rgb(168 85 247);

`边框-紫色-600`

border-color: rgb(147 51 234);

`边框-紫色-700`

border-color: rgb(126 34 206);

`边框-紫色-800`

border-color: rgb(107 33 168);

`边框-紫色-900`

border-color: rgb(88 28 135);

`边框-紫色-950`

border-color: rgb(59 7 100);

`边框-洋红色-50`

border-color: rgb(253 244 255);

`边框-洋红色-100`

border-color: rgb(250 232 255);

`边框-洋红色-200`

border-color: rgb(245 208 254);

`边框-洋红色-300`

border-color: rgb(240 171 252);

`边框-洋红色-400`

border-color: rgb(232 121 249);

`边框-洋红色-500`

border-color: rgb(217 70 239);

`边框-洋红色-600`

border-color: rgb(192 38 211);

`边框-洋红色-700`

border-color: rgb(162 28 175);

`边框-洋红色-800`

border-color: rgb(134 25 143);

`边框-洋红色-900`

border-color: rgb(112 26 117);

`边框-洋红色-950`

border-color: rgb(74 4 78);

`边框-粉红色-50`

border-color: rgb(253 242 248);

`边框-粉红色-100`

border-color: rgb(252 231 243);

`边框-粉红色-200`

border-color: rgb(251 207 232);

`边框-粉红色-300`

border-color: rgb(249 168 212);

`边框-粉红色-400`

border-color: rgb(244 114 182);

`边框-粉红色-500`

border-color: rgb(236 72 153);

`边框-粉红色-600`

border-color: rgb(219 39 119);

`边框-粉红色-700`

border-color: rgb(190 24 93);

`边框-粉红色-800`

border-color: rgb(157 23 77);

`边框-粉红色-900`

border-color: rgb(131 24 67);

`边框-粉红色-950`

border-color: rgb(80 7 36);

`边框-玫瑰红-50`

border-color: rgb(255 241 242);

`边框-玫瑰红-100`

border-color: rgb(255 228 230);

`边框-玫瑰红-200`

border-color: rgb(254 205 211);

`边框-玫瑰红-300`

border-color: rgb(253 164 175);

`边框-玫瑰红-400`

border-color: rgb(251 113 133);

`边框-玫瑰红-500`

border-color: rgb(244 63 94);

`边框-玫瑰红-600`

border-color: rgb(225 29 72);

`边框-玫瑰红-700`

border-color: rgb(190 18 60);

`边框-玫瑰红-800`

border-color: rgb(159 18 57);

`边框-玫瑰红-900`

border-color: rgb(136 19 55);

`边框-玫瑰红-950`

border-color: rgb(76 5 25);

`宽度-0`

width: 0px;

`宽度-像素`

width: 1px;

`宽度-0.5`

width: 0.125rem;

`宽度-1`

width: 0.25rem;

`宽度-1.5`

width: 0.375rem;

`宽度-2`

width: 0.5rem;

`宽度-2.5`

width: 0.625rem;

`宽度-3`

width: 0.75rem;

`宽度-3.5`

width: 0.875rem;

`宽度-4`

width: 1rem;

`宽度-5`

width: 1.25rem;

`宽度-6`

width: 1.5rem;

`宽度-7`

width: 1.75rem;

`宽度-8`

width: 2rem;

`宽度-9`

width: 2.25rem;

`宽度-10`

width: 2.5rem;

`宽度-11`

width: 2.75rem;

`宽度-12`

width: 3rem;

`宽度-14`

width: 3.5rem;

`宽度-16`

width: 4rem;

`宽度-20`

width: 5rem;

`宽度-24`

width: 6rem;

`宽度-28`

width: 7rem;

`宽度-32`

width: 8rem;

`宽度-36`

width: 9rem;

`宽度-40`

width: 10rem;

`宽度-44`

width: 11rem;

`宽度-48`

width: 12rem;

`宽度-52`

width: 13rem;

`宽度-56`

width: 14rem;

`宽-60`

width: 15rem;

`宽-64`

width: 16rem;

`宽-72`

width: 18rem;

`宽-80`

width: 20rem;

`宽-96`

width: 24rem;

`宽-自动`

width: auto;

`宽-1/2`

width: 50%;

`宽-1/3`

width: 33.333333%;

`宽-2/3`

width: 66.666667%;

`宽-1/4`

width: 25%;

`宽-2/4`

width: 50%;

`宽-3/4`

width: 75%;

`宽-1/5`

width: 20%;

`宽-2/5`

width: 40%;

`宽-3/5`

width: 60%;

`宽-4/5`

width: 80%;

`宽-1/6`

width: 16.666667%;

`宽-2/6`

width: 33.333333%;

`宽-3/6`

width: 50%;

`宽-4/6`

width: 66.666667%;

`宽-5/6`

width: 83.333333%;

`宽-1/12`

width: 8.333333%;

`宽-2/12`

width: 16.666667%;

`宽-3/12`

width: 25%;

`宽-4/12`

width: 33.333333%;

`宽-5/12`

width: 41.666667%;

`宽-6/12`

width: 50%;

`宽-7/12`

width: 58.333333%;

`宽-8/12`

width: 66.666667%;

`宽-9/12`

width: 75%;

`宽-10/12`

width: 83.333333%;

`宽-11/12`

width: 91.666667%;

`宽-全`

width: 100%;

`宽-屏幕`

width: 100vw;

`宽-可视宽度`

width: 100svw;

`宽-水平可视宽度`

width: 100lvw;

`宽-垂直可视宽度`

width: 100dvw;

`宽-最小`

width: min-content;

`宽-最大`

width: max-content;

`宽-适应`

width: fit-content;

`高-0`

height: 0px;

`高-像素`

height: 1px;

`高-0.5`

height: 0.125rem;

`高-1`

height: 0.25rem;

`高-1.5`

height: 0.375rem;

`高-2`

height: 0.5rem;

`高-2.5`

height: 0.625rem;

`高-3`

height: 0.75rem;

`高-3.5`

height: 0.875rem;

`高-4`

height: 1rem;

`高-5`

height: 1.25rem;

`高-6`

height: 1.5rem;

`高-7`

height: 1.75rem;

`高-8`

height: 2rem;

`高-9`

height: 2.25rem;

`高-10`

height: 2.5rem;

`高-11`

height: 2.75rem;

`高-12`

height: 3rem;

`高-14`

height: 3.5rem;

`高-16`

height: 4rem;

`高-20`

height: 5rem;

`高-24`

height: 6rem;

`高-28`

height: 7rem;

`高-32`

height: 8rem;

`高-36`

height: 9rem;

`高-40`

height: 10rem;

`高-44`

height: 11rem;

`高-48`

height: 12rem;

`高-52`

height: 13rem;

`高-56`

height: 14rem;

`高-60`

height: 15rem;

`高-64`

height: 16rem;

`高-72`

height: 18rem;

`高-80`

height: 20rem;

`高-96`

height: 24rem;

`高-自动`

height: auto;

`高-1/2`

height: 50%;

`高-1/3`

height: 33.333333%;

`高-2/3`

height: 66.666667%;

`高-1/4`

height: 25%;

`高-2/4`

height: 50%;

`高-3/4`

height: 75%;

`高-1/5`

height: 20%;

`高-2/5`

height: 40%;

`高-3/5`

height: 60%;

`高-4/5`

height: 80%;

`高-1/6`

height: 16.666667%;

`高-2/6`

height: 33.333333%;

`高-3/6`

height: 50%;

`高-4/6`

height: 66.666667%;

`高-5/6`

height: 83.333333%;

`高-全`

height: 100%;

`高-屏幕`

height: 100vh;

`高-可视高度`

height: 100svh;

`高-水平可视高度`

height: 100lvh;

`高-垂直可视高度`

height: 100dvh;

`高-最小`

height: min-content;

`高-最大`

height: max-content;

`高-适应`

height: fit-content;

`最小宽-0`

min-width: 0px;

`最小宽-1`

min-width: 0.25rem;

`最小宽-2`

min-width: 0.5rem;

`最小宽-3`

min-width: 0.75rem;

`最小宽-4`

min-width: 1rem;

`最小宽-5`

min-width: 1.25rem;

`最小宽-6`

min-width: 1.5rem;

`最小宽-7`

min-width: 1.75rem;

`最小宽-8`

min-width: 2rem;

`最小宽-9`

min-width: 2.25rem;

`最小宽-10`

min-width: 2.5rem;

`最小宽-11`

min-width: 2.75rem;

`最小宽-12`

min-width: 3rem;

`最小宽-14`

min-width: 3.5rem;

`最小宽-16`

min-width: 4rem;

`最小宽-20`

min-width: 5rem;

`最小宽-24`

min-width: 6rem;

`最小宽-28`

min-width: 7rem;

`最小宽-32`

min-width: 8rem;

`最小宽-36`

min-width: 9rem;

`最小宽-40`

min-width: 10rem;

`最小宽-44`

min-width: 11rem;

`最小宽-48`

min-width: 12rem;

`最小宽-52`

min-width: 13rem;

`最小宽-56`

min-width: 14rem;

`最小宽-60`

min-width: 15rem;

`最小宽-64`

min-width: 16rem;

`最小宽-72`

min-width: 18rem;

`最小宽-80`

min-width: 20rem;

`最小宽-96`

min-width: 24rem;

`最小宽-像素`

min-width: 1px;

`最小宽-0.5`

min-width: 0.125rem;

`最小宽-1.5`

min-width: 0.375rem;

`最小宽-2.5`

min-width: 0.625rem;

`最小宽-3.5`

min-width: 0.875rem;

`最小宽-全`

min-width: 100%;

`最小宽-最小`

min-width: min-content;

`最小宽-最大`

min-width: max-content;

`最小宽-适应`

min-width: fit-content;

`最大宽-0`

max-width: 0px;

`最大宽-1`

max-width: 0.25rem;

`最大宽-2`

max-width: 0.5rem;

`最大宽-3`

max-width: 0.75rem;

`最大宽-4`

max-width: 1rem;

`最大宽-5`

max-width: 1.25rem;

`最大宽-6`

max-width: 1.5rem;

`最大宽-7`

max-width: 1.75rem;

`最大宽-8`

max-width: 2rem;

`最大宽-9`

max-width: 2.25rem;

`最大宽-10`

max-width: 2.5rem;

`最大宽-11`

max-width: 2.75rem;

`最大宽-12`

max-width: 3rem;

`最大宽-14`

max-width: 3.5rem;

`最大宽-16`

max-width: 4rem;

`最大宽-20`

max-width: 5rem;

`最大宽-24`

max-width: 6rem;

`最大宽-28`

max-width: 7rem;

`最大宽-32`

max-width: 8rem;

`最大宽-36`

max-width: 9rem;

`最大宽-40`

max-width: 10rem;

`最大宽-44`

max-width: 11rem;

`最大宽-48`

max-width: 12rem;

`最大宽-52`

max-width: 13rem;

`最大宽-56`

max-width: 14rem;

`最大宽-60`

max-width: 15rem;

`最大宽-64`

max-width: 16rem;

`最大宽-72`

max-width: 18rem;

`最大宽-80`

max-width: 20rem;

`最大宽-96`

max-width: 24rem;

`最大宽-像素`

max-width: 1px;

`最大宽-0.5`

max-width: 0.125rem;

`最大宽-1.5`

max-width: 0.375rem;

`最大宽-2.5`

max-width: 0.625rem;

`最大宽-3.5`

max-width: 0.875rem;

`最大宽-全`

max-width: 100%;

`最大宽-最大`

max-width: max-content;

`最大宽-最小`

max-width: min-content;

`最大宽-适应`

max-width: fit-content;

`尺寸-0`

width: 0px; height: 0px;

`尺寸-像素`

width: 1px; height: 1px;

`尺寸-0.5`

width: 0.125rem; height: 0.125rem;

`尺寸-1`

width: 0.25rem; height: 0.25rem;

`尺寸-1.5`

width: 0.375rem; height: 0.375rem;

`尺寸-2`

width: 0.5rem; height: 0.5rem;

`尺寸-2.5`

width: 0.625rem; height: 0.625rem;

`尺寸-3`

width: 0.75rem; height: 0.75rem;

`尺寸-3.5`

width: 0.875rem; height: 0.875rem;

`尺寸-4`

width: 1rem; height: 1rem;

`尺寸-5`

width: 1.25rem; height: 1.25rem;

`尺寸-6`

width: 1.5rem; height: 1.5rem;

`尺寸-7`

width: 1.75rem; height: 1.75rem;

`尺寸-8`

width: 2rem; height: 2rem;

`尺寸-9`

width: 2.25rem; height: 2.25rem;

`尺寸-10`

width: 2.5rem; height: 2.5rem;

`尺寸-11`

width: 2.75rem; height: 2.75rem;

`尺寸-12`

width: 3rem; height: 3rem;

`尺寸-14`

width: 3.5rem; height: 3.5rem;

`尺寸-16`

width: 4rem; height: 4rem;

`尺寸-20`

width: 5rem; height: 5rem;

`尺寸-24`

width: 6rem; height: 6rem;

`尺寸-28`

width: 7rem; height: 7rem;

`尺寸-32`

width: 8rem; height: 8rem;

`尺寸-36`

width: 9rem; height: 9rem;

`尺寸-40`

width: 10rem; height: 10rem;

`尺寸-44`

width: 11rem; height: 11rem;

`尺寸-48`

width: 12rem; height: 12rem;

`尺寸-52`

width: 13rem; height: 13rem;

`尺寸-56`

width: 14rem; height: 14rem;

`尺寸-60`

width: 15rem; height: 15rem;

`尺寸-64`

width: 16rem; height: 16rem;

`尺寸-72`

width: 18rem; height: 18rem;

`尺寸-80`

width: 20rem; height: 20rem;

`尺寸-96`

width: 24rem; height: 24rem;

`尺寸-自动`

width: auto; height: auto;

`尺寸-1/2`

width: 50%; height: 50%;

`尺寸-1/3`

width: 33.333333%; height: 33.333333%;

`尺寸-2/3`

width: 66.666667%; height: 66.666667%;

`尺寸-1/4`

width: 25%; height: 25%;

`尺寸-2/4`

width: 50%; height: 50%;

`尺寸-3/4`

width: 75%; height: 75%;

`尺寸-1/5`

width: 20%; height: 20%;

`尺寸-2/5`

width: 40%; height: 40%;

`尺寸-3/5`

width: 60%; height: 60%;

`尺寸-4/5`

width: 80%; height: 80%;

`尺寸-1/6`

width: 16.666667%; height: 16.666667%;

`尺寸-2/6`

width: 33.333333%; height: 33.333333%;

`尺寸-3/6`

width: 50%; height: 50%;

`尺寸-4/6`

width: 66.666667%; height: 66.666667%;

`尺寸-5/6`

width: 83.333333%; height: 83.333333%;

`尺寸-1/12`

width: 8.333333%; height: 8.333333%;

`尺寸-2/12`

width: 16.666667%; height: 16.666667%;

`尺寸-3/12`

width: 25%; height: 25%;

`尺寸-4/12`

width: 33.333333%; height: 33.333333%;

`尺寸-5/12`

width: 41.666667%; height: 41.666667%;

`尺寸-6/12`

width: 50%; height: 50%;

`尺寸-7/12`

width: 58.333333%; height: 58.333333%;

`尺寸-8/12`

width: 66.666667%; height: 66.666667%;

`尺寸-9/12`

width: 75%; height: 75%;

`尺寸-10/12`

width: 83.333333%; height: 83.333333%;

`尺寸-11/12`

width: 91.666667%; height: 91.666667%;

`尺寸-全`

width: 100%; height: 100%;

`尺寸-最小`

width: min-content; height: min-content;

`最大尺寸`

width: max-content; height: max-content;

`合适尺寸`

width: fit-content; height: fit-content;

颜色

查看颜色

`继承`

inherit

`当前`

currentColor

`透明`

transparent

`黑色`

rgb(0 0 0)

`白色`

rgb(255 255 255)

`板岩-50`

rgb(248 250 252)

`板岩-100`

rgb(241 245 249)

`板岩-200`

rgb(226 232 240)

`板岩-300`

rgb(203 213 225)

`板岩-400`

rgb(148 163 184)

`板岩-500`

rgb(100 116 139)

`板岩-600`

rgb(71 85 105)

`板岩-700`

rgb(51 65 85)

`板岩-800`

rgb(30 41 59)

`板岩-900`

rgb(15 23 42)

`板岩-950`

rgb(2 6 23)

`灰色-50`

rgb(249 250 251)

`灰色-100`

rgb(243 244 246)

`灰色-200`

rgb(229 231 235)

`灰色-300`

rgb(209 213 219)

`灰色-400`

rgb(156 163 175)

`灰色-500`

rgb(107 114 128)

`灰色-600`

rgb(75 85 99)

`灰色-700`

rgb(55 65 81)

`灰色-800`

rgb(31 41 55)

`灰色-900`

rgb(17 24 39)

`灰色-950`

rgb(3 7 18)

`锌-50`

rgb(250 250 250)

`锌-100`

rgb(244 244 245)

`锌-200`

rgb(228 228 231)

`锌-300`

rgb(212 212 216)

`锌-400`

rgb(161 161 170)

`锌-500`

rgb(113 113 122)

`锌-600`

rgb(82 82 91)

`锌-700`

rgb(63 63 70)

`锌-800`

rgb(39 39 42)

`锌-900`

rgb(24 24 27)

`锌-950`

rgb(9 9 11)

`中性-50`

rgb(250 250 250)

`中性-100`

rgb(245 245 245)

`中性-200`

rgb(229 229 229)

`中性-300`

rgb(212 212 212)

`中性-400`

rgb(163 163 163)

`中性-500`

rgb(115 115 115)

`中性-600`

rgb(82 82 82)

`中性-700`

rgb(64 64 64)

`中性-800`

rgb(38 38 38)

`中性-900`

rgb(23 23 23)

`中性-950`

rgb(10 10 10)

`岩石-50`

rgb(250 250 249)

`岩石-100`

rgb(245 245 244)

`岩石-200`

rgb(231 229 228)

`岩石-300`

rgb(214 211 209)

`岩石-400`

rgb(168 162 158)

`岩石-500`

rgb(120 113 108)

`岩石-600`

rgb(87 83 78)

`岩石-700`

rgb(68 64 60)

`岩石-800`

rgb(41 37 36)

`岩石-900`

rgb(28 25 23)

`岩石-950`

rgb(12 10 9)

`红色-50`

rgb(254 242 242)

`红色-100`

rgb(254 226 226)

`红色-200`

rgb(254 202 202)

`红色-300`

rgb(252 165 165)

`红色-400`

rgb(248 113 113)

`红色-500`

rgb(239 68 68)

`红色-600`

rgb(220 38 38)

`红色-700`

rgb(185 28 28)

`红色-800`

rgb(153 27 27)

`红色-900`

rgb(127 29 29)

`红色-950`

rgb(69 10 10)

`橙色-50`

rgb(255 247 237)

`橙色-100`

rgb(255 237 213)

`橙色-200`

rgb(254 215 170)

`橙色-300`

rgb(253 186 116)

`橙色-400`

rgb(251 146 60)

`橙色-500`

rgb(249 115 22)

`橙色-600`

rgb(234 88 12)

`橙色-700`

rgb(194 65 12)

`橙色-800`

rgb(154 52 18)

`橙色-900`

rgb(124 45 18)

`橙色-950`

rgb(67 20 7)

`琥珀-50`

rgb(255 251 235)

`琥珀-100`

rgb(254 243 199)

`琥珀-200`

rgb(253 230 138)

`琥珀-300`

rgb(252 211 77)

`琥珀-400`

rgb(251 191 36)

`琥珀-500`

rgb(245 158 11)

`琥珀-600`

rgb(217 119 6)

`琥珀-700`

rgb(180 83 9)

`琥珀-800`

rgb(146 64 14)

`琥珀-900`

rgb(120 53 15)

`琥珀-950`

rgb(69 26 3)

`黄色-50`

rgb(254 252 232)

`黄色-100`

rgb(254 249 195)

`黄色-200`

rgb(254 240 138)

`黄色-300`

rgb(253 224 71)

`黄色-400`

rgb(250 204 21)

`黄色-500`

rgb(234 179 8)

`黄色-600`

rgb(202 138 4)

`黄色-700`

rgb(161 98 7)

`黄色-800`

rgb(133 77 14)

`黄色-900`

rgb(113 63 18)

`黄色-950`

rgb(66 32 6)

`青柠-50`

rgb(247 254 231)

`青柠-100`

rgb(236 252 203)

`青柠-200`

rgb(217 249 157)

`青柠-300`

rgb(190 242 100)

`青柠-400`

rgb(163 230 53)

`青柠-500`

rgb(132 204 22)

`青柠-600`

rgb(101 163 13)

`青柠-700`

rgb(77 124 15)

`青柠-800`

rgb(63 98 18)

`青柠-900`

rgb(54 83 20)

`青柠-950`

rgb(26 46 5)

`绿色-50`

rgb(240 253 244)

`绿色-100`

rgb(220 252 231)

`绿色-200`

rgb(187 247 208)

`绿色-300`

rgb(134 239 172)

`绿色-400`

rgb(74 222 128)

`绿色-500`

rgb(34 197 94)

`绿色-600`

rgb(22 163 74)

`绿色-700`

rgb(21 128 61)

`绿色-800`

rgb(22 101 52)

`绿色-900`

rgb(20 83 45)

`绿色-950`

rgb(5 46 22)

`翡翠-50`

rgb(236 253 245)

`翡翠-100`

rgb(209 250 229)

`翡翠-200`

rgb(167 243 208)

`翡翠-300`

rgb(110 231 183)

`翡翠-400`

rgb(52 211 153)

`翡翠-500`

rgb(16 185 129)

`翡翠-600`

rgb(5 150 105)

`翡翠-700`

rgb(4 120 87)

`翡翠-800`

rgb(6 95 70)

`翡翠-900`

rgb(6 78 59)

`翡翠-950`

rgb(2 44 34)

`水蓝-50`

rgb(240 253 250)

`水蓝-100`

rgb(204 251 241)

`水蓝-200`

rgb(153 246 228)

`水蓝-300`

rgb(94 234 212)

`水蓝-400`

rgb(45 212 191)

`水蓝-500`

rgb(20 184 166)

`水蓝-600`

rgb(13 148 136)

`水蓝-700`

rgb(15 118 110)

`水蓝-800`

rgb(17 94 89)

`水蓝-900`

rgb(19 78 74)

`水蓝-950`

rgb(4 47 46)

`青色-50`

rgb(236 254 255)

`青色-100`

rgb(207 250 254)

`青色-200`

rgb(165 243 252)

`青色-300`

rgb(103 232 249)

`青色-400`

rgb(34 211 238)

`青色-500`

rgb(6 182 212)

`青色-600`

rgb(8 145 178)

`青色-700`

rgb(14 116 144)

`青色-800`

rgb(21 94 117)

`青色-900`

rgb(22 78 99)

`青色-950`

rgb(8 51 68)

`天空-50`

rgb(240 249 255)

`天空-100`

rgb(224 242 254)

`天空-200`

rgb(186 230 253)

`天空-300`

rgb(125 211 252)

`天空-400`

rgb(56 189 248)

`天空-500`

rgb(14 165 233)

`天空-600`

rgb(2 132 199)

`天空-700`

rgb(3 105 161)

`天空-800`

rgb(7 89 133)

`天空-900`

rgb(12 74 110)

`天空-950`

rgb(8 47 73)

`蓝色-50`

rgb(239 246 255)

`蓝色-100`

rgb(219 234 254)

`蓝色-200`

rgb(191 219 254)

`蓝色-300`

rgb(147 197 253)

`蓝色-400`

rgb(96 165 250)

`蓝色-500`

rgb(59 130 246)

`蓝色-600`

rgb(37 99 235)

`蓝色-700`

rgb(29 78 216)

`蓝色-800`

rgb(30 64 175)

`蓝色-900`

rgb(30 58 138)

`蓝色-950`

rgb(23 37 84)

`靛蓝-50`

rgb(238 242 255)

`靛蓝-100`

rgb(224 231 255)

`靛蓝-200`

rgb(199 210 254)

`靛蓝-300`

rgb(165 180 252)

`靛蓝-400`

rgb(129 140 248)

`靛蓝-500`

rgb(99 102 241)

`靛蓝-600`

rgb(79 70 229)

`靛蓝-700`

rgb(67 56 202)

`靛蓝-800`

rgb(55 48 163)

`靛蓝-900`

rgb(49 46 129)

`靛蓝-950`

rgb(30 27 75)

`紫色-50`

rgb(245 243 255)

`紫色-100`

rgb(237 233 254)

`紫色-200`

rgb(221 214 254)

`紫色-300`

rgb(196 181 253)

`紫色-400`

rgb(167 139 250)

`紫色-500`

rgb(139 92 246)

`紫色-600`

rgb(124 58 237)

`紫色-700`

rgb(109 40 217)

`紫色-800`

rgb(91 33 182)

`紫色-900`

rgb(76 29 149)

`紫色-950`

rgb(46 16 101)

`紫色-50`

rgb(250 245 255)

`紫色-100`

rgb(243 232 255)

`紫色-200`

rgb(233 213 255)

`紫色-300`

rgb(216 180 254)

`紫色-400`

rgb(192 132 252)

`紫色-500`

rgb(168 85 247)

`紫色-600`

rgb(147 51 234)

`紫色-700`

rgb(126 34 206)

`紫色-800`

rgb(107 33 168)

`紫色-900`

rgb(88 28 135)

`紫色-950`

rgb(59 7 100)

`品红色-50`

rgb(253 244 255)

`品红色-100`

rgb(250 232 255)

`品红色-200`

rgb(245 208 254)

`品红色-300`

rgb(240 171 252)

`品红色-400`

rgb(232 121 249)

`品红色-500`

rgb(217 70 239)

`品红色-600`

rgb(192 38 211)

`品红色-700`

rgb(162 28 175)

`品红色-800`

rgb(134 25 143)

`品红色-900`

rgb(112 26 117)

`品红色-950`

rgb(74 4 78)

`粉红色-50`

rgb(253 242 248)

`粉红色-100`

rgb(252 231 243)

`粉红色-200`

rgb(251 207 232)

`粉红色-300`

rgb(249 168 212)

`粉红色-400`

rgb(244 114 182)

`粉红色-500`

rgb(236 72 153)

`粉红色-600`

rgb(219 39 119)

`粉红色-700`

rgb(190 24 93)

`粉红色-800`

rgb(157 23 77)

`粉红色-900`

rgb(131 24 67)

`粉红色-950`

rgb(80 7 36)

`玫瑰红-50`

rgb(255 241 242)

`玫瑰红-100`

rgb(255 228 230)

`玫瑰红-200`

rgb(254 205 211)

`玫瑰红-300`

rgb(253 164 175)

`玫瑰红-400`

rgb(251 113 133)

`玫瑰红-500`

rgb(244 63 94)

`玫瑰红-600`

rgb(225 29 72)

`玫瑰红-700`

rgb(190 18 60)

`玫瑰红-800`

rgb(159 18 57)

`玫瑰红-900`

rgb(136 19 55)

`玫瑰红-950`

rgb(76 5 25)

lnear / marco

维护者

详细信息

README

安装

用法

模式

drop-shadow

drop-shadow-sm

drop-shadow-md

drop-shadow-lg

drop-shadow-xl

drop-shadow-xl2

drop-shadow-none

backdrop-hue-rotate-0

backdrop-hue-rotate-15

backdrop-hue-rotate-16

backdrop-hue-rotate-30

backdrop-hue-rotate-60

backdrop-hue-rotate-90

backdrop-hue-rotate-180

hue-rotate-0

hue-rotate-15

hue-rotate-30

hue-rotate-60

hue-rotate-90

hue-rotate-180

grayscale-0

grayscale

invert-0

invert

sepia-0

sepia

backdrop-grayscale-0

backdrop-grayscale

saturate-0

saturate-50

saturate-100

saturate-150

saturate-200

backdrop-blur

backdrop-blur-none

backdrop-blur-sm

backdrop-blur-md

backdrop-blur-lg

backdrop-blur-xl

backdrop-blur-xl2

backdrop-blur-xl3

blur

blur-none

blur-sm

blur-md

blur-lg

blur-xl

blur-xl2

blur-xl3

backdrop-brightness-0

backdrop-brightness-50

backdrop-brightness-75

backdrop-brightness-90

backdrop-brightness-95

backdrop-brightness-100

backdrop-brightness-105

backdrop-brightness-110

backdrop-brightness-125

backdrop-brightness-150

backdrop-brightness-200

brightness-0

brightness-50

brightness-75

brightness-90

brightness-95

brightness-100

brightness-105

brightness-110

brightness-125

brightness-150

brightness-200

contrast-0

contrast-50