文章
白板
旧版
文章
白板
旧版

Tailwind CSS用法

预计阅读时间: 14 分钟

文本修饰

$$ 在看这篇用法之前，你应该对css属性有所了解🎈🎈 $$

对于本文，与其说它是一片文章，更不如说它是一篇==速查表==

在本文中，列出了很多常用的tailwind css用法，详情如下：

文字大小

text-[Arbitrary values]
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;

use hover:text-base to only apply the text-base utility on hover.

<p class="text-sm hover:text-base"> <!-- ... --> </p>

定义主题

// tailwind.config.js module.exports = { theme: { + fontSize: { + sm: '0.8rem', + base: '1rem', + xl: '1.25rem', + '2xl': '1.563rem', + '3xl': '1.953rem', + '4xl': '2.441rem', + '5xl': '3.052rem', + } } }

字体族名

ClassProperties
font-sansfont-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", 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;

字体粗细Font Weight

ClassProperties
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;

字间距Letter Spacing

ClassProperties
tracking-tighterletter-spacing: -0.05em;
tracking-tightletter-spacing: -0.025em;
tracking-normalletter-spacing: 0em;
tracking-wideletter-spacing: 0.025em;
tracking-widerletter-spacing: 0.05em;
tracking-widestletter-spacing: 0.1em;

行夹Line Clamp

把块容器中的内容限制为指定的行数。

ClassProperties
line-clamp-1overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
line-clamp-2overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
line-clamp-3overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
line-clamp-4overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
line-clamp-5overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
line-clamp-6overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
line-clamp-noneoverflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: none;

行高Line Height

ClassProperties
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;

List Style Image列表图标

用于控制列表项的标记图像

ClassProperties
list-image-nonelist-style-image: none;
list-image-[(url)]list-style-image: url(......)

List Style Position列表图标位置

ClassProperties
list-insidelist-style-position: inside;
list-outsidelist-style-position: outside;

Text Align文本对齐

ClassProperties
text-lefttext-align: left;
text-centertext-align: center;
text-righttext-align: right;
text-justifytext-align: justify;
text-starttext-align: start;
text-endtext-align: end;

Text Color文本颜色

ClassProperties
text-inheritcolor: inherit;
text-currentcolor: currentColor;
text-transparentcolor: transparent;
text-blackcolor: rgb(0 0 0);
text-whitecolor: rgb(255 255 255);
text-red-600color: rgb(220 38 38);
text-yellow-400color: rgb(250 204 21);
text-green-500color: rgb(34 197 94);
text-sky-500color: rgb(14 165 233);

······

Text Decoration文本修饰

underlinetext-decoration-line: underline;
overlinetext-decoration-line: overline;
line-throughtext-decoration-line: line-through;
no-underlinetext-decoration-line: none;

······

Text Decoration Color文本修饰的颜色

ClassProperties
decoration-inherittext-decoration-color: inherit;
decoration-currenttext-decoration-color: currentColor;
decoration-transparenttext-decoration-color: transparent;
decoration-blacktext-decoration-color: #000;
decoration-whitetext-decoration-color: #fff;
decoration-slate-50text-decoration-color: #f8fafc;

······

Text Decoration Style文本修饰的样式

decoration-solidtext-decoration-style: solid;
decoration-doubletext-decoration-style: double;
decoration-dottedtext-decoration-style: dotted;
decoration-dashedtext-decoration-style: dashed;
decoration-wavytext-decoration-style: wavy;

Text Decoration Thickness文字装饰厚度

ClassProperties
decoration-autotext-decoration-thickness: auto;
decoration-from-fonttext-decoration-thickness: from-font;
decoration-0text-decoration-thickness: 0px;
decoration-1text-decoration-thickness: 1px;
decoration-2text-decoration-thickness: 2px;
decoration-4text-decoration-thickness: 4px;
decoration-8text-decoration-thickness: 8px;

Text Transform文本转换

ClassProperties
uppercasetext-transform: uppercase;
lowercasetext-transform: lowercase;
capitalizetext-transform: capitalize;
normal-casetext-transform: none;

Text Overflow文本超出

ClassProperties
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-ellipsistext-overflow: ellipsis;
text-cliptext-overflow: clip;

Text Indent文本缩进

ClassProperties
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 */

Vertical Align垂直对齐

ClassProperties
align-baselinevertical-align: baseline;
align-topvertical-align: top;
align-middlevertical-align: middle;
align-bottomvertical-align: bottom;
align-text-topvertical-align: text-top;
align-text-bottomvertical-align: text-bottom;
align-subvertical-align: sub;
align-supervertical-align: super;

size尺寸

Width宽度

值类型宽度

ClassProperties
w-0width: 0px;
w-pxwidth: 1px;
w-0.5width: 0.125rem; /* 2px */
w-autowidth: auto;
w-1/2width: 50%;
w-{fraction}width: n%;

特殊类型宽度

ClassProperties
w-fullwidth: 100%;
w-screenwidth: 100vw;
w-minwidth: min-content;
w-maxwidth: max-content;
w-fitwidth: fit-content;

Min-Width最小宽度

ClassProperties
min-w-0min-width: 0px;
min-w-fullmin-width: 100%;
min-w-minmin-width: min-content;
min-w-maxmin-width: max-content;
min-w-fitmin-width: fit-content;

Max-Width最大宽度

ClassProperties
max-w-0max-width: 0rem; /* 0px */
max-w-nonemax-width: none;
max-w-xsmax-width: 20rem; /* 320px */
max-w-fullmax-width: 100%;
max-w-minmax-width: min-content;
max-w-maxmax-width: max-content;
max-w-fitmax-width: fit-content;

下面这些挺适合用在@media 媒体查询时使用的

max-w-screen-smmax-width: 640px;
max-w-screen-mdmax-width: 768px;
max-w-screen-lgmax-width: 1024px;
max-w-screen-xlmax-width: 1280px;
max-w-screen-2xlmax-width: 1536px;

Height高度

ClassProperties
h-0height: 0px;
h-pxheight: 1px;
h-0.5height: 0.125rem; /* 2px */
h-autoheight: auto;
h-1/2height: 50%;
h-fullheight: 100%;
h-screenheight: 100vh;
h-minheight: min-content;
h-maxheight: max-content;

Min-Height最小高度

ClassProperties
min-h-0min-height: 0px;
min-h-fullmin-height: 100%;
min-h-screenmin-height: 100vh;
min-h-minmin-height: min-content;
min-h-maxmin-height: max-content;
min-h-fitmin-height: fit-content;

Max-Height最大高度

ClassProperties
max-h-0max-height: 0px;
max-h-pxmax-height: 1px;
max-h-0.5max-height: 0.125rem; /* 2px */
max-h-nonemax-height: none;
max-h-fullmax-height: 100%;
max-h-screenmax-height: 100vh;
max-h-minmax-height: min-content;
max-h-maxmax-height: max-content;
max-h-fitmax-height: fit-content;

bg背景

background背景

ClassProperties
bg-fixedbackground-attachment: fixed;
bg-localbackground-attachment: local;
bg-scrollbackground-attachment: scroll;

Background Clip

background-clip - CSS：层叠样式表 | MDN (mozilla.org)

ClassProperties
bg-clip-borderbackground-clip: border-box;
bg-clip-paddingbackground-clip: padding-box;
bg-clip-contentbackground-clip: content-box;
bg-clip-textbackground-clip: text;

Background Color背景颜色

ClassProperties
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-red-500background-color: rgb(239 68 68);

Background Origin

background-origin - CSS：层叠样式表 | MDN (mozilla.org)

ClassProperties
bg-origin-borderbackground-origin: border-box;
bg-origin-paddingbackground-origin: padding-box;
bg-origin-contentbackground-origin: content-box;

Background Position

ClassProperties
bg-bottombackground-position: bottom;
bg-centerbackground-position: center;
bg-leftbackground-position: left;
bg-left-bottombackground-position: left bottom;
bg-left-topbackground-position: left top;
bg-rightbackground-position: right;
bg-right-bottombackground-position: right bottom;
bg-right-topbackground-position: right top;
bg-topbackground-position: top;

Background Repeat

ClassProperties
bg-repeatbackground-repeat: repeat;
bg-no-repeatbackground-repeat: no-repeat;
bg-repeat-xbackground-repeat: repeat-x;
bg-repeat-ybackground-repeat: repeat-y;
bg-repeat-roundbackground-repeat: round;
bg-repeat-spacebackground-repeat: space;

Background Size

ClassProperties
bg-autobackground-size: auto;
bg-coverbackground-size: cover;
bg-containbackground-size: contain;

Background Image

ClassProperties
bg-nonebackground-image: none;
bg-gradient-to-tbackground-image: linear-gradient(to top, var(--tw-gradient-stops));
bg-gradient-to-trbackground-image: linear-gradient(to top right, var(--tw-gradient-stops));
bg-gradient-to-rbackground-image: linear-gradient(to right, var(--tw-gradient-stops));
bg-gradient-to-brbackground-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
bg-gradient-to-bbackground-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bg-gradient-to-blbackground-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
bg-gradient-to-lbackground-image: linear-gradient(to left, var(--tw-gradient-stops));
bg-gradient-to-tlbackground-image: linear-gradient(to top left, var(--tw-gradient-stops));

Gradient Color Stops 渐变色

Gradient Color Stops

bg-gradient-to-l from-red-500 to-sky-500

Border Width

ClassProperties
border-0border-width: 0px;
border-2border-width: 2px;
borderborder-width: 1px;
border-x-0border-left-width: 0px; border-right-width: 0px;
border-x-2border-left-width: 2px; border-right-width: 2px;
border-s-4border-inline-start-width: 4px;
border-e-8border-inline-end-width: 8px;
border-tborder-top-width: 1px;
border-r-0border-right-width: 0px;

Border Color 边框颜色

ClassProperties
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-t-red-500border-top-color: rgb(239 68 68);
border-r-gray-400border-right-color: rgb(156 163 175);
border-b-yellow-200border-bottom-color: rgb(254 240 138);
border-b-cyan-100border-bottom-color: rgb(207 250 254);

Border Style边框样式

ClassProperties
border-solidborder-style: solid;
border-dashedborder-style: dashed;
border-dottedborder-style: dotted;
border-doubleborder-style: double;
border-hiddenborder-style: hidden;
border-noneborder-style: none;

Divide Width

在两元素之间添加border

ClassProperties
divide-x-0border-right-width: 0px; border-left-width: 0px;
divide-x-2border-right-width: 0px; border-left-width: 2px;
divide-y-0border-top-width: 0px; border-bottom-width: 0px;
divide-y-2border-top-width: 2px; border-bottom-width: 0px;
divide-y-reverse--tw-divide-y-reverse: 1;
divide-x-reverse--tw-divide-x-reverse: 1;

Divide Color

在两元素之间添加的border的颜色

ClassProperties
divide-inheritborder-color: inherit;
divide-currentborder-color: currentColor;
divide-transparentborder-color: transparent;
divide-blackborder-color: rgb(0 0 0);
divide-whiteborder-color: rgb(255 255 255);

Divide Style

在两元素之间添加的border的样式

ClassProperties
divide-solid > * + *border-style: solid;
divide-dashed > * + *border-style: dashed;
divide-dotted > * + *border-style: dotted;
divide-double > * + *border-style: double;
divide-none > * + *border-style: none;

outline轮廓

outline | MDN

ClassProperties
outline-0outline-width: 0px;
outline-1outline-width: 1px;
outline-2outline-width: 2px;
outline-4outline-width: 4px;
outline-8outline-width: 8px;

Outline Color轮廓颜色

ClassProperties
outline-inheritoutline-color: inherit;
outline-currentoutline-color: currentColor;
outline-transparentoutline-color: transparent;
outline-blackoutline-color: #000;
outline-whiteoutline-color: #fff;

Outline Style轮廓的样式

ClassProperties
outline-noneoutline: 2px solid transparent; outline-offset: 2px;
outlineoutline-style: solid;
outline-dashedoutline-style: dashed;
outline-dottedoutline-style: dotted;
outline-doubleoutline-style: double;

Outline Offset 轮廓偏移量

ClassProperties
outline-offset-0outline-offset: 0px;
outline-offset-1outline-offset: 1px;
outline-offset-2outline-offset: 2px;
outline-offset-4outline-offset: 4px;
outline-offset-8outline-offset: 8px;

Ring Width阴影轮廓环

ClassProperties
ring-0box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-1box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-2box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ringbox-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-4box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-8box-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-inset--tw-ring-inset: inset;

Ring Color阴影轮廓环颜色

ClassProperties
ring-inherit--tw-ring-color: inherit;
ring-current--tw-ring-color: currentColor;
ring-transparent--tw-ring-color: transparent;
ring-black--tw-ring-color: rgb(0 0 0);
ring-white--tw-ring-color: rgb(255 255 255);
ring-emerald-500--tw-ring-color: rgb(16 185 129);
ring-sky-100--tw-ring-color: rgb(224 242 254);
ring-purple-200--tw-ring-color: rgb(233 213 255);
ring-rose-900--tw-ring-color: rgb(136 19 55);

Ring Offset Width阴影轮廓环偏移

Ring Offset Width | TailwindCSS中文网

ClassProperties
ring-offset-0--tw-ring-offset-width: 0px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-1--tw-ring-offset-width: 1px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-2--tw-ring-offset-width: 2px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-4--tw-ring-offset-width: 4px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-8--tw-ring-offset-width: 8px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);

Ring Offset Width偏移阴影轮廓环颜色

ClassProperties
ring-offset-inherit--tw-ring-offset-color: inherit; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-current--tw-ring-offset-color: currentColor; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-transparent--tw-ring-offset-color: transparent; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-black--tw-ring-offset-color: #000; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-white--tw-ring-offset-color: #fff; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);

Effects

Box Shadow盒子阴影

ClassProperties
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;

Box Shadow Color盒子阴影颜色

ClassProperties
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;

Opacity透明

ClassProperties
opacity-0opacity: 0;
opacity-5opacity: 0.05;
opacity-10opacity: 0.1;
opacity-20opacity: 0.2;
opacity-25opacity: 0.25;

Mix Blend Mode混合模式

非常有意思的一个属性，可以考虑一下抖音的图标如何利用这个来实现

ClassProperties
mix-blend-normalmix-blend-mode: normal;
mix-blend-multiplymix-blend-mode: multiply;
mix-blend-screenmix-blend-mode: screen;
mix-blend-overlaymix-blend-mode: overlay;
mix-blend-darkenmix-blend-mode: darken;
mix-blend-lightenmix-blend-mode: lighten;
mix-blend-color-dodgemix-blend-mode: color-dodge;
mix-blend-color-burnmix-blend-mode: color-burn;
mix-blend-hard-lightmix-blend-mode: hard-light;
mix-blend-soft-lightmix-blend-mode: soft-light;
mix-blend-differencemix-blend-mode: difference;
mix-blend-exclusionmix-blend-mode: exclusion;
mix-blend-huemix-blend-mode: hue;
mix-blend-saturationmix-blend-mode: saturation;
mix-blend-colormix-blend-mode: color;
mix-blend-luminositymix-blend-mode: luminosity;
mix-blend-plus-lightermix-blend-mode: plus-lighter;

Background Blend Mode背景混合模式

ClassProperties
bg-blend-normalbackground-blend-mode: normal;
bg-blend-multiplybackground-blend-mode: multiply;
bg-blend-screenbackground-blend-mode: screen;
bg-blend-overlaybackground-blend-mode: overlay;
bg-blend-darkenbackground-blend-mode: darken;
bg-blend-lightenbackground-blend-mode: lighten;
bg-blend-color-dodgebackground-blend-mode: color-dodge;
bg-blend-color-burnbackground-blend-mode: color-burn;
bg-blend-hard-lightbackground-blend-mode: hard-light;
bg-blend-soft-lightbackground-blend-mode: soft-light;
bg-blend-differencebackground-blend-mode: difference;
bg-blend-exclusionbackground-blend-mode: exclusion;
bg-blend-huebackground-blend-mode: hue;
bg-blend-saturationbackground-blend-mode: saturation;
bg-blend-colorbackground-blend-mode: color;
bg-blend-luminositybackground-blend-mode: luminosity;

Filters过滤器，又名滤镜

Blur模糊

ClassProperties
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);

Brightness亮度

ClassProperties
brightness-0filter: brightness(0);
brightness-50filter: brightness(.5);
brightness-75filter: brightness(.75);
brightness-90filter: brightness(.9);
brightness-95filter: brightness(.95);
brightness-100filter: brightness(1);Contrast

Contrast对比度

ClassProperties
contrast-0filter: contrast(0);
contrast-50filter: contrast(.5);
contrast-75filter: contrast(.75);
contrast-100filter: contrast(1);
contrast-125filter: contrast(1.25);
contrast-150filter: contrast(1.5);
contrast-200filter: contrast(2);

Drop Shadow阴影

ClassProperties
drop-shadow-smfilter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
drop-shadowfilter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
drop-shadow-mdfilter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
drop-shadow-lgfilter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
drop-shadow-xlfilter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
drop-shadow-2xlfilter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
drop-shadow-nonefilter: drop-shadow(0 0 #0000);

Grayscale灰度

ClassProperties
grayscale-0filter: grayscale(0);
grayscalefilter: grayscale(100%);

Hue Rotate色调

ClassProperties
hue-rotate-0filter: hue-rotate(0deg);
hue-rotate-15filter: hue-rotate(15deg);
hue-rotate-30filter: hue-rotate(30deg);
hue-rotate-60filter: hue-rotate(60deg);
hue-rotate-90filter: hue-rotate(90deg);
hue-rotate-180filter: hue-rotate(180deg);

Invert反转

ClassProperties
invert-0filter: invert(0);
invertfilter: invert(100%);

Saturate饱和度

ClassProperties
saturate-0filter: saturate(0);
saturate-50filter: saturate(.5);
saturate-100filter: saturate(1);
saturate-150filter: saturate(1.5);
saturate-200filter: saturate(2);

Sepia怀旧

ClassProperties
sepia-0filter: sepia(0);
sepiafilter: sepia(100%);

Backdrop Blur背景模糊

ClassProperties
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);

backdrop-filter背景亮度

ClassProperties
backdrop-brightness-0backdrop-filter: brightness(0);
backdrop-brightness-50backdrop-filter: brightness(.5);
backdrop-brightness-75backdrop-filter: brightness(.75);
backdrop-brightness-90backdrop-filter: brightness(.9);
backdrop-brightness-95backdrop-filter: brightness(.95);
backdrop-brightness-100backdrop-filter: brightness(1);
backdrop-brightness-105backdrop-filter: brightness(1.05);
backdrop-brightness-110backdrop-filter: brightness(1.1);
backdrop-brightness-125backdrop-filter: brightness(1.25);
backdrop-brightness-150backdrop-filter: brightness(1.5);
backdrop-brightness-200backdrop-filter: brightness(2);

Backdrop Contrast背景对比度

ClassProperties
backdrop-contrast-0backdrop-filter: contrast(0);
backdrop-contrast-50backdrop-filter: contrast(.5);
backdrop-contrast-75backdrop-filter: contrast(.75);
backdrop-contrast-100backdrop-filter: contrast(1);
backdrop-contrast-125backdrop-filter: contrast(1.25);
backdrop-contrast-150backdrop-filter: contrast(1.5);
backdrop-contrast-200backdrop-filter: contrast(2);

Backdrop Grayscale北京灰度

ClassProperties
backdrop-grayscale-0backdrop-filter: grayscale(0);
backdrop-grayscalebackdrop-filter: grayscale(100%);

Backdrop Hue Rotate背景色调

ClassProperties
backdrop-hue-rotate-0backdrop-filter: hue-rotate(0deg);
backdrop-hue-rotate-15backdrop-filter: hue-rotate(15deg);
backdrop-hue-rotate-30backdrop-filter: hue-rotate(30deg);
backdrop-hue-rotate-60backdrop-filter: hue-rotate(60deg);
backdrop-hue-rotate-90backdrop-filter: hue-rotate(90deg);
backdrop-hue-rotate-180backdrop-filter: hue-rotate(180deg);

Backdrop Invert背景色反向

ClassProperties
backdrop-invert-0backdrop-filter: invert(0);
backdrop-invertbackdrop-filter: invert(100%);

Backdrop Opacity背景透明

ClassProperties
backdrop-opacity-0backdrop-filter: opacity(0);
backdrop-opacity-5backdrop-filter: opacity(0.05);
backdrop-opacity-10backdrop-filter: opacity(0.1);
backdrop-opacity-20backdrop-filter: opacity(0.2);
backdrop-opacity-25backdrop-filter: opacity(0.25);
backdrop-opacity-30backdrop-filter: opacity(0.3);
backdrop-opacity-40backdrop-filter: opacity(0.4);
backdrop-opacity-50backdrop-filter: opacity(0.5);

Backdrop Saturate背景饱和度

ClassProperties
backdrop-saturate-0backdrop-filter: saturate(0);
backdrop-saturate-50backdrop-filter: saturate(.5);
backdrop-saturate-100backdrop-filter: saturate(1);
backdrop-saturate-150backdrop-filter: saturate(1.5);
backdrop-saturate-200backdrop-filter: saturate(2);

Backdrop Sepia背景暖色

ClassProperties
backdrop-sepia-0backdrop-filter: sepia(0);
backdrop-sepiabackdrop-filter: sepia(100%);
目录 | Outline