一、参考属性
https://tailwind.muzhifan.top/
也可查找官方网站
以下为参考官网及网络上其他文章内容整理：
二、常用属性格式
1、颜色
color：颜色名称
shade：色度，取值范围为 100~900，不可对黑色或白色使用
-
文本颜色：
text-[color]-[shade]<p class="text-red-500">Color Red 500</p> -
背景颜色：
bg-[color]-[shade]<p class="bg-red-500">BgColor Red 500</p> -
下划线颜色：
underline decoration-[color]-[shade]underline：添加下划线
<p class="underline decoration-green-500">UlColor Green 500</p> -
边框颜色：
border border-[color]-[shade]border：添加边框
<input type="text" class="border border-green-500" /> -
间隔颜色：
divide-[direct] divide-[color]-[shade]divide-[direct]：添加分隔，direct表示分隔方向，取值x-横向、y-纵向
<div class="divide-y divide-red-500"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> -
轮廓线颜色：
outline outline-[color]-[shade]outline：添加轮廓线
<button class="outline outline-green-500">OlColor Green 500</button> -
盒子阴影颜色：
shadow-[container] shadow-[color]-[shade(/opacity)]-
shadow-[container]：添加阴影，container表示阴影最大宽度container width sm640px md768px lg1024px xl1280px 2xl1536px -
(/opacity)：透明度，默认 100，取值 0~100
<div class="shadow-lg shadow-red-500/20">SdColor Red 500</div> -
-
强调颜色：
accent-[color]-[shade]<input type="checkbox" class="accent-green-500" checked /> -
自定义颜色：
-[(#xxxxx|rgb(r,g,b)|name)]- 十六进制、RGB、名称
<p class="text-[#4682B4]">Color #4682B4</p> <p class="text-[rgb(46,130,180)]">Color RGB(46,130,180)</p> <p class="text-[steelblue]">Color Steelblue</p>
2、容器与间距
-
容器
<div class="container mx-auto"> 。。。。。 </div>container：标记为容器mx-auto：x 轴方向（横向），外边距（margin）自动
-
外边距：
m?-[number]m?：m-Margin、mt-MarginTop、ml-MarginLeft、mr-MarginRight、mb-MarginBottom
number=number * 0.25rem=number * 4px 如：m-2 意思为 margin: 0.5rem <div class="bg-red-200 m-2">Margin 2</div> <div class="bg-red-200 ml-2">Margin Left 2</div> <div class="bg-red-200 m-[20px]">Margin 20px</div> -
内边距：
p?-[number]p?：p-Padding、pt-PaddingTop、pl-PaddingLeft、pr-PaddingRight、pb-PaddingBottomnumber=number* 0.25rem=number* 4px
<div class="bg-red-200 mb-1 p-2">Padding 2</div> <div class="bg-red-200 mb-1 pl-2">Padding Left 2</div> <div class="bg-red-200 mb-1 p-[20px]">Padding 20px</div> -
间距：
(-)space-[direct]-[number](-)：负间距direct：间隔方向，取值x-横向、y-纵向number=number* 0.25rem=number* 4px
<div class="flex space-x-2"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> <div class="flex flex-col space-x-2"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>flex：采用 Flex 布局flex-col：Flex 布局纵向
3、版面设计
-
字体：
font-[family]<div class="font-sans">Font Sans</div>-
自定义字体族配置
<head> <script> tailwind.config = { theme: { fontFamily: { sans: ["Inter", "sans-serif"], serif: ["Inter", "serif"], mono: ["Inter", "monospace"] } } } </script> </head>
-
-
字号：
text-[size]<div class="text-xs">Text Extra Small</div> <div class="text-sm">Text Small</div> <div class="text-base">Text Base</div> <div class="text-lg">Text Large</div> <div class="text-xl">Text Extra Large</div> <div class="text-2xl">Text 2 Extra Large</div> <div class="text-3xl">Text 3 Extra Large</div> -
字重：
font-[weight]<div class="font-light">Font Light</div> <div class="font-normal">Font Normal</div> <div class="font-medium">Font Medium</div> <div class="font-semibold">Font Semibold</div> <div class="font-bold">Font Bold</div> -
字距：
tracking-[space]<div class="tracking-tight">Tracking Tight</div> <div class="tracking-normal">Tracking Normal</div> <div class="tracking-wide">Tracking Wide</div> -
文本对齐：
text-[direct]<div class="text-left">Text Left</div> <div class="text-center">Text Center</div> <div class="text-right">Text Right</div> -
下划线重：
decoration-[weight]<div class="underline decoration-2">Decoration 2</div> <div class="underline decoration-4">Decoration 4</div> <div class="underline decoration-8">Decoration 8</div> -
下划线风格：
decoration-[type]<div class="underline decoration-double">Decoration Double</div> <div class="underline decoration-dotted">Decoration Dotted</div> <div class="underline decoration-dashed">Decoration Dashed</div> <div class="underline decoration-wavy">Decoration Wavy</div> -
装饰偏移量：
underline-offset-[number]<div class="underline underline-offset-2">Offset 2</div> <div class="underline underline-offset-4">Offset 4</div> <div class="underline underline-offset-8">Offset 8</div> -
文本变换：
<p class="normal-case">Normal Case</p> <p class="uppercase">uppercase</p> <p class="lowercase">LOWERCASE</p> <p class="capitalize">capitalize test</p>
4、宽度与高度
-
宽度：
w-[number]number取值 0~48
<div class="bg-black text-white mb-2 w-6">Width 1.5rem</div> <div class="bg-black text-white mb-2 w-12">Width 3rem</div> <div class="bg-black text-white mb-2 w-24">Width 6rem</div> -
百分比：
w-[number_1]/[number_2]<div class="bg-black text-white mb-2 w-1/4">Width 25%</div> <div class="bg-black text-white mb-2 w-1/3">Width 33%</div> <div class="bg-black text-white mb-2 w-1/2">Width 50%</div> -
视点宽度
<div class="bg-black text-white w-screen">Width 100vw</div> -
100% 容器
<div class="bg-black text-white w-full">Width 100%</div> -
自定义宽度
<div class="bg-black text-white w-[300px]">Width 300px</div> -
最大宽度：
max-w-[size]<div class="bg-black text-white mx-auto max-w-xs"> Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny. </div> -
高度（大部分与宽度方法相同）：
h-[number]number取值 0~96
<div class="flex items-end"> <div class="bg-black text-white w-20 h-24">Height 24</div> <div class="bg-black text-white w-20 h-48">Height 48</div> <div class="bg-black text-white w-20 h-72">Height 72</div> <div class="bg-black text-white w-20 h-96">Height 96</div> </div> -
全屏高度
<div class="bg-black text-white h-screen">Height 100vh</div>
5、布局与定位
-
定位：相对定位与绝对定位
<div class="relative w-1/2 h-12 bg-red-200"> <p>Parent</p> <div class="absolute bottom-0 right-0 bg-red-700"> <p>Child</p> </div> </div> -
左上角
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 h-16 top-0 left-0 bg-red-700"></div> </div> -
右上角
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 h-16 top-0 right-0 bg-red-700"></div> </div> -
左下角
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 h-16 bottom-0 left-0 bg-red-700"></div> </div> -
右下角
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 h-16 bottom-0 right-0 bg-red-700"></div> </div> -
顶边
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute h-16 top-0 inset-x-0 bg-red-700"></div> </div> -
左边
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 left-0 inset-y-0 bg-red-700"></div> </div> -
右边
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute w-16 right-0 inset-y-0 bg-red-700"></div> </div> -
底边
<div class="relative w-32 h-32 bg-red-200"> <div class="absolute h-16 bottom-0 inset-x-0 bg-red-700"></div> </div> -
显示方式
<div> Tailwind CSS is the only framework that <span class="text-red-500 inline">(Inline)</span> I've seen scale on large teams. <span class="text-red-500 inline-block">(Inline-block)</span> It’s easy to customize, adapts to any design, <span class="text-red-500 block">(Block)</span> and the build size is tiny. <span class="text-red-500 hidden">(Hidden)</span> </div> -
层叠等级（Z 轴索引）：
z-[number/auto]<div class="relative h-24"> <div class="absolute left-0 w-24 h-24 bg-red-100 z-40">1</div> <div class="absolute left-20 w-24 h-24 bg-red-200 z-30">2</div> <div class="absolute left-40 w-24 h-24 bg-red-500 z-20">3</div> <div class="absolute left-60 w-24 h-24 bg-red-700 z-10">4</div> <div class="absolute left-80 w-24 h-24 bg-red-900">5</div> </div> -
浮动：
float-[left/right/none]<div class="h-24"> <div class="w-24 h-24 bg-red-100 float-left">1</div> <div class="w-24 h-24 bg-red-200 inline-block">2</div> </div>
6、背景与阴影
-
背景
<div class="w-64 h-64 bg-cover bg-no-repeat bg-center" style="background-image: url('https://example.com/png');" ></div>-
大小
bg-autobg-coverbg-contain -
重复
bg-repeatbg-no-repeatbg-repeat-xbg-repeat-ybg-repeat-roundbg-repeat-space -
定位
bg-centerbg-topbg-bottombg-leftbg-left-topbg-left-bottombg-rightbg-right-topbg-right-bottom -
attachment
bg-fixedbg-localbg-scroll
-
-
渐变：
bg-gradient-to-[direct] from-[color]-[shade] to-[color]-[shade]<div class="h-24 bg-gradient-to-r from-red-500 to-blue-500"></div> -
阴影
<div class="w-96 shadow-2xl"> Consectetur velit laboris tempor laboris qui consequat eu minim ipsum nulla culpa aliquip ad. </div>Tailwind Background Class CSS Code 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; -
混合
<div class="flex justify-center -space-x-24"> <div class="mix-blend-multiply bg-red-500"> Id ex deserunt velit excepteur deserunt tempor eu aliquip ipsum labore laboris. </div> <div class="mix-blend-multiply bg-blue-500"> Adipisicing voluptate magna aute sunt consequat irure sint. </div> </div>
7、边框
-
宽度：
border(-[direct])-[width](-[direct])：取值为 t、l、r、b、x 或 y，分别对应上、左、右、下、左右或上下width：取值为 0、2、4 或 8，分别对应 0px、2px、4px、8px
<div class="w-96 m-5 p-5 border-2"> Amet commodo nisi quis irure velit Lorem enim anim commodo sunt aliquip officia quis. </div> <div class="w-96 m-5 p-5 border-x-4"> Amet commodo nisi quis irure velit Lorem enim anim commodo sunt aliquip officia quis. </div> <div class="w-96 m-5 p-5 border-y-8"> Amet commodo nisi quis irure velit Lorem enim anim commodo sunt aliquip officia quis. </div> -
圆角：
rounded(-[direct])(-[size])(-[direct])：取值为 t、l、r、b、x 或 y，分别对应上、左、右、下、左右或上下(-[size])：取值为 none、sm、md、lg、xl、2xl、3xl、full
<div class="w-96 w-5 p-5 border-4 rounded-xl"> Dolore deserunt sunt qui ut quis sunt anim do nostrud minim fugiat minim. </div> -
轮廓线：
outline(-[width])(-[width])：取值为 0、1、2、4、8
<button class="m-5 outline outline-8">Click</button>
8、过滤器
-
模糊：
blur(-[size])(-[size])：取值为 none、sm、【略】、md、lg、xl、2xl、3xl
<div class="blur-sm"> Do elit adipisicing cupidatat dolor excepteur nulla in incididunt. </div> -
亮度：
brightness-[number]number：filter: brightness(number*0.1)
<div class="h-16 bg-red-500 brightness-0">Brightness 0</div> <div class="h-16 bg-red-500 brightness-100">Brightness 100</div> <div class="h-16 bg-red-500 brightness-200">Brightness 200</div> -
对比度：
contrast-[number]number：filter: contrast(number*0.1)
<div class="h-16 bg-red-500 contrast-0">Contrast 0</div> <div class="h-16 bg-red-500 contrast-50">Contrast 50</div> <div class="h-16 bg-red-500 contrast-200">Contrast 200</div> -
灰度
<div class="h-16 bg-red-500 grayscale">Grayscale</div> -
反色
<div class="h-16 bg-red-500 invert">Invert</div> -
褐化
<div class="h-16 bg-red-500 sepia">Sepia</div> -
Hue rotate：
hue-rotateo-[number]number：取值为 0、15、30、60、90、180
<div class="h-16 bg-red-500 hue-rotate-0">Hue Rotate 0</div> <div class="h-16 bg-red-500 hue-rotate-90">Hue Rotate 90</div> <div class="h-16 bg-red-500 hue-rotate-180">Hue Rotate 180</div>
9、 进阶应用
（1）交互
-
悬停：
hover:<button class="bg-black text-white rounded-lg m-5 p-5 hover:bg-blue-200 hover:text-black">Click</button> -
聚焦：
focus:<button class="bg-black text-white rounded-lg m-5 p-5 focus:bg-blue-200 focus:text-black">Click</button> -
触发：
active:<button class="bg-black text-white rounded-lg m-5 p-5 active:bg-blue-200 active:text-black">Click</button> -
设置内部元素样式
<div class="group block max-w-xs mx-auto rounded-lg p-6 bg-white shadow-lg space-y-3 hover:bg-red-500"> <h3 class="hover:text-white">Title</h3> <p class="group-hover:text-white">Laboris tempor ex nisi deserunt labore anim et do in officia sint laborum.</p> </div> -
伪类
<ul> <li class="first:bg-red-500">Item 1</li> <li class="first:bg-red-500">Item 2</li> <li class="first:bg-red-500 even:bg-red-200 odd:bg-red-700">Item 3</li> <li class="first:bg-red-500 even:bg-red-200 odd:bg-red-700">Item 4</li> <li class="first:bg-red-500 even:bg-red-200 odd:bg-red-700">Item 5</li> </ul> -
外观
- 一般用于重置浏览器或操作系统默认的样式外观
<select class="border-4 border-red-500"> <option value="1">True</option> <option value="0">False</option> </select> <select class="border-4 border-green-500 appearance-none"> <option value="1">True</option> <option value="0">False</option> </select> -
游标：
cursor-[type]-
type常见取值为auto default pointer wait text move help not-allowed none context-menu progress cell crosshair vertical-text …
<div class="w-36 h-36 bg-red-500 cursor-pointer"></div> -
-
选中
<div class="select-none">Select None</div> <div class="select-text">Select Text</div> <div class="select-all">Select All</div> <div class="select-auto">Select Auto</div> -
平滑滚动示例
<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <!-- ... --> <script src="https://cdn.tailwindcss.com/"></script> </head> <body> <a href="#bottom" class="block m-6 border-4 text-center">Go to Bottom</a> <div class="h-[1000px] bg-black"></div> <div id="bottom" class="h-4 text-center">Bottom</div> </body> </html>
（2）断点类与媒体查询
-
窗口宽度实时监听
<body> <h1></h1> <script> function showBrowserWidth() { const width = window.innerWidth document.querySelector('h1').innerText = `Width: ${width}` } window.onload = showBrowserWidth window.onresize = showBrowserWidth </script> </body> -
修改
h1标签样式，设置默认背景颜色<body class="bg-black"> <h1 class="text-white text-4xl"></h1> <script> function showBrowserWidth() { const width = window.innerWidth document.querySelector('h1').innerText = `Width: ${width}` } window.onload = showBrowserWidth window.onresize = showBrowserWidth </script> </body> -
在
body标签中，根据窗口宽度设置背景颜色变化<body class="bg-black sm:bg-red-700"> <!-- ... --> </body>size min-width sm 640px md 768px lg 1024px xl 1280px 2xl 1536px
（3）分栏
-
基本列：
columns-[number/type]number：取值 1~12type：取值 auto、3xs、2xs、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、7xl
<div class="columns-3"> <div class="w-full m-2 border-4 border-red-500">Proident ipsum consequat dolor deserunt.</div> <div class="w-full m-2 border-4 border-yellow-500">Proident ipsum consequat dolor deserunt.</div> <div class="w-full m-2 border-4 border-green-500">Proident ipsum consequat dolor deserunt.</div> <div class="w-full m-2 border-4 border-blue-500">Proident ipsum consequat dolor deserunt.</div> </div> -
纵横比：
aspect-[type]<div class="columns-1"> <div class="w-60 m-2 border-4 border-red-500 aspect-square">Proident ipsum consequat dolor deserunt.</div> <div class="w-60 m-2 border-4 border-blue-500 aspect-video">Proident ipsum consequat dolor deserunt.</div> </div>
（4）Flexbox
-
Flex 与对齐
-
创建一个 Flexbox
<div class="flex w-full h-72 bg-black"> <div class="p-10 border border-red-500 bg-red-200">1</div> <div class="p-10 border border-yellow-500 bg-yellow-200">2</div> <div class="p-10 border border-green-500 bg-green-200">3</div> <div class="p-10 border border-blue-500 bg-blue-200">4</div> </div> -
设置每项的对齐方向：
items-[type]<div class="flex w-full h-72 bg-black items-center"> <!-- ... --> </div> -
设置每项的对齐方式：
justify-[type]<div class="flex w-full h-72 bg-black items-center justify-around"> <!-- ... --> </div> -
设置换行，使某一项超出窗口：
flex-wrap<div class="flex flex-wrap w-full h-72 bg-black items-center justify-around"> <div class="p-10 border border-red-500 bg-red-200">1</div> <div class="p-10 border border-yellow-500 bg-yellow-200">2</div> <div class="p-10 w-[300px] border border-green-500 bg-green-200">3</div> <div class="p-10 border border-blue-500 bg-blue-200">4</div> </div>
-
-
列、间隙、顺序
-
创建一个 Flexbox，设置为纵向排列
<div class="flex flex-col w-72 bg-black"> <div class="p-10 border border-red-500 bg-red-200">1</div> <div class="p-10 border border-yellow-500 bg-yellow-200">2</div> <div class="p-10 border border-green-500 bg-green-200">3</div> <div class="p-10 border border-blue-500 bg-blue-200">4</div> </div> -
设置间隙：
gap-[number]（number* 0.25rem）<div class="flex flex-col w-72 bg-black gap-4"> <!-- ... --> </div> -
调整顺序：
order-[index]<div class="flex flex-col w-72 bg-black gap-4"> <div class="p-10 border border-red-500 bg-red-200 order-2">1</div> <div class="p-10 border border-yellow-500 bg-yellow-200 order-1">2</div> <div class="p-10 border border-green-500 bg-green-200 order-4">3</div> <div class="p-10 border border-blue-500 bg-blue-200 order-3">4</div> </div>
-
-
放大与缩小
<div class="flex w-full bg-black"> <div class="p-10 w-64 border border-red-500 bg-red-200">1</div> <div class="flex-none p-10 w-64 border border-yellow-500 bg-yellow-200">2</div> <div class="p-10 w-64 border border-green-500 bg-green-200">3</div> <div class="p-10 border border-blue-500 bg-blue-200">4</div> <div class="p-10 w-64 border border-gray-500 bg-gray-200">5</div> </div>
（5）Grid
-
模板列：
grid-cols-[number/none]number：取值为 1~12- 该语句等同于：
grid-template-columns: repeat(number, minmax(0, 1fr));
<div class="grid grid-cols-3 gap-2"> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 1</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 2</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 3</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 4</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 5</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 6</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 7</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 8</div> <div class="p-10 border-4 border-red-200 bg-blue-200">Item 9</div> </div> -
模板行：
grid-rows-[number/none]number：取值为 1~6- 该语句等同于：
grid-template-rows: repeat(number, minmax(0, 1fr));
<div class="grid grid-cols-2 gap-2 grid-rows-4 bg-gray-200"> <!-- ... --> </div> -
跨行/列：
[row/col]-span-[number]row-span-[number]：跨number行col-span-[number]：跨number列
<div class="grid grid-cols-3 gap-2"> <div class="row-span-3 p-10 border-4 border-red-200 bg-blue-200">Item 1</div> <div class="md:col-span-2 p-10 border-4 border-red-200 bg-blue-200">Item 2</div> <!-- ... --> </div>
（6）过渡与变换
初始按钮：
<button class="m-4 px-8 py-4 text-white bg-blue-200 rounded hover:bg-blue-700">Click</button>
-
过渡
transition-[type]：过渡类型，type取值为 none、all、colors、opacity、shadow、transformduration-[ms]：过渡时长，ms取值为 75、100、150、200、300、500、700、1000ease-[type]：过渡效果，type取值为 linear、in、out、in-outdelay-[ms]：延时时长，ms取值为 75、100、150、200、300、500、700、1000
<button class="m-4 px-8 py-4 text-white bg-blue-200 rounded hover:bg-blue-700 transition-colors duration-700 ease-in delay-100">Click</button> -
变换
scale(-[axis])-[magnification]：缩放，axis表示参照轴，取值为 x 或 y；magnification表示缩放倍率，为number%rotate-[degree]：旋转，degree表示旋转角度translate-[axis]-[distance]：位移，axis表示参照轴，取值为 x 或 y；distance表示位移距离，整数为number* 0.25rem，分数为占比，full为 100%，px为 1pxskew-[direct]-[degree]：倾斜，axis表示参照轴，取值为 x 或 y；degree表示倾斜角度
<button class="m-4 px-8 py-4 text-white bg-blue-200 rounded hover:scale-50 hover:rotate-12 hover:translate-x-2 hover:skew-x-12 duration-700">Click</button>
（7）动画类与关键帧
-
animate-[property]：property取值如下：-
none：
animation: none; -
spin：旋转
animate: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } -
ping：扩散
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } -
pulse：闪烁
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } -
bounce：弹跳
animation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
<div class="w-64 h-64 bg-red-200 rounded-full relative animate-ping"> <div class="w-32 h-2 bg-gradient-to-r from-red-500 to-yellow-500 absolute right-0 top-1/2"></div> </div> -
-
自定义动画与关键帧
<!DOCTYPE html> <html lang="en"> <head> <!-- ... --> <script> tailwind.config = { theme: { extend: { animation: { 'slow-spin': 'spin 3s linear infinite', 'custom': 'custom 1s linear infinite' }, keyframes: { 'custom': { '0%': { transform: 'rotate(0deg)' }, '90%, 100%': { transform: 'rotate(360deg)' } } } } } } </script> </head> <body> <div class="w-64 h-64 bg-red-200 rounded-full relative animate-custom"> <div class="w-32 h-2 bg-gradient-to-r from-red-500 to-yellow-500 absolute right-0 top-1/2"></div> </div> </body> </html>
（8）配置与客制化
-
在
head标签中的script标签中写入配置 -
配置格式：
<script> tailwind.config = { theme: { extend: { 'property-1': { 'key-1-1': 'value-1-1', }, 'property-2': { 'key-2-1': 'value-2-1', }, // ... } } } </script>
（9）夜间模式
-
配置夜间模式样式：
dark:<div class="w-64 h-64 bg-white dark:bg-gray-900"></div> -
是否使用夜间模式，默认根据操作系统
-
使用 Javascript 控制夜间模式
<!DOCTYPE html> <html lang="en"> <head> <!-- ... --> <script> tailwind.config = { darkMode: "class", }; </script> <style> .toggle-checkbox:checked { right: 0; border-color: #68d391; } .toggle-checkbox:checked + .toggle-label { background: #68d391; } </style> </head> <body> <div class="container mx-auto mt-10 bg-white dark:bg-slate-900 rounded-xl px-6 py-8 shadow-xl" > <h3 class="text-slate-900 dark:text-white font-medium tracking-tight"> Title </h3> <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm"> Irure dolor ut excepteur ea cupidatat dolor dolore consectetur sit voluptate qui et deserunt. </p> </div> <div class="relative inline-block w-10 mr-2 mt-6 ml-6 align-middle select-none transition duration-200 ease-in" > <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 dark:bg-gray-700 appearance-none cursor-pointer" /> <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer" ></label> </div> <script> document.getElementById("toggle").addEventListener("change", function () { if (this.checked) { document.documentElement.classList.add("dark"); } else { document.documentElement.classList.remove("dark"); } }); </script> </body> </html>
（10）分组
-
子选择：
group[/name]，如：<body> <div class="size-36 bg-black group/box"> <div class="size-24 bg-gray-500 group-hover/box:bg-red-500"></div> </div> </body> -
兄弟选择：
peer[/name]，如：<body> <div class="size-36 bg-black mb-4 peer/box"></div> <div class="size-36 bg-gray-500 peer-hover/box:bg-red-500"></div> </body>- 注意，兄弟选择仅支持对被命名的元素后面的元素选择
![[单master节点k8s部署]37.微服务（一)springCloud 微服务](https://i-blog.csdnimg.cn/direct/1e3c3690628f458fb7a4084e21c652ee.png)
