buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-17 04:31:22 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
8fb6767edb86b1b6247f121ca3f6de2037233396
reference/docs/tailwindcss.html
jaywcjlove 196204fcdb doc: update docs/pip.md 4ca8110520
2025-05-11 17:34:02 +00:00

3408 lines
143 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>Tailwind CSS 备忘清单
&#x26; tailwindcss cheatsheet &#x26; Quick Reference</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta description="使用此交互式备忘单快速查找所有类名和 CSS 属性，为开发人员分享快速参考备忘单。">
<meta keywords="tailwindcss,reference,Quick,Reference,cheatsheet,cheat,sheet">
<meta name="author" content="jaywcjlove">
<meta name="license" content="MIT">
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
<link href="../style/style.css" rel="stylesheet">
<link href="../style/katex.css" rel="stylesheet">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/tailwindcss.md" class="edit" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script src="../js/dark.js?v=1.8.3"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="tailwind-css-备忘清单"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path d="M7.5 2.5c-1.026 0-1.908.277-2.6.87-.688.59-1.137 1.447-1.387 2.516a.5.5 0 0 0 .897.4c.316-.452.632-.723.936-.863.294-.135.611-.162.975-.065.366.098.65.386 1.095.87l.015.016c.336.365.745.81 1.305 1.156.582.359 1.305.6 2.264.6 1.026 0 1.908-.277 2.6-.87.688-.59 1.138-1.447 1.387-2.516a.5.5 0 0 0-.897-.4c-.316.452-.632.723-.936.863-.294.135-.611.162-.975.065-.366-.098-.65-.386-1.095-.87l-.015-.016c-.336-.365-.745-.81-1.305-1.156-.582-.359-1.305-.6-2.264-.6ZM4 7c-1.026 0-1.908.277-2.6.87C.712 8.46.263 9.317.013 10.386a.5.5 0 0 0 .897.4c.316-.452.632-.723.936-.863.294-.135.611-.162.975-.065.366.098.65.386 1.095.87l.015.016c.336.365.745.81 1.305 1.156.582.359 1.305.6 2.264.6 1.026 0 1.908-.277 2.6-.87.688-.59 1.138-1.447 1.387-2.516a.5.5 0 0 0-.897-.4c-.316.452-.632.723-.936.863-.294.135-.611.162-.975.065-.366-.098-.65-.386-1.095-.87l-.015-.016c-.335-.365-.745-.81-1.305-1.156C5.682 7.24 4.959 7 4 7Z" fill="currentColor"></path>
</svg>
<a aria-hidden="true" tabindex="-1" href="#tailwind-css-备忘清单"><span class="icon icon-link"></span></a>Tailwind CSS 备忘清单</h1><div class="wrap-body">
<p>使用此交互式备忘单快速查找所有类名和 CSS 属性</p>
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#layout">Layout</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#aspect-ratio">Aspect Ratio</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#container">Container</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#columns">Columns</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#break-after">Break After</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#break-before">Break Before</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#break-inside">Break Inside</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#box-decoration-break">Box Decoration Break</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#box-sizing">Box Sizing</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#display">Display</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#float">Float</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#clear">Clear</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#isolation">Isolation</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#object-fit">Object Fit</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#toprightbottomleft">Top/Right/Bottom/Left</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#object-position">Object Position</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#overflow">Overflow</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#visibility">Visibility</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#z-index">Z-index</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#overscroll-behavior">Overscroll Behavior</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#position">Position</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#sizing">Sizing</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#width">Width</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#min-width">Min-Width</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#max-width">Max-Width</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#height">Height</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#min-height">Min-Height</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#max-height">Max-Height</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#borders">Borders</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#border-radius">Border Radius</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#border-width">Border Width</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#border-color">Border Color</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#border-style">Border Style</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#divide-width">Divide Width</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#divide-color">Divide Color</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#divide-style">Divide Style</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#outline-width">Outline Width</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#outline-color">Outline Color</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#outline-style">Outline Style</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#outline-offset">Outline Offset</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#ring-width">Ring Width</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#ring-color">Ring Color</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#ring-offset-width">Ring Offset Width</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#ring-offset-color">Ring Offset Color</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#transitions--animation">Transitions &#x26; Animation</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#transition-property">Transition Property</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#transition-duration">Transition Duration</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#transition-timing-function">Transition Timing Function</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#transition-delay">Transition Delay</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#animation">Animation</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#tables">Tables</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#border-collapse">Border Collapse</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#border-spacing">Border Spacing</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#table-layout">Table Layout</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#backgrounds">Backgrounds</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#background-attachment">Background Attachment</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#background-color">Background Color</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#background-clip">Background Clip</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#background-origin">Background Origin</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#background-position">Background Position</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#background-repeat">Background Repeat</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#background-size">Background Size</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#gradient-color-stops">Gradient Color Stops</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#background-image">Background Image</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#spacing">Spacing</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#padding">Padding</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#margin">Margin</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#space-between">Space Between</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#svg">SVG</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#fill">Fill</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#stroke">Stroke</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#stroke-width">Stroke Width</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#typography">Typography</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#font-family">Font Family</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#font-size">Font Size</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#font-smoothing">Font Smoothing</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#font-style">Font Style</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#font-weight">Font Weight</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#font-variant-numeric">Font Variant Numeric</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#letter-spacing">Letter Spacing</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#line-height">Line Height</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#list-style-type">List Style Type</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#list-style-position">List Style Position</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-align">Text Align</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-decoration">Text Decoration</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-color">Text Color</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-decoration-color">Text Decoration Color</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-decoration-style">Text Decoration Style</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-decoration-thickness">Text Decoration Thickness</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-underline-offset">Text Underline Offset</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-transform">Text Transform</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-overflow">Text Overflow</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-indent">Text Indent</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#vertical-align">Vertical Align</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#whitespace">Whitespace</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#word-break">Word Break</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#content">Content</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#transforms">Transforms</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#scale">Scale</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#rotate">Rotate</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#translate">Translate</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#skew">Skew</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#transform-origin">Transform Origin</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#interactivity">Interactivity</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#accent-color">Accent Color</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#appearance">Appearance</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#pointer-events">Pointer Events</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#cursor">Cursor</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#caret-color">Caret Color</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#resize">Resize</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#scroll-behavior">Scroll Behavior</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#scroll-snap-align">Scroll Snap Align</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#scroll-snap-stop">Scroll Snap Stop</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#scroll-snap-type">Scroll Snap Type</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#scroll-margin">Scroll Margin</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#scroll-padding">Scroll Padding</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#touch-action">Touch Action</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#user-select">User Select</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#will-change">Will Change</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#filters">Filters</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#blur">Blur</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#brightness">Brightness</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#contrast">Contrast</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#drop-shadow">Drop Shadow</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#grayscale">Grayscale</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#hue-rotate">Hue Rotate</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#invert">Invert</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#saturate">Saturate</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#sepia">Sepia</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#backdrop-blur">Backdrop Blur</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#backdrop-brightness">Backdrop Brightness</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#backdrop-contrast">Backdrop Contrast</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#backdrop-grayscale">Backdrop Grayscale</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#backdrop-hue-rotate">Backdrop Hue Rotate</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#backdrop-invert">Backdrop Invert</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#backdrop-opacity">Backdrop Opacity</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#backdrop-saturate">Backdrop Saturate</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#backdrop-sepia">Backdrop Sepia</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#flexbox--grid">Flexbox &#x26; Grid</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flex-basis">Flex Basis</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flex-direction">Flex Direction</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flex-wrap">Flex Wrap</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flex">Flex</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flex-grow">Flex Grow</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flex-shrink">Flex Shrink</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#order">Order</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#grid-template-columns">Grid Template Columns</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#grid-column-startend">Grid Column Start/End</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#grid-template-rows">Grid Template Rows</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#grid-row-startend">Grid Row Start/End</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#grid-auto-flow">Grid Auto Flow</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#grid-auto-columns">Grid Auto Columns</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#grid-auto-rows">Grid Auto Rows</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#gap">Gap</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#justify-content">Justify Content</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#justify-items">Justify Items</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#justify-self">Justify Self</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#align-content">Align Content</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#align-items">Align Items</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#align-self">Align Self</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#place-content">Place Content</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#place-items">Place Items</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#place-self">Place Self</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#accessibility">Accessibility</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#screen-readers">Screen Readers</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="layout"><a aria-hidden="true" tabindex="-1" href="#layout"><span class="icon icon-link"></span></a>Layout</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="aspect-ratio"><a aria-hidden="true" tabindex="-1" href="#aspect-ratio"><span class="icon icon-link"></span></a>Aspect Ratio</h3><div class="wrap-body">
<p>用于控制元素纵横比的实用程序</p>
<table class="left-align"><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>aspect-auto</code></td><td><pur>aspect-ratio: auto;<pur></pur></pur></td></tr><tr><td align="left"><code>aspect-square</code></td><td><pur>aspect-ratio: 1 / 1;<pur></pur></pur></td></tr><tr><td align="left"><code>aspect-video</code></td><td><pur>aspect-ratio: 16 / 9;<pur></pur></pur></td></tr></tbody></table>
<!--rehype:className=left-align-->
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>iframe</span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>w-full aspect-video ...<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.youtube.com/...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>iframe</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="container"><a aria-hidden="true" tabindex="-1" href="#container"><span class="icon icon-link"></span></a>Container</h3><div class="wrap-body">
<p>设置最大宽度以匹配当前断点的最小宽度</p>
<table class="left-align"><thead><tr><th align="left">:--</th><th>--</th><th>--</th></tr></thead><tbody><tr><td align="left">container</td><td>none</td><td><pur>width: 100%</pur></td></tr><tr><td align="left"></td><td>sm (640px)</td><td><pur>max-width: 640px;</pur></td></tr><tr><td align="left"></td><td>md (768px)</td><td><pur>max-width: 768px;</pur></td></tr><tr><td align="left"></td><td>lg (1024px)</td><td><pur>max-width: 1024px;</pur></td></tr><tr><td align="left"></td><td>xl (1280px)</td><td><pur>max-width: 1280px;</pur></td></tr><tr><td align="left"></td><td>2xl (1536px)</td><td><pur>max-width: 1536px;</pur></td></tr></tbody></table>
<!--rehype:className=left-align-->
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>md:container md:mx-auto<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token comment">&#x3C;!-- ... --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist row-span-4"><div class="wrap-header h3wrap"><h3 id="columns"><a aria-hidden="true" tabindex="-1" href="#columns"><span class="icon icon-link"></span></a>Columns</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-4-->
<p>用于控制元素中列数的实用程序</p>
<table class="left-align"><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>columns-1</code></td><td><pur>columns: 1;</pur></td></tr><tr><td align="left"><code>columns-2</code></td><td><pur>columns: 2;</pur></td></tr><tr><td align="left"><code>columns-3</code></td><td><pur>columns: 3;</pur></td></tr><tr><td align="left"><code>columns-4</code></td><td><pur>columns: 4;</pur></td></tr><tr><td align="left"><code>columns-5</code></td><td><pur>columns: 5;</pur></td></tr><tr><td align="left"><code>columns-6</code></td><td><pur>columns: 6;</pur></td></tr><tr><td align="left"><code>columns-7</code></td><td><pur>columns: 7;</pur></td></tr><tr><td align="left"><code>columns-8</code></td><td><pur>columns: 8;</pur></td></tr><tr><td align="left"><code>columns-9</code></td><td><pur>columns: 9;</pur></td></tr><tr><td align="left"><code>columns-10</code></td><td><pur>columns: 10;</pur></td></tr><tr><td align="left"><code>columns-11</code></td><td><pur>columns: 11;</pur></td></tr><tr><td align="left"><code>columns-12</code></td><td><pur>columns: 12;</pur></td></tr><tr><td align="left"><code>columns-auto</code></td><td><pur>columns: auto;</pur></td></tr><tr><td align="left"><code>columns-3xs</code></td><td><pur>columns: 16rem;</pur> /<em>256px</em>/</td></tr><tr><td align="left"><code>columns-2xs</code></td><td><pur>columns: 18rem;</pur> /<em>288px</em>/</td></tr><tr><td align="left"><code>columns-xs</code></td><td><pur>columns: 20rem;</pur> /<em>320px</em>/</td></tr><tr><td align="left"><code>columns-sm</code></td><td><pur>columns: 24rem;</pur> /<em>384px</em>/</td></tr><tr><td align="left"><code>columns-md</code></td><td><pur>columns: 28rem;</pur> /<em>448px</em>/</td></tr><tr><td align="left"><code>columns-lg</code></td><td><pur>columns: 32rem;</pur> /<em>512px</em>/</td></tr><tr><td align="left"><code>columns-xl</code></td><td><pur>columns: 36rem;</pur> /<em>576px</em>/</td></tr><tr><td align="left"><code>columns-2xl</code></td><td><pur>columns: 42rem;</pur> /<em>672px</em>/</td></tr><tr><td align="left"><code>columns-3xl</code></td><td><pur>columns: 48rem;</pur> /<em>768px</em>/</td></tr><tr><td align="left"><code>columns-4xl</code></td><td><pur>columns: 56rem;</pur> /<em>896px</em>/</td></tr><tr><td align="left"><code>columns-5xl</code></td><td><pur>columns: 64rem;</pur> /<em>1024px</em>/</td></tr><tr><td align="left"><code>columns-6xl</code></td><td><pur>columns: 72rem;</pur> /<em>1152px</em>/</td></tr><tr><td align="left"><code>columns-7xl</code></td><td><pur>columns: 80rem;</pur> /<em>1280px</em>/</td></tr></tbody></table>
<!--rehype:className=left-align-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="break-after"><a aria-hidden="true" tabindex="-1" href="#break-after"><span class="icon icon-link"></span></a>Break After</h3><div class="wrap-body">
<p>用于控制列或页面应如何在元素后断开的实用程序</p>
<table class="left-align"><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>break-after-auto</code></td><td><pur>break-after: auto;</pur></td></tr><tr><td align="left"><code>break-after-avoid</code></td><td><pur>break-after: avoid;</pur></td></tr><tr><td align="left"><code>break-after-all</code></td><td><pur>break-after: all;</pur></td></tr><tr><td align="left"><code>break-after-avoid-page</code></td><td><pur>break-after: avoid-page;</pur></td></tr><tr><td align="left"><code>break-after-page</code></td><td><pur>break-after: page;</pur></td></tr><tr><td align="left"><code>break-after-left</code></td><td><pur>break-after: left;</pur></td></tr><tr><td align="left"><code>break-after-right</code></td><td><pur>break-after: right;</pur></td></tr><tr><td align="left"><code>break-after-column</code></td><td><pur>break-after: column;</pur></td></tr></tbody></table>
<!--rehype:className=left-align-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="break-before"><a aria-hidden="true" tabindex="-1" href="#break-before"><span class="icon icon-link"></span></a>Break Before</h3><div class="wrap-body">
<p>用于控制列或页面在元素之前应如何中断的实用程序</p>
<table class="left-align"><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>break-before-auto</code></td><td><pur>break-before: auto;</pur></td></tr><tr><td align="left"><code>break-before-avoid</code></td><td><pur>break-before: avoid;</pur></td></tr><tr><td align="left"><code>break-before-all</code></td><td><pur>break-before: all;</pur></td></tr><tr><td align="left"><code>break-before-avoid-page</code></td><td><pur> break-before: avoid-page;</pur></td></tr><tr><td align="left"><code>break-before-page</code></td><td><pur>break-before: page;</pur></td></tr><tr><td align="left"><code>break-before-left</code></td><td><pur>break-before: left;</pur></td></tr><tr><td align="left"><code>break-before-right</code></td><td><pur>break-before: right;</pur></td></tr><tr><td align="left"><code>break-before-column</code></td><td><pur>break-before: column;</pur></td></tr></tbody></table>
<!--rehype:className=left-align-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="break-inside"><a aria-hidden="true" tabindex="-1" href="#break-inside"><span class="icon icon-link"></span></a>Break Inside</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>用于控制列或页面在元素内的拆分方式的实用程序</p>
<table class="left-align"><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>break-inside-auto</code></td><td><pur>break-inside: auto;</pur></td></tr><tr><td align="left"><code>break-inside-avoid</code></td><td><pur>break-inside: avoid;</pur></td></tr><tr><td align="left"><code>break-inside-avoid-page</code></td><td><pur>break-inside: avoid-page;</pur></td></tr><tr><td align="left"><code>break-inside-avoid-column</code></td><td><pur>break-inside: avoid-column;</pur></td></tr></tbody></table>
<!--rehype:className=left-align-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="box-decoration-break"><a aria-hidden="true" tabindex="-1" href="#box-decoration-break"><span class="icon icon-link"></span></a>Box Decoration Break</h3><div class="wrap-body">
<p>用于控制应如何跨多行、多列或多页呈现元素片段的实用程序</p>
<table class="left-align"><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>box-decoration-clone</code></td><td><pur>box-decoration-break: clone;</pur></td></tr><tr><td align="left"><code>box-decoration-slice</code></td><td><pur>box-decoration-break: slice;</pur></td></tr></tbody></table>
<!--rehype:className=left-align-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="box-sizing"><a aria-hidden="true" tabindex="-1" href="#box-sizing"><span class="icon icon-link"></span></a>Box Sizing</h3><div class="wrap-body">
<p>用于控制浏览器应如何计算元素总大小的实用程序</p>
<table class="left-align"><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>box-border</code></td><td><pur>box-sizing: border-box;</pur></td></tr><tr><td align="left"><code>box-content</code></td><td><pur>box-sizing: content-box;</pur></td></tr></tbody></table>
<!--rehype:className=left-align-->
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="display"><a aria-hidden="true" tabindex="-1" href="#display"><span class="icon icon-link"></span></a>Display</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<p>用于控制元素显示框类型的实用程序</p>
<table class="left-align"><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>block</code></td><td><pur>display: block;</pur></td></tr><tr><td align="left"><code>inline-block</code></td><td><pur>display: inline-block;</pur></td></tr><tr><td align="left"><code>inline</code></td><td><pur>display: inline;</pur></td></tr><tr><td align="left"><code>flex</code></td><td><pur>display: flex;</pur></td></tr><tr><td align="left"><code>inline-flex</code></td><td><pur>display: inline-flex;</pur></td></tr><tr><td align="left"><code>table</code></td><td><pur>display: table;</pur></td></tr><tr><td align="left"><code>inline-table</code></td><td><pur>display: inline-table;</pur></td></tr><tr><td align="left"><code>table-caption</code></td><td><pur>display: table-caption;</pur></td></tr><tr><td align="left"><code>table-cell</code></td><td><pur>display: table-cell;</pur></td></tr><tr><td align="left"><code>table-column</code></td><td><pur>display: table-column;</pur></td></tr><tr><td align="left"><code>table-column-group</code></td><td><pur>display: table-column-group;</pur></td></tr><tr><td align="left"><code>table-footer-group</code></td><td><pur>display: table-footer-group;</pur></td></tr><tr><td align="left"><code>table-header-group</code></td><td><pur>display: table-header-group;</pur></td></tr><tr><td align="left"><code>table-row-group</code></td><td><pur>display: table-row-group;</pur></td></tr><tr><td align="left"><code>table-row</code></td><td><pur>display: table-row;</pur></td></tr><tr><td align="left"><code>flow-root</code></td><td><pur>display: flow-root;</pur></td></tr><tr><td align="left"><code>grid</code></td><td><pur>display: grid;</pur></td></tr><tr><td align="left"><code>inline-grid</code></td><td><pur>display: inline-grid;</pur></td></tr><tr><td align="left"><code>contents</code></td><td><pur>display: contents;</pur></td></tr><tr><td align="left"><code>list-item</code></td><td><pur>display: list-item;</pur></td></tr><tr><td align="left"><code>hidden</code></td><td><pur>display: none;</pur></td></tr></tbody></table>
<!--rehype:className=left-align-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="float"><a aria-hidden="true" tabindex="-1" href="#float"><span class="icon icon-link"></span></a>Float</h3><div class="wrap-body">
<p>用于控制元素周围内容包装的实用程序</p>
<ul class="style-none cols-3">
<li>float-right</li>
<li>float-left</li>
<li>float-none</li>
</ul>
<!--rehype:className=style-none cols-3-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="clear"><a aria-hidden="true" tabindex="-1" href="#clear"><span class="icon icon-link"></span></a>Clear</h3><div class="wrap-body">
<p>用于控制元素周围内容包装的实用程序</p>
<ul class="style-none cols-2">
<li>clear-left</li>
<li>clear-right</li>
<li>clear-both</li>
<li>clear-none</li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="isolation"><a aria-hidden="true" tabindex="-1" href="#isolation"><span class="icon icon-link"></span></a>Isolation</h3><div class="wrap-body">
<p>用于控制元素是否应显式创建新的堆叠上下文的实用程序</p>
<table><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left">isolate</td><td>isolation: isolate;</td></tr><tr><td align="left">isolation-auto</td><td>isolation: auto;</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="object-fit"><a aria-hidden="true" tabindex="-1" href="#object-fit"><span class="icon icon-link"></span></a>Object Fit</h3><div class="wrap-body">
<p>用于控制如何调整替换元素内容大小的实用程序</p>
<ul class="style-none cols-2">
<li>object-contain</li>
<li>object-cover</li>
<li>object-fill</li>
<li>object-none</li>
<li>object-scale-down</li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-7"><div class="wrap-header h3wrap"><h3 id="toprightbottomleft"><a aria-hidden="true" tabindex="-1" href="#toprightbottomleft"><span class="icon icon-link"></span></a>Top/Right/Bottom/Left</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2 row-span-7-->
<p>用于控制定位元素放置的实用程序</p>
<ul class="style-none cols-5">
<li>inset-0</li>
<li>inset-x-0</li>
<li>inset-y-0</li>
<li>top-0</li>
<li>right-0</li>
<li>bottom-0</li>
<li>left-0</li>
<li>inset-px</li>
<li>inset-x-px</li>
<li>inset-y-px</li>
<li>top-px</li>
<li>right-px</li>
<li>bottom-px</li>
<li>left-px</li>
<li>inset-0.5</li>
<li>inset-x-0.5</li>
<li>inset-y-0.5</li>
<li>top-0.5</li>
<li>right-0.5</li>
<li>bottom-0.5</li>
<li>left-0.5</li>
<li>inset-1</li>
<li>inset-x-1</li>
<li>inset-y-1</li>
<li>top-1</li>
<li>right-1</li>
<li>bottom-1</li>
<li>left-1</li>
<li>inset-1.5</li>
<li>inset-x-1.5</li>
<li>inset-y-1.5</li>
<li>top-1.5</li>
<li>right-1.5</li>
<li>bottom-1.5</li>
<li>left-1.5</li>
<li>inset-2</li>
<li>inset-x-2</li>
<li>inset-y-2</li>
<li>top-2</li>
<li>right-2</li>
<li>bottom-2</li>
<li>left-2</li>
<li>inset-2.5</li>
<li>inset-x-2.5</li>
<li>inset-y-2.5</li>
<li>top-2.5</li>
<li>right-2.5</li>
<li>bottom-2.5</li>
<li>left-2.5</li>
<li>inset-3</li>
<li>inset-x-3</li>
<li>inset-y-3</li>
<li>top-3</li>
<li>right-3</li>
<li>bottom-3</li>
<li>left-3</li>
<li>inset-3.5</li>
<li>inset-x-3.5</li>
<li>inset-y-3.5</li>
<li>top-3.5</li>
<li>right-3.5</li>
<li>bottom-3.5</li>
<li>left-3.5</li>
<li>inset-4</li>
<li>inset-x-4</li>
<li>inset-y-4</li>
<li>top-4</li>
<li>right-4</li>
<li>bottom-4</li>
<li>left-4</li>
<li>inset-5</li>
<li>inset-x-5</li>
<li>inset-y-5</li>
<li>top-5</li>
<li>right-5</li>
<li>bottom-5</li>
<li>left-5</li>
<li>inset-6</li>
<li>inset-x-6</li>
<li>inset-y-6</li>
<li>top-6</li>
<li>right-6</li>
<li>bottom-6</li>
<li>left-6</li>
<li>inset-7</li>
<li>inset-x-7</li>
<li>inset-y-7</li>
<li>top-7</li>
<li>right-7</li>
<li>bottom-7</li>
<li>left-7</li>
<li>inset-8</li>
<li>inset-x-8</li>
<li>inset-y-8</li>
<li>top-8</li>
<li>right-8</li>
<li>bottom-8</li>
<li>left-8</li>
<li>inset-9</li>
<li>inset-x-9</li>
<li>inset-y-9</li>
<li>top-9</li>
<li>right-9</li>
<li>bottom-9</li>
<li>left-9</li>
<li>inset-10</li>
<li>inset-x-10</li>
<li>inset-y-10</li>
<li>top-10</li>
<li>right-10</li>
<li>bottom-10</li>
<li>left-10</li>
<li>inset-11</li>
<li>inset-x-11</li>
<li>inset-y-11</li>
<li>top-11</li>
<li>right-11</li>
<li>bottom-11</li>
<li>left-11</li>
<li>inset-12</li>
<li>inset-x-12</li>
<li>inset-y-12</li>
<li>top-12</li>
<li>right-12</li>
<li>bottom-12</li>
<li>left-12</li>
<li>inset-14</li>
<li>inset-x-14</li>
<li>inset-y-14</li>
<li>top-14</li>
<li>right-14</li>
<li>bottom-14</li>
<li>left-14</li>
<li>inset-16</li>
<li>inset-x-16</li>
<li>inset-y-16</li>
<li>top-16</li>
<li>right-16</li>
<li>bottom-16</li>
<li>left-16</li>
<li>inset-20</li>
<li>inset-x-20</li>
<li>inset-y-20</li>
<li>top-20</li>
<li>right-20</li>
<li>bottom-20</li>
<li>left-20</li>
<li>inset-24</li>
<li>inset-x-24</li>
<li>inset-y-24</li>
<li>top-24</li>
<li>right-24</li>
<li>bottom-24</li>
<li>left-24</li>
<li>inset-28</li>
<li>inset-x-28</li>
<li>inset-y-28</li>
<li>top-28</li>
<li>right-28</li>
<li>bottom-28</li>
<li>left-28</li>
<li>inset-32</li>
<li>inset-x-32</li>
<li>inset-y-32</li>
<li>top-32</li>
<li>right-32</li>
<li>bottom-32</li>
<li>left-32</li>
<li>inset-36</li>
<li>inset-x-36</li>
<li>inset-y-36</li>
<li>top-36</li>
<li>right-36</li>
<li>bottom-36</li>
<li>left-36</li>
<li>inset-40</li>
<li>inset-x-40</li>
<li>inset-y-40</li>
<li>top-40</li>
<li>right-40</li>
<li>bottom-40</li>
<li>left-40</li>
<li>inset-44</li>
<li>inset-x-44</li>
<li>inset-y-44</li>
<li>top-44</li>
<li>right-44</li>
<li>bottom-44</li>
<li>left-44</li>
<li>inset-48</li>
<li>inset-x-48</li>
<li>inset-y-48</li>
<li>top-48</li>
<li>right-48</li>
<li>bottom-48</li>
<li>left-48</li>
<li>inset-52</li>
<li>inset-x-52</li>
<li>inset-y-52</li>
<li>top-52</li>
<li>right-52</li>
<li>bottom-52</li>
<li>left-52</li>
<li>inset-56</li>
<li>inset-x-56</li>
<li>inset-y-56</li>
<li>top-56</li>
<li>right-56</li>
<li>bottom-56</li>
<li>left-56</li>
<li>inset-60</li>
<li>inset-x-60</li>
<li>inset-y-60</li>
<li>top-60</li>
<li>right-60</li>
<li>bottom-60</li>
<li>left-60</li>
<li>inset-64</li>
<li>inset-x-64</li>
<li>inset-y-64</li>
<li>top-64</li>
<li>right-64</li>
<li>bottom-64</li>
<li>left-64</li>
<li>inset-72</li>
<li>inset-x-72</li>
<li>inset-y-72</li>
<li>top-72</li>
<li>right-72</li>
<li>bottom-72</li>
<li>left-72</li>
<li>inset-80</li>
<li>inset-x-80</li>
<li>inset-y-80</li>
<li>top-80</li>
<li>right-80</li>
<li>bottom-80</li>
<li>left-80</li>
<li>inset-96</li>
<li>inset-x-96</li>
<li>inset-y-96</li>
<li>top-96</li>
<li>right-96</li>
<li>bottom-96</li>
<li>left-96</li>
<li>inset-auto</li>
<li>inset-1/2</li>
<li>inset-1/3</li>
<li>inset-2/3</li>
<li>inset-1/4</li>
<li>inset-2/4</li>
<li>inset-3/4</li>
<li>inset-full</li>
<li>inset-x-auto</li>
<li>inset-x-1/2</li>
<li>inset-x-1/3</li>
<li>inset-x-2/3</li>
<li>inset-x-1/4</li>
<li>inset-x-2/4</li>
<li>inset-x-3/4</li>
<li>inset-x-full</li>
<li>inset-y-auto</li>
<li>inset-y-1/2</li>
<li>inset-y-1/3</li>
<li>inset-y-2/3</li>
<li>inset-y-1/4</li>
<li>inset-y-2/4</li>
<li>inset-y-3/4</li>
<li>inset-y-full</li>
<li>top-auto</li>
<li>top-1/2</li>
<li>top-1/3</li>
<li>top-2/3</li>
<li>top-1/4</li>
<li>top-2/4</li>
<li>top-3/4</li>
<li>top-full</li>
<li>right-auto</li>
<li>right-1/2</li>
<li>right-1/3</li>
<li>right-2/3</li>
<li>right-1/4</li>
<li>right-2/4</li>
<li>right-3/4</li>
<li>right-full</li>
<li>bottom-auto</li>
<li>bottom-1/2</li>
<li>bottom-1/3</li>
<li>bottom-2/3</li>
<li>bottom-1/4</li>
<li>bottom-2/4</li>
<li>bottom-3/4</li>
<li>bottom-full</li>
<li>left-auto</li>
<li>left-1/2</li>
<li>left-1/3</li>
<li>left-2/3</li>
<li>left-1/4</li>
<li>left-2/4</li>
<li>left-3/4</li>
<li>left-full</li>
</ul>
<!--rehype:className=style-none cols-5-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="object-position"><a aria-hidden="true" tabindex="-1" href="#object-position"><span class="icon icon-link"></span></a>Object Position</h3><div class="wrap-body">
<p>用于控制替换元素的内容在其容器中的定位方式的实用程序</p>
<ul class="style-none cols-2">
<li>object-bottom</li>
<li>object-center</li>
<li>object-left</li>
<li>object-left-bottom</li>
<li>object-left-top</li>
<li>object-right</li>
<li>object-right-bottom</li>
<li>object-right-top</li>
<li>object-top</li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="overflow"><a aria-hidden="true" tabindex="-1" href="#overflow"><span class="icon icon-link"></span></a>Overflow</h3><div class="wrap-body">
<p>用于控制元素如何处理对于容器来说太大的内容的实用程序</p>
<ul class="style-none cols-2">
<li>overflow-auto</li>
<li>overflow-hidden</li>
<li>overflow-clip</li>
<li>overflow-visible</li>
<li>overflow-scroll</li>
<li>overflow-x-auto</li>
<li>overflow-y-auto</li>
<li>overflow-x-hidden</li>
<li>overflow-y-hidden</li>
<li>overflow-x-clip</li>
<li>overflow-y-clip</li>
<li>overflow-x-visible</li>
<li>overflow-y-visible</li>
<li>overflow-x-scroll</li>
<li>overflow-y-scroll</li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="visibility"><a aria-hidden="true" tabindex="-1" href="#visibility"><span class="icon icon-link"></span></a>Visibility</h3><div class="wrap-body">
<p>用于控制元素可见性的实用程序</p>
<ul class="style-none cols-2">
<li>visible</li>
<li>invisible</li>
<li>collapse</li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="z-index"><a aria-hidden="true" tabindex="-1" href="#z-index"><span class="icon icon-link"></span></a>Z-index</h3><div class="wrap-body">
<p>用于控制元素堆叠顺序的实用程序</p>
<ul class="style-none cols-3">
<li>z-0</li>
<li>z-10</li>
<li>z-20</li>
<li>z-30</li>
<li>z-40</li>
<li>z-50</li>
<li>z-auto</li>
</ul>
<!--rehype:className=style-none cols-3-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="overscroll-behavior"><a aria-hidden="true" tabindex="-1" href="#overscroll-behavior"><span class="icon icon-link"></span></a>Overscroll Behavior</h3><div class="wrap-body">
<p>用于控制浏览器到达滚动区域边界时的行为方式的实用程序</p>
<ul class="style-none cols-2">
<li>overscroll-auto</li>
<li>overscroll-contain</li>
<li>overscroll-none</li>
<li>overscroll-y-auto</li>
<li>overscroll-y-contain</li>
<li>overscroll-y-none</li>
<li>overscroll-x-auto</li>
<li>overscroll-x-contain</li>
<li>overscroll-x-none</li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="position"><a aria-hidden="true" tabindex="-1" href="#position"><span class="icon icon-link"></span></a>Position</h3><div class="wrap-body">
<p>用于控制元素在 DOM 中的定位方式的实用程序</p>
<ul class="style-none cols-3">
<li>static</li>
<li>fixed</li>
<li>absolute</li>
<li>relative</li>
<li>sticky</li>
</ul>
<!--rehype:className=style-none cols-3-->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="sizing"><a aria-hidden="true" tabindex="-1" href="#sizing"><span class="icon icon-link"></span></a>Sizing</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-4"><div class="wrap-header h3wrap"><h3 id="width"><a aria-hidden="true" tabindex="-1" href="#width"><span class="icon icon-link"></span></a>Width</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-4-->
<p>用于设置元素宽度的实用程序</p>
<ul class="style-none cols-3">
<li>w-0</li>
<li>w-px</li>
<li>w-0.5</li>
<li>w-1</li>
<li>w-1.5</li>
<li>w-2</li>
<li>w-2.5</li>
<li>w-3</li>
<li>w-3.5</li>
<li>w-4</li>
<li>w-5</li>
<li>w-6</li>
<li>w-7</li>
<li>w-8</li>
<li>w-9</li>
<li>w-10</li>
<li>w-11</li>
<li>w-12</li>
<li>w-14</li>
<li>w-16</li>
<li>w-20</li>
<li>w-24</li>
<li>w-28</li>
<li>w-32</li>
<li>w-36</li>
<li>w-40</li>
<li>w-44</li>
<li>w-48</li>
<li>w-52</li>
<li>w-56</li>
<li>w-60</li>
<li>w-64</li>
<li>w-72</li>
<li>w-80</li>
<li>w-96</li>
<li>w-auto</li>
<li>w-1/2</li>
<li>w-1/3</li>
<li>w-2/3</li>
<li>w-1/4</li>
<li>w-2/4</li>
<li>w-3/4</li>
<li>w-1/5</li>
<li>w-2/5</li>
<li>w-3/5</li>
<li>w-4/5</li>
<li>w-1/6</li>
<li>w-2/6</li>
<li>w-3/6</li>
<li>w-4/6</li>
<li>w-5/6</li>
<li>w-1/12</li>
<li>w-2/12</li>
<li>w-3/12</li>
<li>w-4/12</li>
<li>w-5/12</li>
<li>w-6/12</li>
<li>w-7/12</li>
<li>w-8/12</li>
<li>w-9/12</li>
<li>w-10/12</li>
<li>w-11/12</li>
<li>w-full</li>
<li>w-screen</li>
<li>w-min</li>
<li>w-max</li>
<li>w-fit</li>
</ul>
<!--rehype:className=style-none cols-3-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="min-width"><a aria-hidden="true" tabindex="-1" href="#min-width"><span class="icon icon-link"></span></a>Min-Width</h3><div class="wrap-body">
<p>用于设置元素的最小宽度的实用程序</p>
<ul class="style-none cols-3">
<li>min-w-0</li>
<li>min-w-full</li>
<li>min-w-min</li>
<li>min-w-max</li>
<li>min-w-fit</li>
</ul>
<!--rehype:className=style-none cols-3-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="max-width"><a aria-hidden="true" tabindex="-1" href="#max-width"><span class="icon icon-link"></span></a>Max-Width</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>用于设置元素最大宽度的实用程序</p>
<ul class="style-none cols-2">
<li>max-w-0</li>
<li>max-w-none</li>
<li>max-w-xs</li>
<li>max-w-sm</li>
<li>max-w-md</li>
<li>max-w-lg</li>
<li>max-w-xl</li>
<li>max-w-2xl</li>
<li>max-w-3xl</li>
<li>max-w-4xl</li>
<li>max-w-5xl</li>
<li>max-w-6xl</li>
<li>max-w-7xl</li>
<li>max-w-full</li>
<li>max-w-min</li>
<li>max-w-max</li>
<li>max-w-fit</li>
<li>max-w-prose</li>
<li>max-w-screen-sm</li>
<li>max-w-screen-md</li>
<li>max-w-screen-lg</li>
<li>max-w-screen-xl</li>
<li>max-w-screen-2xl</li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="height"><a aria-hidden="true" tabindex="-1" href="#height"><span class="icon icon-link"></span></a>Height</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>用于设置元素高度的实用程序</p>
<ul class="style-none cols-4">
<li>h-0</li>
<li>h-px</li>
<li>h-0.5</li>
<li>h-1</li>
<li>h-1.5</li>
<li>h-2</li>
<li>h-2.5</li>
<li>h-3</li>
<li>h-3.5</li>
<li>h-4</li>
<li>h-5</li>
<li>h-6</li>
<li>h-7</li>
<li>h-8</li>
<li>h-9</li>
<li>h-10</li>
<li>h-11</li>
<li>h-12</li>
<li>h-14</li>
<li>h-16</li>
<li>h-20</li>
<li>h-24</li>
<li>h-28</li>
<li>h-32</li>
<li>h-36</li>
<li>h-40</li>
<li>h-44</li>
<li>h-48</li>
<li>h-52</li>
<li>h-56</li>
<li>h-60</li>
<li>h-64</li>
<li>h-72</li>
<li>h-80</li>
<li>h-96</li>
<li>h-auto</li>
<li>h-1/2</li>
<li>h-1/3</li>
<li>h-2/3</li>
<li>h-1/4</li>
<li>h-2/4</li>
<li>h-3/4</li>
<li>h-1/5</li>
<li>h-2/5</li>
<li>h-3/5</li>
<li>h-4/5</li>
<li>h-1/6</li>
<li>h-2/6</li>
<li>h-3/6</li>
<li>h-4/6</li>
<li>h-5/6</li>
<li>h-full</li>
<li>h-screen</li>
<li>h-min</li>
<li>h-max</li>
<li>h-fit</li>
</ul>
<!--rehype:className=style-none cols-4-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="min-height"><a aria-hidden="true" tabindex="-1" href="#min-height"><span class="icon icon-link"></span></a>Min-Height</h3><div class="wrap-body">
<p>用于设置元素的最小高度的实用程序</p>
<ul class="style-none cols-3">
<li>min-h-0</li>
<li>min-h-full</li>
<li>min-h-screen</li>
<li>min-h-min</li>
<li>min-h-max</li>
<li>min-h-fit</li>
</ul>
<!--rehype:className=style-none cols-3-->
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="max-height"><a aria-hidden="true" tabindex="-1" href="#max-height"><span class="icon icon-link"></span></a>Max-Height</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<p>用于设置元素最大高度的实用程序</p>
<ul class="style-none cols-6">
<li>max-h-0</li>
<li>max-h-px</li>
<li>max-h-0.5</li>
<li>max-h-1</li>
<li>max-h-1.5</li>
<li>max-h-2</li>
<li>max-h-2.5</li>
<li>max-h-3</li>
<li>max-h-3.5</li>
<li>max-h-4</li>
<li>max-h-5</li>
<li>max-h-6</li>
<li>max-h-7</li>
<li>max-h-8</li>
<li>max-h-9</li>
<li>max-h-10</li>
<li>max-h-11</li>
<li>max-h-12</li>
<li>max-h-14</li>
<li>max-h-16</li>
<li>max-h-20</li>
<li>max-h-24</li>
<li>max-h-28</li>
<li>max-h-32</li>
<li>max-h-36</li>
<li>max-h-40</li>
<li>max-h-44</li>
<li>max-h-48</li>
<li>max-h-52</li>
<li>max-h-56</li>
<li>max-h-60</li>
<li>max-h-64</li>
<li>max-h-72</li>
<li>max-h-80</li>
<li>max-h-96</li>
<li>max-h-full</li>
<li>max-h-screen</li>
<li>max-h-min</li>
<li>max-h-max</li>
<li>max-h-fit</li>
</ul>
<!--rehype:className=style-none cols-6-->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="borders"><a aria-hidden="true" tabindex="-1" href="#borders"><span class="icon icon-link"></span></a>Borders</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-4"><div class="wrap-header h3wrap"><h3 id="border-radius"><a aria-hidden="true" tabindex="-1" href="#border-radius"><span class="icon icon-link"></span></a>Border Radius</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-4-->
<p>用于控制元素边界半径的实用程序</p>
<ul class="style-none cols-2">
<li>rounded-none</li>
<li>rounded-sm</li>
<li>rounded</li>
<li>rounded-md</li>
<li>rounded-lg</li>
<li>rounded-xl</li>
<li>rounded-2xl</li>
<li>rounded-3xl</li>
<li>rounded-full</li>
<li>rounded-t-none</li>
<li>rounded-t-sm</li>
<li>rounded-t</li>
<li>rounded-t-md</li>
<li>rounded-t-lg</li>
<li>rounded-t-xl</li>
<li>rounded-t-2xl</li>
<li>rounded-t-3xl</li>
<li>rounded-t-full</li>
<li>rounded-r-none</li>
<li>rounded-r-sm</li>
<li>rounded-r</li>
<li>rounded-r-md</li>
<li>rounded-r-lg</li>
<li>rounded-r-xl</li>
<li>rounded-r-2xl</li>
<li>rounded-r-3xl</li>
<li>rounded-r-full</li>
<li>rounded-b-none</li>
<li>rounded-b-sm</li>
<li>rounded-b</li>
<li>rounded-b-md</li>
<li>rounded-b-lg</li>
<li>rounded-b-xl</li>
<li>rounded-b-2xl</li>
<li>rounded-b-3xl</li>
<li>rounded-b-full</li>
<li>rounded-l-none</li>
<li>rounded-l-sm</li>
<li>rounded-l</li>
<li>rounded-l-md</li>
<li>rounded-l-lg</li>
<li>rounded-l-xl</li>
<li>rounded-l-2xl</li>
<li>rounded-l-3xl</li>
<li>rounded-l-full</li>
<li>rounded-tl-none</li>
<li>rounded-tl-sm</li>
<li>rounded-tl</li>
<li>rounded-tl-md</li>
<li>rounded-tl-lg</li>
<li>rounded-tl-xl</li>
<li>rounded-tl-2xl</li>
<li>rounded-tl-3xl</li>
<li>rounded-tl-full</li>
<li>rounded-tr-none</li>
<li>rounded-tr-sm</li>
<li>rounded-tr</li>
<li>rounded-tr-md</li>
<li>rounded-tr-lg</li>
<li>rounded-tr-xl</li>
<li>rounded-tr-2xl</li>
<li>rounded-tr-3xl</li>
<li>rounded-tr-full</li>
<li>rounded-br-none</li>
<li>rounded-br-sm</li>
<li>rounded-br</li>
<li>rounded-br-md</li>
<li>rounded-br-lg</li>
<li>rounded-br-xl</li>
<li>rounded-br-2xl</li>
<li>rounded-br-3xl</li>
<li>rounded-br-full</li>
<li>rounded-bl-none</li>
<li>rounded-bl-sm</li>
<li>rounded-bl</li>
<li>rounded-bl-md</li>
<li>rounded-bl-lg</li>
<li>rounded-bl-xl</li>
<li>rounded-bl-2xl</li>
<li>rounded-bl-3xl</li>
<li>rounded-bl-full</li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="border-width"><a aria-hidden="true" tabindex="-1" href="#border-width"><span class="icon icon-link"></span></a>Border Width</h3><div class="wrap-body">
<p>用于控制元素边框宽度的实用程序</p>
<ul class="style-none cols-3">
<li>border-0</li>
<li>border-2</li>
<li>border-4</li>
<li>border-8</li>
<li>border</li>
<li>border-x-0</li>
<li>border-x-2</li>
<li>border-x-4</li>
<li>border-x-8</li>
<li>border-x</li>
<li>border-y-0</li>
<li>border-y-2</li>
<li>border-y-4</li>
<li>border-y-8</li>
<li>border-y</li>
<li>border-t-0</li>
<li>border-t-2</li>
<li>border-t-4</li>
<li>border-t-8</li>
<li>border-t</li>
<li>border-r-0</li>
<li>border-r-2</li>
<li>border-r-4</li>
<li>border-r-8</li>
<li>border-r</li>
<li>border-b-0</li>
<li>border-b-2</li>
<li>border-b-4</li>
<li>border-b-8</li>
<li>border-b</li>
<li>border-l-0</li>
<li>border-l-2</li>
<li>border-l-4</li>
<li>border-l-8</li>
<li>border-l</li>
</ul>
<!--rehype:className=style-none cols-3-->
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="border-color"><a aria-hidden="true" tabindex="-1" href="#border-color"><span class="icon icon-link"></span></a>Border Color</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<p>用于控制元素边框颜色的实用程序</p>
<ul class="style-none cols-2">
<li>border-inherit</li>
<li>border-current</li>
<li>border-transparent</li>
<li>border-black</li>
<li>border-white</li>
<li>border-slate-50</li>
<li>border-slate-100</li>
<li>border-slate-200</li>
<li>border-slate-300</li>
<li>border-slate-400</li>
<li>border-slate-500</li>
<li>border-slate-600</li>
<li>border-slate-700</li>
<li>border-slate-800</li>
<li>border-slate-900</li>
<li>border-gray-50</li>
<li>border-gray-100</li>
<li>border-gray-200</li>
<li>border-gray-300</li>
<li>border-gray-400</li>
<li>border-gray-500</li>
<li>border-gray-600</li>
<li>border-gray-700</li>
<li>border-gray-800</li>
<li>border-gray-900</li>
<li>border-zinc-50</li>
<li>border-zinc-100</li>
<li>border-zinc-200</li>
<li>border-zinc-300</li>
<li>border-zinc-400</li>
<li>border-zinc-500</li>
<li>border-zinc-600</li>
<li>border-zinc-700</li>
<li>border-zinc-800</li>
<li>border-zinc-900</li>
<li>border-neutral-50</li>
<li>border-neutral-100</li>
<li>border-neutral-200</li>
<li>border-neutral-300</li>
<li>border-neutral-400</li>
<li>border-neutral-500</li>
<li>border-neutral-600</li>
<li>border-neutral-700</li>
<li>border-neutral-800</li>
<li>border-neutral-900</li>
<li>border-stone-50</li>
<li>border-stone-100</li>
<li>border-stone-200</li>
<li>border-stone-300</li>
<li>border-stone-400</li>
<li>border-stone-500</li>
<li>border-stone-600</li>
<li>border-stone-700</li>
<li>border-stone-800</li>
<li>border-stone-900</li>
<li>border-red-50</li>
<li>border-red-100</li>
<li>border-red-200</li>
<li>border-red-300</li>
<li>border-red-400</li>
<li>border-red-500</li>
<li>border-red-600</li>
<li>border-red-700</li>
<li>border-red-800</li>
<li><a href="https://tailwindcss.com/docs/border-color">...</a></li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="border-style"><a aria-hidden="true" tabindex="-1" href="#border-style"><span class="icon icon-link"></span></a>Border Style</h3><div class="wrap-body">
<p>用于控制元素边框样式的实用程序</p>
<ul class="style-none cols-2">
<li>border-solid</li>
<li>border-dashed</li>
<li>border-dotted</li>
<li>border-double</li>
<li>border-hidden</li>
<li>border-none</li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="divide-width"><a aria-hidden="true" tabindex="-1" href="#divide-width"><span class="icon icon-link"></span></a>Divide Width</h3><div class="wrap-body">
<p>用于控制元素之间的边框宽度的实用程序</p>
<ul class="style-none cols-2">
<li>divide-x-0 > * + *</li>
<li>divide-x-2 > * + *</li>
<li>divide-x-4 > * + *</li>
<li>divide-x-8 > * + *</li>
<li>divide-x > * + *</li>
<li>divide-y-0 > * + *</li>
<li>divide-y-2 > * + *</li>
<li>divide-y-4 > * + *</li>
<li>divide-y-8 > * + *</li>
<li>divide-y > * + *</li>
<li>divide-y-reverse > * + *</li>
<li>divide-x-reverse > * + *</li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="divide-color"><a aria-hidden="true" tabindex="-1" href="#divide-color"><span class="icon icon-link"></span></a>Divide Color</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2 row-span-2-->
<p>用于控制元素之间的边框颜色的实用程序</p>
<ul class="style-none cols-3">
<li>divide-inherit > * + *</li>
<li>divide-current > * + *</li>
<li>divide-transparent > * + *</li>
<li>divide-black > * + *</li>
<li>divide-white > * + *</li>
<li>divide-slate-50 > * + *</li>
<li>divide-slate-100 > * + *</li>
<li>divide-slate-200 > * + *</li>
<li>divide-slate-300 > * + *</li>
<li>divide-slate-400 > * + *</li>
<li>divide-slate-500 > * + *</li>
<li>divide-slate-600 > * + *</li>
<li>divide-slate-700 > * + *</li>
<li>divide-slate-800 > * + *</li>
<li>divide-slate-900 > * + *</li>
<li>divide-gray-50 > * + *</li>
<li>divide-gray-100 > * + *</li>
<li>divide-gray-200 > * + *</li>
<li>divide-gray-300 > * + *</li>
<li>divide-gray-400 > * + *</li>
<li>divide-gray-500 > * + *</li>
<li>divide-gray-600 > * + *</li>
<li>divide-gray-700 > * + *</li>
<li>divide-gray-800 > * + *</li>
<li>divide-gray-900 > * + *</li>
<li>divide-zinc-50 > * + *</li>
<li>divide-zinc-100 > * + *</li>
<li>divide-zinc-200 > * + *</li>
<li>divide-zinc-300 > * + *</li>
<li>divide-zinc-400 > * + *</li>
<li>divide-zinc-500 > * + *</li>
<li>divide-zinc-600 > * + *</li>
<li>divide-zinc-700 > * + *</li>
<li>divide-zinc-800 > * + *</li>
<li>divide-zinc-900 > * + *</li>
<li><a href="https://tailwindcss.com/docs/divide-color"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=style-none cols-3-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="divide-style"><a aria-hidden="true" tabindex="-1" href="#divide-style"><span class="icon icon-link"></span></a>Divide Style</h3><div class="wrap-body">
<p>用于控制元素之间的边框样式的实用程序</p>
<ul class="style-none cols-2">
<li>divide-solid > * + *</li>
<li>divide-dashed > * + *</li>
<li>divide-dotted > * + *</li>
<li>divide-double > * + *</li>
<li>divide-none > * + *</li>
</ul>
<!--rehype:className=style-none cols-2-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="outline-width"><a aria-hidden="true" tabindex="-1" href="#outline-width"><span class="icon icon-link"></span></a>Outline Width</h3><div class="wrap-body">
<p>用于控制元素轮廓宽度的实用程序</p>
<ul class="style-none cols-3">
<li>outline-0</li>
<li>outline-1</li>
<li>outline-2</li>
<li>outline-4</li>
<li>outline-8</li>
</ul>
<!--rehype:className=style-none cols-3-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="outline-color"><a aria-hidden="true" tabindex="-1" href="#outline-color"><span class="icon icon-link"></span></a>Outline Color</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>用于控制元素轮廓颜色的实用程序</p>
<ul class="cols-2 style-none">
<li>outline-inherit</li>
<li>outline-current</li>
<li>outline-transparent</li>
<li>outline-black</li>
<li>outline-white</li>
<li>outline-slate-50</li>
<li>outline-slate-100</li>
<li>outline-slate-200</li>
<li>outline-slate-300</li>
<li>outline-slate-400</li>
<li>outline-slate-500</li>
<li>outline-slate-600</li>
<li>outline-slate-700</li>
<li>outline-slate-800</li>
<li>outline-slate-900</li>
<li>outline-gray-50</li>
<li>outline-gray-100</li>
<li><a href="https://tailwindcss.com/docs/outline-color"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="outline-style"><a aria-hidden="true" tabindex="-1" href="#outline-style"><span class="icon icon-link"></span></a>Outline Style</h3><div class="wrap-body">
<p>用于控制元素轮廓样式的实用程序</p>
<ul class="cols-2 style-none">
<li>outline-none</li>
<li>outline</li>
<li>outline-dashed</li>
<li>outline-dotted</li>
<li>outline-double</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="outline-offset"><a aria-hidden="true" tabindex="-1" href="#outline-offset"><span class="icon icon-link"></span></a>Outline Offset</h3><div class="wrap-body">
<p>用于控制元素轮廓偏移的实用程序</p>
<ul class="cols-2 style-none">
<li>outline-offset-0</li>
<li>outline-offset-1</li>
<li>outline-offset-2</li>
<li>outline-offset-4</li>
<li>outline-offset-8</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="ring-width"><a aria-hidden="true" tabindex="-1" href="#ring-width"><span class="icon icon-link"></span></a>Ring Width</h3><div class="wrap-body">
<p>用于创建带有框阴影的轮廓环的实用程序</p>
<ul class="cols-3 style-none">
<li>ring-0</li>
<li>ring-1</li>
<li>ring-2</li>
<li>ring</li>
<li>ring-4</li>
<li>ring-8</li>
<li>ring-inset</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="ring-color"><a aria-hidden="true" tabindex="-1" href="#ring-color"><span class="icon icon-link"></span></a>Ring Color</h3><div class="wrap-body">
<p>用于设置轮廓环颜色的实用程序</p>
<ul class="cols-3 style-none">
<li>ring-inherit</li>
<li>ring-current</li>
<li>ring-transparent</li>
<li>ring-black</li>
<li>ring-white</li>
<li>ring-slate-50</li>
<li>ring-slate-100</li>
<li>ring-slate-200</li>
<li>ring-slate-300</li>
<li>ring-slate-400</li>
<li>ring-slate-500</li>
<li>ring-slate-600</li>
<li>ring-slate-700</li>
<li>ring-slate-800</li>
<li>ring-slate-900</li>
<li>ring-gray-50</li>
<li>ring-gray-100</li>
<li>ring-gray-200</li>
<li>ring-gray-300</li>
<li>ring-gray-400</li>
<li>ring-gray-500</li>
<li>ring-gray-600</li>
<li>ring-gray-700</li>
<li>ring-gray-800</li>
<li><a href="https://tailwindcss.com/docs/ring-color"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="ring-offset-width"><a aria-hidden="true" tabindex="-1" href="#ring-offset-width"><span class="icon icon-link"></span></a>Ring Offset Width</h3><div class="wrap-body">
<p>添加轮廓环时模拟偏移的实用程序</p>
<ul class="cols-3 style-none">
<li>ring-offset-0</li>
<li>ring-offset-1</li>
<li>ring-offset-2</li>
<li>ring-offset-4</li>
<li>ring-offset-8</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="ring-offset-color"><a aria-hidden="true" tabindex="-1" href="#ring-offset-color"><span class="icon icon-link"></span></a>Ring Offset Color</h3><div class="wrap-body">
<p>用于设置轮廓环偏移颜色的实用程序</p>
<ul class="cols-2 style-none">
<li>ring-offset-inherit</li>
<li>ring-offset-current</li>
<li>ring-offset-transparent</li>
<li>ring-offset-black</li>
<li>ring-offset-white</li>
<li>ring-offset-slate-50</li>
<li>ring-offset-slate-100</li>
<li>ring-offset-slate-200</li>
<li>ring-offset-slate-300</li>
<li>ring-offset-slate-400</li>
<li>ring-offset-slate-500</li>
<li>ring-offset-slate-600</li>
<li>ring-offset-slate-700</li>
<li>ring-offset-slate-800</li>
<li>ring-offset-slate-900</li>
<li>ring-offset-gray-50</li>
<li>ring-offset-gray-100</li>
<li>ring-offset-gray-200</li>
<li>ring-offset-gray-300</li>
<li>ring-offset-gray-400</li>
<li>ring-offset-gray-500</li>
<li><a href="https://tailwindcss.com/docs/ring-offset-color"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="transitions--animation"><a aria-hidden="true" tabindex="-1" href="#transitions--animation"><span class="icon icon-link"></span></a>Transitions &#x26; Animation</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="transition-property"><a aria-hidden="true" tabindex="-1" href="#transition-property"><span class="icon icon-link"></span></a>Transition Property</h3><div class="wrap-body">
<p>用于控制哪些 CSS 属性转换的实用程序</p>
<ul class="cols-2 style-none">
<li>transition-none</li>
<li>transition-all</li>
<li>transition</li>
<li>transition-colors</li>
<li>transition-opacity</li>
<li>transition-shadow</li>
<li>transition-transform</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="transition-duration"><a aria-hidden="true" tabindex="-1" href="#transition-duration"><span class="icon icon-link"></span></a>Transition Duration</h3><div class="wrap-body">
<p>用于控制 CSS 过渡持续时间的实用程序</p>
<ul class="cols-2 style-none">
<li>duration-75</li>
<li>duration-100</li>
<li>duration-150</li>
<li>duration-200</li>
<li>duration-300</li>
<li>duration-500</li>
<li>duration-700</li>
<li>duration-1000</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="transition-timing-function"><a aria-hidden="true" tabindex="-1" href="#transition-timing-function"><span class="icon icon-link"></span></a>Transition Timing Function</h3><div class="wrap-body">
<p>用于控制 CSS 过渡缓动的实用程序</p>
<ul class="cols-2 style-none">
<li>ease-linear</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="transition-delay"><a aria-hidden="true" tabindex="-1" href="#transition-delay"><span class="icon icon-link"></span></a>Transition Delay</h3><div class="wrap-body">
<p>用于控制 CSS 转换延迟的实用程序</p>
<ul class="cols-3 style-none">
<li>delay-75</li>
<li>delay-100</li>
<li>delay-150</li>
<li>delay-200</li>
<li>delay-300</li>
<li>delay-500</li>
<li>delay-700</li>
<li>delay-1000</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="animation"><a aria-hidden="true" tabindex="-1" href="#animation"><span class="icon icon-link"></span></a>Animation</h3><div class="wrap-body">
<p>使用 CSS 动画对元素进行动画处理的实用程序</p>
<ul class="cols-2 style-none">
<li>animate-none</li>
<li>animate-spin</li>
<li>animate-ping</li>
<li>animate-pulse</li>
<li>animate-bounce</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="tables"><a aria-hidden="true" tabindex="-1" href="#tables"><span class="icon icon-link"></span></a>Tables</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="border-collapse"><a aria-hidden="true" tabindex="-1" href="#border-collapse"><span class="icon icon-link"></span></a>Border Collapse</h3><div class="wrap-body">
<ul class="cols-2 style-none">
<li>border-collapse</li>
<li>border-separate</li>
</ul>
<!--rehype:className=cols-2 style-none-->
<p>用于控制表格边框是折叠还是分开的实用程序</p>
</div></div></div><div class="wrap h3body-not-exist row-span-2 col-span-2"><div class="wrap-header h3wrap"><h3 id="border-spacing"><a aria-hidden="true" tabindex="-1" href="#border-spacing"><span class="icon icon-link"></span></a>Border Spacing</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2 col-span-2-->
<p>用于控制表格边框间距的实用程序</p>
<ul class="cols-3 style-none">
<li>border-spacing-0</li>
<li>border-spacing-x-0</li>
<li>border-spacing-y-0</li>
<li>border-spacing-px</li>
<li>border-spacing-x-px</li>
<li>border-spacing-y-px</li>
<li>border-spacing-0.5</li>
<li>border-spacing-x-0.5</li>
<li>border-spacing-y-0.5</li>
<li>border-spacing-1</li>
<li>border-spacing-x-1</li>
<li>border-spacing-y-1</li>
<li>border-spacing-1.5</li>
<li>border-spacing-x-1.5</li>
<li>border-spacing-y-1.5</li>
<li>border-spacing-2</li>
<li>border-spacing-x-2</li>
<li>border-spacing-y-2</li>
<li>border-spacing-2.5</li>
<li>border-spacing-x-2.5</li>
<li>border-spacing-y-2.5</li>
<li>border-spacing-3</li>
<li>border-spacing-x-3</li>
<li>border-spacing-y-3</li>
<li>border-spacing-3.5</li>
<li><a href="https://tailwindcss.com/docs/border-spacing"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="table-layout"><a aria-hidden="true" tabindex="-1" href="#table-layout"><span class="icon icon-link"></span></a>Table Layout</h3><div class="wrap-body">
<ul class="cols-2 style-none">
<li>table-auto</li>
<li>table-fixed</li>
</ul>
<!--rehype:className=cols-2 style-none-->
<p>用于控制表布局算法的实用程序</p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="backgrounds"><a aria-hidden="true" tabindex="-1" href="#backgrounds"><span class="icon icon-link"></span></a>Backgrounds</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="background-attachment"><a aria-hidden="true" tabindex="-1" href="#background-attachment"><span class="icon icon-link"></span></a>Background Attachment</h3><div class="wrap-body">
<p>用于控制背景图像在滚动时的行为方式的实用程序</p>
<ul class="cols-2 style-none">
<li>bg-fixed</li>
<li>bg-local</li>
<li>bg-scroll</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-2 col-span-2"><div class="wrap-header h3wrap"><h3 id="background-color"><a aria-hidden="true" tabindex="-1" href="#background-color"><span class="icon icon-link"></span></a>Background Color</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2 col-span-2-->
<p>用于控制元素背景颜色的实用程序</p>
<ul class="cols-4 style-none">
<li>bg-inherit</li>
<li>bg-current</li>
<li>bg-transparent</li>
<li>bg-black</li>
<li>bg-white</li>
<li>bg-slate-50</li>
<li>bg-slate-100</li>
<li>bg-slate-200</li>
<li>bg-slate-300</li>
<li>bg-slate-400</li>
<li>bg-slate-500</li>
<li>bg-slate-600</li>
<li>bg-slate-700</li>
<li>bg-slate-800</li>
<li>bg-slate-900</li>
<li>bg-gray-50</li>
<li>bg-gray-100</li>
<li>bg-gray-200</li>
<li>bg-gray-300</li>
<li>bg-gray-400</li>
<li>bg-gray-500</li>
<li>bg-gray-600</li>
<li><a href="https://tailwindcss.com/docs/background-color"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-4 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="background-clip"><a aria-hidden="true" tabindex="-1" href="#background-clip"><span class="icon icon-link"></span></a>Background Clip</h3><div class="wrap-body">
<p>用于控制元素背景边界框的实用程序</p>
<ul class="cols-2 style-none">
<li>bg-clip-border</li>
<li>bg-clip-padding</li>
<li>bg-clip-content</li>
<li>bg-clip-text</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="background-origin"><a aria-hidden="true" tabindex="-1" href="#background-origin"><span class="icon icon-link"></span></a>Background Origin</h3><div class="wrap-body">
<p>用于控制元素背景相对于边框、填充和内容的定位方式的实用程序</p>
<ul class="cols-2 style-none">
<li>bg-origin-border</li>
<li>bg-origin-padding</li>
<li>bg-origin-content</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="background-position"><a aria-hidden="true" tabindex="-1" href="#background-position"><span class="icon icon-link"></span></a>Background Position</h3><div class="wrap-body">
<p>用于控制元素背景图像位置的实用程序</p>
<ul class="cols-2 style-none">
<li>bg-bottom</li>
<li>bg-center</li>
<li>bg-left</li>
<li>bg-left-bottom</li>
<li>bg-left-top</li>
<li>bg-right</li>
<li>bg-right-bottom</li>
<li>bg-right-top</li>
<li>bg-top</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="background-repeat"><a aria-hidden="true" tabindex="-1" href="#background-repeat"><span class="icon icon-link"></span></a>Background Repeat</h3><div class="wrap-body">
<p>用于控制元素背景图像重复的实用程序</p>
<ul class="cols-2 style-none">
<li>bg-repeat</li>
<li>bg-no-repeat</li>
<li>bg-repeat-x</li>
<li>bg-repeat-y</li>
<li>bg-repeat-round</li>
<li>bg-repeat-space</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="background-size"><a aria-hidden="true" tabindex="-1" href="#background-size"><span class="icon icon-link"></span></a>Background Size</h3><div class="wrap-body">
<p>用于控制元素背景图像的背景大小的实用程序</p>
<ul class="cols-2 style-none">
<li>bg-auto</li>
<li>bg-cover</li>
<li>bg-contain</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-2 col-span-2"><div class="wrap-header h3wrap"><h3 id="gradient-color-stops"><a aria-hidden="true" tabindex="-1" href="#gradient-color-stops"><span class="icon icon-link"></span></a>Gradient Color Stops</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2 col-span-2-->
<p>用于控制背景渐变色标的实用程序</p>
<ul class="cols-4 style-none">
<li>from-inherit</li>
<li>from-current</li>
<li>from-transparent</li>
<li>from-black</li>
<li>from-white</li>
<li>from-slate-50</li>
<li>from-slate-100</li>
<li>from-slate-200</li>
<li>from-slate-300</li>
<li>from-slate-400</li>
<li>from-slate-500</li>
<li>from-slate-600</li>
<li>from-slate-700</li>
<li>from-slate-800</li>
<li>from-slate-900</li>
<li>from-gray-50</li>
<li>from-gray-100</li>
<li>from-gray-200</li>
<li><a href="https://tailwindcss.com/docs/gradient-color-stops"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-4 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="background-image"><a aria-hidden="true" tabindex="-1" href="#background-image"><span class="icon icon-link"></span></a>Background Image</h3><div class="wrap-body">
<p>用于控制元素背景图像的实用程序</p>
<ul class="cols-2 style-none">
<li>bg-none</li>
<li>bg-gradient-to-t</li>
<li>bg-gradient-to-tr</li>
<li>bg-gradient-to-r</li>
<li>bg-gradient-to-br</li>
<li>bg-gradient-to-b</li>
<li>bg-gradient-to-bl</li>
<li>bg-gradient-to-l</li>
<li>bg-gradient-to-tl</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="spacing"><a aria-hidden="true" tabindex="-1" href="#spacing"><span class="icon icon-link"></span></a>Spacing</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="padding"><a aria-hidden="true" tabindex="-1" href="#padding"><span class="icon icon-link"></span></a>Padding</h3><div class="wrap-body">
<p>用于控制元素填充的实用程序</p>
<ul class="cols-3 style-none">
<li>p-0</li>
<li>px-0</li>
<li>py-0</li>
<li>pt-0</li>
<li>pr-0</li>
<li>pb-0</li>
<li>pl-0</li>
<li>p-px</li>
<li>px-px</li>
<li>py-px</li>
<li>pt-px</li>
<li>pr-px</li>
<li>pb-px</li>
<li>pl-px</li>
<li>p-0.5</li>
<li>px-0.5</li>
<li>py-0.5</li>
<li>pt-0.5</li>
<li>pr-0.5</li>
<li>pb-0.5</li>
<li>pl-0.5</li>
<li><a href="https://tailwindcss.com/docs/padding"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="margin"><a aria-hidden="true" tabindex="-1" href="#margin"><span class="icon icon-link"></span></a>Margin</h3><div class="wrap-body">
<p>用于控制元素边距的实用程序</p>
<ul class="cols-3 style-none">
<li>m-0</li>
<li>mx-0</li>
<li>my-0</li>
<li>mt-0</li>
<li>mr-0</li>
<li>mb-0</li>
<li>ml-0</li>
<li>m-px</li>
<li>mx-px</li>
<li>my-px</li>
<li>mt-px</li>
<li>mr-px</li>
<li>mb-px</li>
<li>ml-px</li>
<li>m-0.5</li>
<li>mx-0.5</li>
<li>my-0.5</li>
<li>mt-0.5</li>
<li>mr-0.5</li>
<li>mb-0.5</li>
<li>ml-0.5</li>
<li><a href="https://tailwindcss.com/docs/margin"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="space-between"><a aria-hidden="true" tabindex="-1" href="#space-between"><span class="icon icon-link"></span></a>Space Between</h3><div class="wrap-body">
<p>用于控制子元素之间空间的实用程序</p>
<ul class="cols-2 style-none">
<li>space-x-0 > * + *</li>
<li>space-y-0 > * + *</li>
<li>space-x-0.5 > * + *</li>
<li>space-y-0.5 > * + *</li>
<li>space-x-1 > * + *</li>
<li>space-y-1 > * + *</li>
<li>space-x-1.5 > * + *</li>
<li>space-y-1.5 > * + *</li>
<li>space-x-2 > * + *</li>
<li>space-y-2 > * + *</li>
<li>space-x-2.5 > * + *</li>
<li>space-y-2.5 > * + *</li>
<li>space-x-3 > * + *</li>
<li>space-y-3 > * + *</li>
<li>space-x-3.5 > * + *</li>
<li>space-y-3.5 > * + *</li>
<li>space-x-4 > * + *</li>
<li>space-y-4 > * + *</li>
<li>space-x-5 > * + *</li>
<li>space-y-5 > * + *</li>
<li>space-x-6 > * + *</li>
<li>space-y-6 > * + *</li>
<li>space-x-7 > * + *</li>
<li>space-y-7 > * + *</li>
<li><a href="https://tailwindcss.com/docs/space"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="svg"><a aria-hidden="true" tabindex="-1" href="#svg"><span class="icon icon-link"></span></a>SVG</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="fill"><a aria-hidden="true" tabindex="-1" href="#fill"><span class="icon icon-link"></span></a>Fill</h3><div class="wrap-body">
<p>用于样式化 SVG 元素填充的实用程序</p>
<ul class="cols-2 style-none">
<li>fill-none</li>
<li>fill-inherit</li>
<li>fill-current</li>
<li>fill-transparent</li>
<li>fill-black</li>
<li>fill-white</li>
<li>fill-slate-50</li>
<li>fill-slate-100</li>
<li>fill-slate-200</li>
<li>fill-slate-300</li>
<li>fill-slate-400</li>
<li>fill-slate-500</li>
<li>fill-slate-600</li>
<li>fill-slate-700</li>
<li>fill-slate-800</li>
<li>fill-slate-900</li>
<li>fill-gray-50</li>
<li>fill-gray-100</li>
<li><a href="https://tailwindcss.com/docs/fill"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="stroke"><a aria-hidden="true" tabindex="-1" href="#stroke"><span class="icon icon-link"></span></a>Stroke</h3><div class="wrap-body">
<p>用于设置 SVG 元素笔划样式的实用程序</p>
<ul class="cols-2 style-none">
<li>stroke-none</li>
<li>stroke-inherit</li>
<li>stroke-current</li>
<li>stroke-transparent</li>
<li>stroke-black</li>
<li>stroke-white</li>
<li>stroke-slate-50</li>
<li>stroke-slate-100</li>
<li>stroke-slate-200</li>
<li>stroke-slate-300</li>
<li>stroke-slate-400</li>
<li>stroke-slate-500</li>
<li>stroke-slate-600</li>
<li>stroke-slate-700</li>
<li>stroke-slate-800</li>
<li>stroke-slate-900</li>
<li>stroke-gray-50</li>
<li>stroke-gray-100</li>
<li><a href="https://tailwindcss.com/docs/fill"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="stroke-width"><a aria-hidden="true" tabindex="-1" href="#stroke-width"><span class="icon icon-link"></span></a>Stroke Width</h3><div class="wrap-body">
<p>用于设置 SVG 元素笔划宽度样式的实用程序</p>
<ul>
<li>stroke-0</li>
<li>stroke-1</li>
<li>stroke-2</li>
</ul>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="typography"><a aria-hidden="true" tabindex="-1" href="#typography"><span class="icon icon-link"></span></a>Typography</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="font-family"><a aria-hidden="true" tabindex="-1" href="#font-family"><span class="icon icon-link"></span></a>Font Family</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>用于控制元素字体系列的实用程序</p>
<ul class="cols-3 style-none">
<li>font-sans</li>
<li>font-serif</li>
<li>font-mono</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="font-size"><a aria-hidden="true" tabindex="-1" href="#font-size"><span class="icon icon-link"></span></a>Font Size</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>用于控制元素字体大小的实用程序</p>
<ul class="cols-3 style-none">
<li>text-xs</li>
<li>text-sm</li>
<li>text-base</li>
<li>text-lg</li>
<li>text-xl</li>
<li>text-2xl</li>
<li>text-3xl</li>
<li>text-4xl</li>
<li>text-5xl</li>
<li>text-6xl</li>
<li>text-7xl</li>
<li>text-8xl</li>
<li>text-9xl</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="font-smoothing"><a aria-hidden="true" tabindex="-1" href="#font-smoothing"><span class="icon icon-link"></span></a>Font Smoothing</h3><div class="wrap-body">
<p>用于控制元素字体平滑的实用程序</p>
<ul class="cols-2 style-none">
<li>antialiased</li>
<li>subpixel-antialiased</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="font-style"><a aria-hidden="true" tabindex="-1" href="#font-style"><span class="icon icon-link"></span></a>Font Style</h3><div class="wrap-body">
<p>用于控制文本样式的实用程序</p>
<ul class="cols-2 style-none">
<li>italic</li>
<li>not-italic</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="font-weight"><a aria-hidden="true" tabindex="-1" href="#font-weight"><span class="icon icon-link"></span></a>Font Weight</h3><div class="wrap-body">
<p>用于控制元素字体粗细的实用程序</p>
<ul class="cols-2 style-none">
<li>font-thin</li>
<li>font-extralight</li>
<li>font-light</li>
<li>font-normal</li>
<li>font-medium</li>
<li>font-semibold</li>
<li>font-bold</li>
<li>font-extrabold</li>
<li>font-black</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="font-variant-numeric"><a aria-hidden="true" tabindex="-1" href="#font-variant-numeric"><span class="icon icon-link"></span></a>Font Variant Numeric</h3><div class="wrap-body">
<p>用于控制数字变体的实用程序</p>
<ul class="cols-2 style-none">
<li>normal-nums</li>
<li>ordinal</li>
<li>slashed-zero</li>
<li>lining-nums</li>
<li>oldstyle-nums</li>
<li>proportional-nums</li>
<li>tabular-nums</li>
<li>diagonal-fractions</li>
<li>stacked-fractions</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="letter-spacing"><a aria-hidden="true" tabindex="-1" href="#letter-spacing"><span class="icon icon-link"></span></a>Letter Spacing</h3><div class="wrap-body">
<p>用于控制元素的跟踪（字母间距）的实用程序</p>
<ul class="cols-2 style-none">
<li>tracking-tighter</li>
<li>tracking-tight</li>
<li>tracking-normal</li>
<li>tracking-wide</li>
<li>tracking-wider</li>
<li>tracking-widest</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="line-height"><a aria-hidden="true" tabindex="-1" href="#line-height"><span class="icon icon-link"></span></a>Line Height</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>用于控制元素行距（行高）的实用程序</p>
<ul class="cols-2 style-none">
<li>leading-3</li>
<li>leading-4</li>
<li>leading-5</li>
<li>leading-6</li>
<li>leading-7</li>
<li>leading-8</li>
<li>leading-9</li>
<li>leading-10</li>
<li>leading-none</li>
<li>leading-tight</li>
<li>leading-snug</li>
<li>leading-normal</li>
<li>leading-relaxed</li>
<li>leading-loose</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="list-style-type"><a aria-hidden="true" tabindex="-1" href="#list-style-type"><span class="icon icon-link"></span></a>List Style Type</h3><div class="wrap-body">
<p>用于控制列表的项目符号/编号样式的实用程序</p>
<ul class="cols-3 style-none">
<li>list-none</li>
<li>list-disc</li>
<li>list-decimal</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="list-style-position"><a aria-hidden="true" tabindex="-1" href="#list-style-position"><span class="icon icon-link"></span></a>List Style Position</h3><div class="wrap-body">
<p>用于控制列表中项目符号/编号位置的实用程序</p>
<ul class="cols-2 style-none">
<li>list-inside</li>
<li>list-outside</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="text-align"><a aria-hidden="true" tabindex="-1" href="#text-align"><span class="icon icon-link"></span></a>Text Align</h3><div class="wrap-body">
<p>用于控制文本对齐的实用程序</p>
<ul class="cols-3 style-none">
<li>text-left</li>
<li>text-center</li>
<li>text-right</li>
<li>text-justify</li>
<li>text-start</li>
<li>text-end</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="text-decoration"><a aria-hidden="true" tabindex="-1" href="#text-decoration"><span class="icon icon-link"></span></a>Text Decoration</h3><div class="wrap-body">
<p>用于控制文本装饰的实用程序</p>
<ul class="cols-2 style-none">
<li>underline</li>
<li>overline</li>
<li>line-through</li>
<li>no-underline</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="text-color"><a aria-hidden="true" tabindex="-1" href="#text-color"><span class="icon icon-link"></span></a>Text Color</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>用于控制元素文本颜色的实用程序</p>
<ul class="cols-2 style-none">
<li>text-inherit</li>
<li>text-current</li>
<li>text-transparent</li>
<li>text-black</li>
<li>text-white</li>
<li>text-slate-50</li>
<li>text-slate-100</li>
<li>text-slate-200</li>
<li>text-slate-300</li>
<li>text-slate-400</li>
<li>text-slate-500</li>
<li>text-slate-600</li>
<li>text-slate-700</li>
<li>text-slate-800</li>
<li>text-slate-900</li>
<li>text-gray-50</li>
<li>text-gray-100</li>
<li>text-gray-200</li>
<li>text-gray-300</li>
<li>text-gray-400</li>
<li>text-gray-500</li>
<li><a href="https://tailwindcss.com/docs/text-color"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="text-decoration-color"><a aria-hidden="true" tabindex="-1" href="#text-decoration-color"><span class="icon icon-link"></span></a>Text Decoration Color</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>用于控制文本装饰颜色的实用程序</p>
<ul class="cols-2 style-none">
<li>decoration-inherit</li>
<li>decoration-current</li>
<li>decoration-transparent</li>
<li>decoration-black</li>
<li>decoration-white</li>
<li>decoration-slate-50</li>
<li>decoration-slate-100</li>
<li>decoration-slate-200</li>
<li>decoration-slate-300</li>
<li>decoration-slate-400</li>
<li>decoration-slate-500</li>
<li>decoration-slate-600</li>
<li>decoration-slate-700</li>
<li>decoration-slate-800</li>
<li>decoration-slate-900</li>
<li>decoration-gray-50</li>
<li>decoration-gray-100</li>
<li>decoration-gray-200</li>
<li>decoration-gray-300</li>
<li>decoration-gray-400</li>
<li>decoration-gray-500</li>
<li><a href="https://tailwindcss.com/docs/text-decoration-color"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="text-decoration-style"><a aria-hidden="true" tabindex="-1" href="#text-decoration-style"><span class="icon icon-link"></span></a>Text Decoration Style</h3><div class="wrap-body">
<p>用于控制文本装饰样式的实用程序</p>
<ul class="cols-2 style-none">
<li>decoration-solid</li>
<li>decoration-double</li>
<li>decoration-dotted</li>
<li>decoration-dashed</li>
<li>decoration-wavy</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="text-decoration-thickness"><a aria-hidden="true" tabindex="-1" href="#text-decoration-thickness"><span class="icon icon-link"></span></a>Text Decoration Thickness</h3><div class="wrap-body">
<p>用于控制文本装饰厚度的实用程序</p>
<ul class="cols-2 style-none">
<li>decoration-auto</li>
<li>decoration-from-font</li>
<li>decoration-0</li>
<li>decoration-1</li>
<li>decoration-2</li>
<li>decoration-4</li>
<li>decoration-8</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="text-underline-offset"><a aria-hidden="true" tabindex="-1" href="#text-underline-offset"><span class="icon icon-link"></span></a>Text Underline Offset</h3><div class="wrap-body">
<p>用于控制文本下划线偏移量的实用程序</p>
<ul class="cols-2 style-none">
<li>underline-offset-auto</li>
<li>underline-offset-0</li>
<li>underline-offset-1</li>
<li>underline-offset-2</li>
<li>underline-offset-4</li>
<li>underline-offset-8</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="text-transform"><a aria-hidden="true" tabindex="-1" href="#text-transform"><span class="icon icon-link"></span></a>Text Transform</h3><div class="wrap-body">
<p>用于控制文本转换的实用程序</p>
<ul class="cols-2 style-none">
<li>uppercase</li>
<li>lowercase</li>
<li>capitalize</li>
<li>normal-case</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="text-overflow"><a aria-hidden="true" tabindex="-1" href="#text-overflow"><span class="icon icon-link"></span></a>Text Overflow</h3><div class="wrap-body">
<p>用于控制元素中文本溢出的实用程序</p>
<ul class="cols-2 style-none">
<li>truncate</li>
<li>text-ellipsis</li>
<li>text-clip</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="text-indent"><a aria-hidden="true" tabindex="-1" href="#text-indent"><span class="icon icon-link"></span></a>Text Indent</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>用于控制块中文本前显示的空白空间量的实用程序</p>
<ul class="cols-4 style-none">
<li>indent-0</li>
<li>indent-px</li>
<li>indent-0.5</li>
<li>indent-1</li>
<li>indent-1.5</li>
<li>indent-2</li>
<li>indent-2.5</li>
<li>indent-3</li>
<li>indent-3.5</li>
<li>indent-4</li>
<li>indent-5</li>
<li>indent-6</li>
<li>indent-7</li>
<li>indent-8</li>
<li>indent-9</li>
<li>indent-10</li>
<li>indent-11</li>
<li>indent-12</li>
<li>indent-14</li>
<li>indent-16</li>
<li>indent-20</li>
<li>indent-24</li>
<li>indent-28</li>
<li>indent-32</li>
<li>indent-36</li>
<li>indent-40</li>
<li>indent-44</li>
<li>indent-48</li>
<li>indent-52</li>
<li>indent-56</li>
<li>indent-60</li>
<li>indent-64</li>
<li>indent-72</li>
<li>indent-80</li>
<li>indent-96</li>
</ul>
<!--rehype:className=cols-4 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="vertical-align"><a aria-hidden="true" tabindex="-1" href="#vertical-align"><span class="icon icon-link"></span></a>Vertical Align</h3><div class="wrap-body">
<p>用于控制内联或表格单元格框的垂直对齐的实用程序</p>
<ul class="cols-2 style-none">
<li>align-baseline</li>
<li>align-top</li>
<li>align-middle</li>
<li>align-bottom</li>
<li>align-text-top</li>
<li>align-text-bottom</li>
<li>align-sub</li>
<li>align-super</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="whitespace"><a aria-hidden="true" tabindex="-1" href="#whitespace"><span class="icon icon-link"></span></a>Whitespace</h3><div class="wrap-body">
<p>用于控制元素的空白属性的实用程序</p>
<ul class="cols-2 style-none">
<li>whitespace-normal</li>
<li>whitespace-nowrap</li>
<li>whitespace-pre</li>
<li>whitespace-pre-line</li>
<li>whitespace-pre-wrap</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="word-break"><a aria-hidden="true" tabindex="-1" href="#word-break"><span class="icon icon-link"></span></a>Word Break</h3><div class="wrap-body">
<p>用于控制元素中的分词的实用程序</p>
<ul class="cols-2 style-none">
<li>break-normal</li>
<li>break-words</li>
<li>break-all</li>
<li>break-keep</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="content"><a aria-hidden="true" tabindex="-1" href="#content"><span class="icon icon-link"></span></a>Content</h3><div class="wrap-body">
<p>用于控制前后伪元素内容的实用程序</p>
<ul class="cols-2 style-none">
<li>content-none</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="transforms"><a aria-hidden="true" tabindex="-1" href="#transforms"><span class="icon icon-link"></span></a>Transforms</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="scale"><a aria-hidden="true" tabindex="-1" href="#scale"><span class="icon icon-link"></span></a>Scale</h3><div class="wrap-body">
<p>使用变换缩放元素的实用程序</p>
<ul class="cols-2 style-none">
<li>scale-0</li>
<li>scale-x-0</li>
<li>scale-y-0</li>
<li>scale-50</li>
<li>scale-x-50</li>
<li>scale-y-50</li>
<li>scale-75</li>
<li>scale-x-75</li>
<li>scale-y-75</li>
<li>scale-90</li>
<li>scale-x-90</li>
<li>scale-y-90</li>
<li>scale-95</li>
<li>scale-x-95</li>
<li>scale-y-95</li>
<li>scale-100</li>
<li>scale-x-100</li>
<li>scale-y-100</li>
<li>scale-105</li>
<li>scale-x-105</li>
<li>scale-y-105</li>
<li>scale-110</li>
<li>scale-x-110</li>
<li>scale-y-110</li>
<li>scale-125</li>
<li>scale-x-125</li>
<li>scale-y-125</li>
<li>scale-150</li>
<li>scale-x-150</li>
<li>scale-y-150</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="rotate"><a aria-hidden="true" tabindex="-1" href="#rotate"><span class="icon icon-link"></span></a>Rotate</h3><div class="wrap-body">
<p>使用变换旋转元素的实用程序</p>
<ul class="cols-3 style-none">
<li>rotate-0</li>
<li>rotate-1</li>
<li>rotate-2</li>
<li>rotate-3</li>
<li>rotate-6</li>
<li>rotate-12</li>
<li>rotate-45</li>
<li>rotate-90</li>
<li>rotate-180</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="translate"><a aria-hidden="true" tabindex="-1" href="#translate"><span class="icon icon-link"></span></a>Translate</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>使用 transform 翻译元素的实用程序</p>
<ul class="cols-3 style-none">
<li>translate-x-0</li>
<li>translate-y-0</li>
<li>translate-x-px</li>
<li>translate-y-px</li>
<li>translate-x-0.5</li>
<li>translate-y-0.5</li>
<li>translate-x-1</li>
<li>translate-y-1</li>
<li>translate-x-1.5</li>
<li>translate-y-1.5</li>
<li>translate-x-2</li>
<li>translate-y-2</li>
<li>translate-x-2.5</li>
<li>translate-y-2.5</li>
<li>translate-x-3</li>
<li>translate-y-3</li>
<li>translate-x-3.5</li>
<li>translate-y-3.5</li>
<li>translate-x-4</li>
<li>translate-y-4</li>
<li>translate-x-5</li>
<li>translate-y-5</li>
<li>translate-x-6</li>
<li>translate-y-6</li>
<li>translate-x-7</li>
<li>translate-y-7</li>
<li>translate-x-8</li>
<li>translate-y-8</li>
<li>translate-x-9</li>
<li>translate-y-9</li>
<li>translate-x-10</li>
<li>translate-y-10</li>
<li>translate-x-11</li>
<li>translate-y-11</li>
<li>translate-x-12</li>
<li>translate-y-12</li>
<li>translate-x-14</li>
<li>translate-y-14</li>
<li>translate-x-16</li>
<li>translate-y-16</li>
<li>translate-x-20</li>
<li>translate-y-20</li>
<li>translate-x-24</li>
<li>translate-y-24</li>
<li>translate-x-28</li>
<li>translate-y-28</li>
<li>translate-x-32</li>
<li>translate-y-32</li>
<li>translate-x-36</li>
<li>translate-y-36</li>
<li>translate-x-40</li>
<li>translate-y-40</li>
<li>translate-x-44</li>
<li>translate-y-44</li>
<li>translate-x-48</li>
<li>translate-y-48</li>
<li>translate-x-52</li>
<li>translate-y-52</li>
<li>translate-x-56</li>
<li>translate-y-56</li>
<li>translate-x-60</li>
<li>translate-y-60</li>
<li>translate-x-64</li>
<li>translate-y-64</li>
<li>translate-x-72</li>
<li>translate-y-72</li>
<li>translate-x-80</li>
<li>translate-y-80</li>
<li>translate-x-96</li>
<li>translate-y-96</li>
<li>translate-x-1/2</li>
<li>translate-x-1/3</li>
<li>translate-x-2/3</li>
<li>translate-x-1/4</li>
<li>translate-x-2/4</li>
<li>translate-x-3/4</li>
<li>translate-x-full</li>
<li>translate-y-1/2</li>
<li>translate-y-1/3</li>
<li>translate-y-2/3</li>
<li>translate-y-1/4</li>
<li>translate-y-2/4</li>
<li>translate-y-3/4</li>
<li>translate-y-full</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="skew"><a aria-hidden="true" tabindex="-1" href="#skew"><span class="icon icon-link"></span></a>Skew</h3><div class="wrap-body">
<p>使用变换倾斜元素的实用程序</p>
<ul class="cols-2 style-none">
<li>skew-x-0</li>
<li>skew-y-0</li>
<li>skew-x-1</li>
<li>skew-y-1</li>
<li>skew-x-2</li>
<li>skew-y-2</li>
<li>skew-x-3</li>
<li>skew-y-3</li>
<li>skew-x-6</li>
<li>skew-y-6</li>
<li>skew-x-12</li>
<li>skew-y-12</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="transform-origin"><a aria-hidden="true" tabindex="-1" href="#transform-origin"><span class="icon icon-link"></span></a>Transform Origin</h3><div class="wrap-body">
<p>用于指定元素转换原点的实用程序</p>
<ul class="cols-2 style-none">
<li>origin-center</li>
<li>origin-top</li>
<li>origin-top-right</li>
<li>origin-right</li>
<li>origin-bottom-right</li>
<li>origin-bottom</li>
<li>origin-bottom-left</li>
<li>origin-left</li>
<li>origin-top-left</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="interactivity"><a aria-hidden="true" tabindex="-1" href="#interactivity"><span class="icon icon-link"></span></a>Interactivity</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="accent-color"><a aria-hidden="true" tabindex="-1" href="#accent-color"><span class="icon icon-link"></span></a>Accent Color</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2 row-span-2-->
<p>用于控制表单控件强调色的实用程序</p>
<ul class="cols-4 style-none">
<li>accent-inherit</li>
<li>accent-current</li>
<li>accent-transparent</li>
<li>accent-black</li>
<li>accent-white</li>
<li>accent-slate-50</li>
<li>accent-slate-100</li>
<li>accent-slate-200</li>
<li>accent-slate-300</li>
<li>accent-slate-400</li>
<li>accent-slate-500</li>
<li>accent-slate-600</li>
<li>accent-slate-700</li>
<li>accent-slate-800</li>
<li>accent-slate-900</li>
<li>accent-gray-50</li>
<li>accent-gray-100</li>
<li>accent-gray-200</li>
<li>accent-gray-300</li>
<li>accent-gray-400</li>
<li>accent-gray-500</li>
<li>accent-gray-600</li>
<li><a href="https://tailwindcss.com/docs/text-decoration-color"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-4 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="appearance"><a aria-hidden="true" tabindex="-1" href="#appearance"><span class="icon icon-link"></span></a>Appearance</h3><div class="wrap-body">
<p>用于抑制本机表单控件样式的实用程序</p>
<ul>
<li>appearance-none</li>
</ul>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="pointer-events"><a aria-hidden="true" tabindex="-1" href="#pointer-events"><span class="icon icon-link"></span></a>Pointer Events</h3><div class="wrap-body">
<p>用于控制元素是否响应指针事件的实用程序</p>
<ul class="cols-2 style-none">
<li>pointer-events-none</li>
<li>pointer-events-auto</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-5"><div class="wrap-header h3wrap"><h3 id="cursor"><a aria-hidden="true" tabindex="-1" href="#cursor"><span class="icon icon-link"></span></a>Cursor</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-5-->
<p>将鼠标悬停在元素上时控制光标样式的实用程序</p>
<ul class="cols-2 style-none">
<li>cursor-auto</li>
<li>cursor-default</li>
<li>cursor-pointer</li>
<li>cursor-wait</li>
<li>cursor-text</li>
<li>cursor-move</li>
<li>cursor-help</li>
<li>cursor-not-allowed</li>
<li>cursor-none</li>
<li>cursor-context-menu</li>
<li>cursor-progress</li>
<li>cursor-cell</li>
<li>cursor-crosshair</li>
<li>cursor-vertical-text</li>
<li>cursor-alias</li>
<li>cursor-copy</li>
<li>cursor-no-drop</li>
<li>cursor-grab</li>
<li>cursor-grabbing</li>
<li>cursor-all-scroll</li>
<li>cursor-col-resize</li>
<li>cursor-row-resize</li>
<li>cursor-n-resize</li>
<li>cursor-e-resize</li>
<li>cursor-s-resize</li>
<li>cursor-w-resize</li>
<li>cursor-ne-resize</li>
<li>cursor-nw-resize</li>
<li>cursor-se-resize</li>
<li>cursor-sw-resize</li>
<li>cursor-ew-resize</li>
<li>cursor-ns-resize</li>
<li>cursor-nesw-resize</li>
<li>cursor-nwse-resize</li>
<li>cursor-zoom-in</li>
<li>cursor-zoom-out</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-5"><div class="wrap-header h3wrap"><h3 id="caret-color"><a aria-hidden="true" tabindex="-1" href="#caret-color"><span class="icon icon-link"></span></a>Caret Color</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-5-->
<p>用于控制文本输入光标颜色的实用程序</p>
<ul class="cols-2 style-none">
<li>caret-inherit</li>
<li>caret-current</li>
<li>caret-transparent</li>
<li>caret-black</li>
<li>caret-white</li>
<li>caret-slate-50</li>
<li>caret-slate-100</li>
<li>caret-slate-200</li>
<li>caret-slate-300</li>
<li>caret-slate-400</li>
<li>caret-slate-500</li>
<li>caret-slate-600</li>
<li>caret-slate-700</li>
<li>caret-slate-800</li>
<li>caret-slate-900</li>
<li>caret-gray-50</li>
<li>caret-gray-100</li>
<li>caret-gray-200</li>
<li>caret-gray-300</li>
<li>caret-gray-400</li>
<li>caret-gray-500</li>
<li>caret-gray-600</li>
<li>caret-gray-700</li>
<li>caret-gray-800</li>
<li>caret-gray-900</li>
<li>caret-zinc-50</li>
<li>caret-zinc-100</li>
<li>caret-zinc-200</li>
<li>caret-zinc-300</li>
<li>caret-zinc-400</li>
<li>caret-zinc-500</li>
<li>caret-zinc-600</li>
<li>caret-zinc-700</li>
<li>caret-zinc-800</li>
<li>caret-zinc-900</li>
<li>caret-neutral-50</li>
<li>caret-neutral-100</li>
<li>caret-neutral-200</li>
<li>caret-neutral-300</li>
<li>caret-neutral-400</li>
<li>caret-neutral-500</li>
<li>caret-neutral-600</li>
<li>caret-neutral-700</li>
<li>caret-neutral-800</li>
<li><a href="https://tailwindcss.com/docs/caret-color"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="resize"><a aria-hidden="true" tabindex="-1" href="#resize"><span class="icon icon-link"></span></a>Resize</h3><div class="wrap-body">
<p>用于控制如何调整元素大小的实用程序</p>
<ul class="cols-2 style-none">
<li>resize-none</li>
<li>resize-y</li>
<li>resize-x</li>
<li>resize</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="scroll-behavior"><a aria-hidden="true" tabindex="-1" href="#scroll-behavior"><span class="icon icon-link"></span></a>Scroll Behavior</h3><div class="wrap-body">
<p>用于控制元素滚动行为的实用程序</p>
<ul class="cols-2 style-none">
<li>scroll-auto</li>
<li>scroll-smooth</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="scroll-snap-align"><a aria-hidden="true" tabindex="-1" href="#scroll-snap-align"><span class="icon icon-link"></span></a>Scroll Snap Align</h3><div class="wrap-body">
<p>用于控制元素的滚动对齐对齐的实用程序</p>
<ul class="cols-2 style-none">
<li>snap-start</li>
<li>snap-end</li>
<li>snap-center</li>
<li>snap-align-none</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="scroll-snap-stop"><a aria-hidden="true" tabindex="-1" href="#scroll-snap-stop"><span class="icon icon-link"></span></a>Scroll Snap Stop</h3><div class="wrap-body">
<p>用于控制您是否可以跳过可能的对齐位置的实用程序</p>
<ul class="cols-2 style-none">
<li>snap-normal</li>
<li>snap-always</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="scroll-snap-type"><a aria-hidden="true" tabindex="-1" href="#scroll-snap-type"><span class="icon icon-link"></span></a>Scroll Snap Type</h3><div class="wrap-body">
<p>用于控制在捕捉容器中强制执行捕捉点的严格程度的实用程序</p>
<ul class="cols-2 style-none">
<li>snap-none</li>
<li>snap-x</li>
<li>snap-y</li>
<li>snap-both</li>
<li>snap-mandatory</li>
<li>snap-proximity</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="scroll-margin"><a aria-hidden="true" tabindex="-1" href="#scroll-margin"><span class="icon icon-link"></span></a>Scroll Margin</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<p>用于控制快照容器中项目周围滚动偏移的实用程序</p>
<ul class="cols-2 style-none">
<li>scroll-m-0</li>
<li>scroll-mx-0</li>
<li>scroll-my-0</li>
<li>scroll-mt-0</li>
<li>scroll-mr-0</li>
<li>scroll-mb-0</li>
<li>scroll-ml-0</li>
<li>scroll-m-px</li>
<li>scroll-mx-px</li>
<li>scroll-my-px</li>
<li>scroll-mt-px</li>
<li>scroll-mr-px</li>
<li>scroll-mb-px</li>
<li>scroll-ml-px</li>
<li>scroll-m-0.5</li>
<li>scroll-mx-0.5</li>
<li>scroll-my-0.5</li>
<li>scroll-mt-0.5</li>
<li>scroll-mr-0.5</li>
<li>scroll-mb-0.5</li>
<li>scroll-ml-0.5</li>
<li>scroll-m-1</li>
<li>scroll-mx-1</li>
<li>scroll-my-1</li>
<li>scroll-mt-1</li>
<li>scroll-mr-1</li>
<li>scroll-mb-1</li>
<li>scroll-ml-1</li>
<li><a href="https://tailwindcss.com/docs/scroll-margin"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="scroll-padding"><a aria-hidden="true" tabindex="-1" href="#scroll-padding"><span class="icon icon-link"></span></a>Scroll Padding</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<p>用于控制元素在 snap 容器中的滚动偏移的实用程序</p>
<ul class="cols-2 style-none">
<li>scroll-p-0</li>
<li>scroll-px-0</li>
<li>scroll-py-0</li>
<li>scroll-pt-0</li>
<li>scroll-pr-0</li>
<li>scroll-pb-0</li>
<li>scroll-pl-0</li>
<li>scroll-p-px</li>
<li>scroll-px-px</li>
<li>scroll-py-px</li>
<li>scroll-pt-px</li>
<li>scroll-pr-px</li>
<li>scroll-pb-px</li>
<li>scroll-pl-px</li>
<li>scroll-p-0.5</li>
<li>scroll-px-0.5</li>
<li>scroll-py-0.5</li>
<li>scroll-pt-0.5</li>
<li>scroll-pr-0.5</li>
<li>scroll-pb-0.5</li>
<li>scroll-pl-0.5</li>
<li>scroll-p-1</li>
<li>scroll-px-1</li>
<li>scroll-py-1</li>
<li>scroll-pt-1</li>
<li>scroll-pr-1</li>
<li>scroll-pb-1</li>
<li>scroll-pl-1</li>
<li><a href="https://tailwindcss.com/docs/scroll-padding"><kbd>...</kbd></a></li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="touch-action"><a aria-hidden="true" tabindex="-1" href="#touch-action"><span class="icon icon-link"></span></a>Touch Action</h3><div class="wrap-body">
<p>用于控制元素如何在触摸屏上滚动和缩放的实用程序</p>
<ul class="cols-2 style-none">
<li>touch-auto</li>
<li>touch-none</li>
<li>touch-pan-x</li>
<li>touch-pan-left</li>
<li>touch-pan-right</li>
<li>touch-pan-y</li>
<li>touch-pan-up</li>
<li>touch-pan-down</li>
<li>touch-pinch-zoom</li>
<li>touch-manipulation</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="user-select"><a aria-hidden="true" tabindex="-1" href="#user-select"><span class="icon icon-link"></span></a>User Select</h3><div class="wrap-body">
<p>用于控制用户是否可以选择元素中的文本的实用程序</p>
<ul class="cols-2 style-none">
<li>select-none</li>
<li>select-text</li>
<li>select-all</li>
<li>select-auto</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="will-change"><a aria-hidden="true" tabindex="-1" href="#will-change"><span class="icon icon-link"></span></a>Will Change</h3><div class="wrap-body">
<p>用于优化即将发生变化的元素动画的实用程序</p>
<ul class="cols-2 style-none">
<li>will-change-auto</li>
<li>will-change-scroll</li>
<li>will-change-contents</li>
<li>will-change-transform</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="filters"><a aria-hidden="true" tabindex="-1" href="#filters"><span class="icon icon-link"></span></a>Filters</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="blur"><a aria-hidden="true" tabindex="-1" href="#blur"><span class="icon icon-link"></span></a>Blur</h3><div class="wrap-body">
<p>将模糊滤镜应用于元素的实用程序</p>
<ul class="cols-3 style-none">
<li>blur-none</li>
<li>blur-sm</li>
<li>blur</li>
<li>blur-md</li>
<li>blur-lg</li>
<li>blur-xl</li>
<li>blur-2xl</li>
<li>blur-3xl</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="brightness"><a aria-hidden="true" tabindex="-1" href="#brightness"><span class="icon icon-link"></span></a>Brightness</h3><div class="wrap-body">
<p>将亮度过滤器应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>brightness-0</li>
<li>brightness-50</li>
<li>brightness-75</li>
<li>brightness-90</li>
<li>brightness-95</li>
<li>brightness-100</li>
<li>brightness-105</li>
<li>brightness-110</li>
<li>brightness-125</li>
<li>brightness-150</li>
<li>brightness-200</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="contrast"><a aria-hidden="true" tabindex="-1" href="#contrast"><span class="icon icon-link"></span></a>Contrast</h3><div class="wrap-body">
<p>用于将对比滤镜应用于元素的实用程序</p>
<ul class="cols-3 style-none">
<li>contrast-0</li>
<li>contrast-50</li>
<li>contrast-75</li>
<li>contrast-100</li>
<li>contrast-125</li>
<li>contrast-150</li>
<li>contrast-200</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="drop-shadow"><a aria-hidden="true" tabindex="-1" href="#drop-shadow"><span class="icon icon-link"></span></a>Drop Shadow</h3><div class="wrap-body">
<p>用于将阴影滤镜应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>drop-shadow-sm</li>
<li>drop-shadow</li>
<li>drop-shadow-md</li>
<li>drop-shadow-lg</li>
<li>drop-shadow-xl</li>
<li>drop-shadow-2xl</li>
<li>drop-shadow-none</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="grayscale"><a aria-hidden="true" tabindex="-1" href="#grayscale"><span class="icon icon-link"></span></a>Grayscale</h3><div class="wrap-body">
<p>用于将灰度滤镜应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>grayscale-0</li>
<li>grayscale</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="hue-rotate"><a aria-hidden="true" tabindex="-1" href="#hue-rotate"><span class="icon icon-link"></span></a>Hue Rotate</h3><div class="wrap-body">
<p>用于将色调旋转滤镜应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>hue-rotate-0</li>
<li>hue-rotate-15</li>
<li>hue-rotate-30</li>
<li>hue-rotate-60</li>
<li>hue-rotate-90</li>
<li>hue-rotate-180</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="invert"><a aria-hidden="true" tabindex="-1" href="#invert"><span class="icon icon-link"></span></a>Invert</h3><div class="wrap-body">
<p>用于将反转过滤器应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>invert-0</li>
<li>invert</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="saturate"><a aria-hidden="true" tabindex="-1" href="#saturate"><span class="icon icon-link"></span></a>Saturate</h3><div class="wrap-body">
<p>用于将饱和过滤器应用于元素的实用程序</p>
<ul class="cols-3 style-none">
<li>saturate-0</li>
<li>saturate-50</li>
<li>saturate-100</li>
<li>saturate-150</li>
<li>saturate-200</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="sepia"><a aria-hidden="true" tabindex="-1" href="#sepia"><span class="icon icon-link"></span></a>Sepia</h3><div class="wrap-body">
<p>将棕褐色滤镜应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>sepia-0</li>
<li>sepia</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="backdrop-blur"><a aria-hidden="true" tabindex="-1" href="#backdrop-blur"><span class="icon icon-link"></span></a>Backdrop Blur</h3><div class="wrap-body">
<p>将背景模糊滤镜应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>backdrop-blur-none</li>
<li>backdrop-blur-sm</li>
<li>backdrop-blur</li>
<li>backdrop-blur-md</li>
<li>backdrop-blur-lg</li>
<li>backdrop-blur-xl</li>
<li>backdrop-blur-2xl</li>
<li>backdrop-blur-3xl</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="backdrop-brightness"><a aria-hidden="true" tabindex="-1" href="#backdrop-brightness"><span class="icon icon-link"></span></a>Backdrop Brightness</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>将背景亮度滤镜应用于元素的实用程序</p>
<ul>
<li>backdrop-brightness-0</li>
<li>backdrop-brightness-50</li>
<li>backdrop-brightness-75</li>
<li>backdrop-brightness-90</li>
<li>backdrop-brightness-95</li>
<li>backdrop-brightness-100</li>
<li>backdrop-brightness-105</li>
<li>backdrop-brightness-110</li>
<li>backdrop-brightness-125</li>
<li>backdrop-brightness-150</li>
<li>backdrop-brightness-200</li>
</ul>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="backdrop-contrast"><a aria-hidden="true" tabindex="-1" href="#backdrop-contrast"><span class="icon icon-link"></span></a>Backdrop Contrast</h3><div class="wrap-body">
<p>用于将背景对比度滤镜应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>backdrop-contrast-0</li>
<li>backdrop-contrast-50</li>
<li>backdrop-contrast-75</li>
<li>backdrop-contrast-100</li>
<li>backdrop-contrast-125</li>
<li>backdrop-contrast-150</li>
<li>backdrop-contrast-200</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="backdrop-grayscale"><a aria-hidden="true" tabindex="-1" href="#backdrop-grayscale"><span class="icon icon-link"></span></a>Backdrop Grayscale</h3><div class="wrap-body">
<p>用于将背景灰度滤镜应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>backdrop-grayscale-0</li>
<li>backdrop-grayscale</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="backdrop-hue-rotate"><a aria-hidden="true" tabindex="-1" href="#backdrop-hue-rotate"><span class="icon icon-link"></span></a>Backdrop Hue Rotate</h3><div class="wrap-body">
<p>将背景色调旋转滤镜应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>backdrop-hue-rotate-0</li>
<li>backdrop-hue-rotate-15</li>
<li>backdrop-hue-rotate-30</li>
<li>backdrop-hue-rotate-60</li>
<li>backdrop-hue-rotate-90</li>
<li>backdrop-hue-rotate-180</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="backdrop-invert"><a aria-hidden="true" tabindex="-1" href="#backdrop-invert"><span class="icon icon-link"></span></a>Backdrop Invert</h3><div class="wrap-body">
<p>将背景反转滤镜应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>backdrop-invert-0</li>
<li>backdrop-invert</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="backdrop-opacity"><a aria-hidden="true" tabindex="-1" href="#backdrop-opacity"><span class="icon icon-link"></span></a>Backdrop Opacity</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>用于将背景不透明度过滤器应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>backdrop-opacity-0</li>
<li>backdrop-opacity-5</li>
<li>backdrop-opacity-10</li>
<li>backdrop-opacity-20</li>
<li>backdrop-opacity-25</li>
<li>backdrop-opacity-30</li>
<li>backdrop-opacity-40</li>
<li>backdrop-opacity-50</li>
<li>backdrop-opacity-60</li>
<li>backdrop-opacity-70</li>
<li>backdrop-opacity-75</li>
<li>backdrop-opacity-80</li>
<li>backdrop-opacity-90</li>
<li>backdrop-opacity-95</li>
<li>backdrop-opacity-100</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="backdrop-saturate"><a aria-hidden="true" tabindex="-1" href="#backdrop-saturate"><span class="icon icon-link"></span></a>Backdrop Saturate</h3><div class="wrap-body">
<p>用于将背景饱和度滤镜应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>backdrop-saturate-0</li>
<li>backdrop-saturate-50</li>
<li>backdrop-saturate-100</li>
<li>backdrop-saturate-150</li>
<li>backdrop-saturate-200</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="backdrop-sepia"><a aria-hidden="true" tabindex="-1" href="#backdrop-sepia"><span class="icon icon-link"></span></a>Backdrop Sepia</h3><div class="wrap-body">
<p>将背景棕褐色过滤器应用于元素的实用程序</p>
<ul class="cols-2 style-none">
<li>backdrop-sepia-0</li>
<li>backdrop-sepia</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="flexbox--grid"><a aria-hidden="true" tabindex="-1" href="#flexbox--grid"><span class="icon icon-link"></span></a>Flexbox &#x26; Grid</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist col-span-2 row-span-4"><div class="wrap-header h3wrap"><h3 id="flex-basis"><a aria-hidden="true" tabindex="-1" href="#flex-basis"><span class="icon icon-link"></span></a>Flex Basis</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2 row-span-4-->
<p>用于控制弹性项目初始大小的实用程序</p>
<ul class="cols-5 style-none">
<li>basis-0</li>
<li>basis-1</li>
<li>basis-2</li>
<li>basis-3</li>
<li>basis-4</li>
<li>basis-5</li>
<li>basis-6</li>
<li>basis-7</li>
<li>basis-8</li>
<li>basis-9</li>
<li>basis-10</li>
<li>basis-11</li>
<li>basis-12</li>
<li>basis-14</li>
<li>basis-16</li>
<li>basis-20</li>
<li>basis-24</li>
<li>basis-28</li>
<li>basis-32</li>
<li>basis-36</li>
<li>basis-40</li>
<li>basis-44</li>
<li>basis-48</li>
<li>basis-52</li>
<li>basis-56</li>
<li>basis-60</li>
<li>basis-64</li>
<li>basis-72</li>
<li>basis-80</li>
<li>basis-96</li>
<li>basis-auto</li>
<li>basis-px</li>
<li>basis-0.5</li>
<li>basis-1.5</li>
<li>basis-2.5</li>
<li>basis-3.5</li>
<li>basis-1/2</li>
<li>basis-1/3</li>
<li>basis-2/3</li>
<li>basis-1/4</li>
<li>basis-2/4</li>
<li>basis-3/4</li>
<li>basis-1/5</li>
<li>basis-2/5</li>
<li>basis-3/5</li>
<li>basis-4/5</li>
<li>basis-1/6</li>
<li>basis-2/6</li>
<li>basis-3/6</li>
<li>basis-4/6</li>
<li>basis-5/6</li>
<li>basis-1/12</li>
<li>basis-2/12</li>
<li>basis-3/12</li>
<li>basis-4/12</li>
<li>basis-5/12</li>
<li>basis-6/12</li>
<li>basis-7/12</li>
<li>basis-8/12</li>
<li>basis-9/12</li>
<li>basis-10/12</li>
<li>basis-11/12</li>
<li>basis-full</li>
</ul>
<!--rehype:className=cols-5 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flex-direction"><a aria-hidden="true" tabindex="-1" href="#flex-direction"><span class="icon icon-link"></span></a>Flex Direction</h3><div class="wrap-body">
<p>用于控制弹性项目方向的实用程序</p>
<ul class="cols-2 style-none">
<li>flex-row</li>
<li>flex-row-reverse</li>
<li>flex-col</li>
<li>flex-col-reverse</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flex-wrap"><a aria-hidden="true" tabindex="-1" href="#flex-wrap"><span class="icon icon-link"></span></a>Flex Wrap</h3><div class="wrap-body">
<p>用于控制弹性项目包装方式的实用程序</p>
<ul class="cols-2 style-none">
<li>flex-wrap</li>
<li>flex-wrap-reverse</li>
<li>flex-nowrap</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flex"><a aria-hidden="true" tabindex="-1" href="#flex"><span class="icon icon-link"></span></a>Flex</h3><div class="wrap-body">
<p>用于控制弹性项目如何增长和收缩的实用程序</p>
<ul class="cols-4 style-none">
<li>flex-1</li>
<li>flex-auto</li>
<li>flex-initial</li>
<li>flex-none</li>
</ul>
<!--rehype:className=cols-4 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flex-grow"><a aria-hidden="true" tabindex="-1" href="#flex-grow"><span class="icon icon-link"></span></a>Flex Grow</h3><div class="wrap-body">
<p>用于控制弹性项目增长方式的实用程序</p>
<ul class="cols-3 style-none">
<li>grow</li>
<li>grow-0</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flex-shrink"><a aria-hidden="true" tabindex="-1" href="#flex-shrink"><span class="icon icon-link"></span></a>Flex Shrink</h3><div class="wrap-body">
<p>用于控制弹性项目收缩方式的实用程序</p>
<ul class="cols-2 style-none">
<li>shrink</li>
<li>shrink-0</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="order"><a aria-hidden="true" tabindex="-1" href="#order"><span class="icon icon-link"></span></a>Order</h3><div class="wrap-body">
<p>用于控制弹性和网格项目顺序的实用程序</p>
<ul class="cols-3 style-none">
<li>order-1</li>
<li>order-2</li>
<li>order-3</li>
<li>order-4</li>
<li>order-5</li>
<li>order-6</li>
<li>order-7</li>
<li>order-8</li>
<li>order-9</li>
<li>order-10</li>
<li>order-11</li>
<li>order-12</li>
<li>order-first</li>
<li>order-last</li>
<li>order-none</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="grid-template-columns"><a aria-hidden="true" tabindex="-1" href="#grid-template-columns"><span class="icon icon-link"></span></a>Grid Template Columns</h3><div class="wrap-body">
<p>用于指定网格布局中的列的实用程序</p>
<ul class="cols-2 style-none">
<li>grid-cols-1</li>
<li>grid-cols-2</li>
<li>grid-cols-3</li>
<li>grid-cols-4</li>
<li>grid-cols-5</li>
<li>grid-cols-6</li>
<li>grid-cols-7</li>
<li>grid-cols-8</li>
<li>grid-cols-9</li>
<li>grid-cols-10</li>
<li>grid-cols-11</li>
<li>grid-cols-12</li>
<li>grid-cols-none</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="grid-column-startend"><a aria-hidden="true" tabindex="-1" href="#grid-column-startend"><span class="icon icon-link"></span></a>Grid Column Start/End</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<p>用于控制元素如何调整大小和跨网格列放置的实用程序</p>
<ul class="cols-3 style-none">
<li>col-auto</li>
<li>col-span-1</li>
<li>col-span-2</li>
<li>col-span-3</li>
<li>col-span-4</li>
<li>col-span-5</li>
<li>col-span-6</li>
<li>col-span-7</li>
<li>col-span-8</li>
<li>col-span-9</li>
<li>col-span-10</li>
<li>col-span-11</li>
<li>col-span-12</li>
<li>col-span-full</li>
<li>col-start-1</li>
<li>col-start-2</li>
<li>col-start-3</li>
<li>col-start-4</li>
<li>col-start-5</li>
<li>col-start-6</li>
<li>col-start-7</li>
<li>col-start-8</li>
<li>col-start-9</li>
<li>col-start-10</li>
<li>col-start-11</li>
<li>col-start-12</li>
<li>col-start-13</li>
<li>col-start-auto</li>
<li>col-end-1</li>
<li>col-end-2</li>
<li>col-end-3</li>
<li>col-end-4</li>
<li>col-end-5</li>
<li>col-end-6</li>
<li>col-end-7</li>
<li>col-end-8</li>
<li>col-end-9</li>
<li>col-end-10</li>
<li>col-end-11</li>
<li>col-end-12</li>
<li>col-end-13</li>
<li>col-end-auto</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="grid-template-rows"><a aria-hidden="true" tabindex="-1" href="#grid-template-rows"><span class="icon icon-link"></span></a>Grid Template Rows</h3><div class="wrap-body">
<p>用于指定网格布局中的行的实用程序</p>
<ul class="cols-2 style-none">
<li>grid-rows-1</li>
<li>grid-rows-2</li>
<li>grid-rows-3</li>
<li>grid-rows-4</li>
<li>grid-rows-5</li>
<li>grid-rows-6</li>
<li>grid-rows-none</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="grid-row-startend"><a aria-hidden="true" tabindex="-1" href="#grid-row-startend"><span class="icon icon-link"></span></a>Grid Row Start/End</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<p>用于控制元素如何调整大小和跨网格行放置的实用程序</p>
<ul class="cols-2 style-none">
<li>row-auto</li>
<li>row-span-1</li>
<li>row-span-2</li>
<li>row-span-3</li>
<li>row-span-4</li>
<li>row-span-5</li>
<li>row-span-6</li>
<li>row-span-full</li>
<li>row-start-1</li>
<li>row-start-2</li>
<li>row-start-3</li>
<li>row-start-4</li>
<li>row-start-5</li>
<li>row-start-6</li>
<li>row-start-7</li>
<li>row-start-auto</li>
<li>row-end-1</li>
<li>row-end-2</li>
<li>row-end-3</li>
<li>row-end-4</li>
<li>row-end-5</li>
<li>row-end-6</li>
<li>row-end-7</li>
<li>row-end-auto</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="grid-auto-flow"><a aria-hidden="true" tabindex="-1" href="#grid-auto-flow"><span class="icon icon-link"></span></a>Grid Auto Flow</h3><div class="wrap-body">
<p>用于控制网格中元素如何自动放置的实用程序</p>
<ul class="cols-2 style-none">
<li>grid-flow-row</li>
<li>grid-flow-col</li>
<li>grid-flow-dense</li>
<li>grid-flow-row-dense</li>
<li>grid-flow-col-dense</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="grid-auto-columns"><a aria-hidden="true" tabindex="-1" href="#grid-auto-columns"><span class="icon icon-link"></span></a>Grid Auto Columns</h3><div class="wrap-body">
<p>用于控制隐式创建的网格列大小的实用程序</p>
<ul class="cols-2 style-none">
<li>auto-cols-auto</li>
<li>auto-cols-min</li>
<li>auto-cols-max</li>
<li>auto-cols-fr</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="grid-auto-rows"><a aria-hidden="true" tabindex="-1" href="#grid-auto-rows"><span class="icon icon-link"></span></a>Grid Auto Rows</h3><div class="wrap-body">
<p>用于控制隐式创建的网格行大小的实用程序</p>
<ul class="cols-2 style-none">
<li>auto-rows-auto</li>
<li>auto-rows-min</li>
<li>auto-rows-max</li>
<li>auto-rows-fr</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist row-span-5"><div class="wrap-header h3wrap"><h3 id="gap"><a aria-hidden="true" tabindex="-1" href="#gap"><span class="icon icon-link"></span></a>Gap</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-5-->
<p>用于控制网格和 flexbox 项目之间的间距的实用程序</p>
<ul class="cols-3 style-none">
<li>gap-x-0</li>
<li>gap-y-0</li>
<li>gap-px</li>
<li>gap-x-px</li>
<li>gap-y-px</li>
<li>gap-0.5</li>
<li>gap-x-0.5</li>
<li>gap-y-0.5</li>
<li>gap-1</li>
<li>gap-x-1</li>
<li>gap-y-1</li>
<li>gap-1.5</li>
<li>gap-x-1.5</li>
<li>gap-y-1.5</li>
<li>gap-2</li>
<li>gap-x-2</li>
<li>gap-y-2</li>
<li>gap-2.5</li>
<li>gap-x-2.5</li>
<li>gap-y-2.5</li>
<li>gap-3</li>
<li>gap-x-3</li>
<li>gap-y-3</li>
<li>gap-3.5</li>
<li>gap-x-3.5</li>
<li>gap-y-3.5</li>
<li>gap-4</li>
<li>gap-x-4</li>
<li>gap-y-4</li>
<li>gap-5</li>
<li>gap-x-5</li>
<li>gap-y-5</li>
<li>gap-6</li>
<li>gap-x-6</li>
<li>gap-y-6</li>
<li>gap-7</li>
<li>gap-x-7</li>
<li>gap-y-7</li>
<li>gap-8</li>
<li>gap-x-8</li>
<li>gap-y-8</li>
<li>gap-9</li>
<li>gap-x-9</li>
<li>gap-y-9</li>
<li>gap-10</li>
<li>gap-x-10</li>
<li>gap-y-10</li>
<li>gap-11</li>
<li>gap-x-11</li>
<li>gap-y-11</li>
<li>gap-12</li>
<li>gap-x-12</li>
<li>gap-y-12</li>
<li>gap-14</li>
<li>gap-x-14</li>
<li>gap-y-14</li>
<li>gap-16</li>
<li>gap-x-16</li>
<li>gap-y-16</li>
<li>gap-20</li>
<li>gap-x-20</li>
<li>gap-y-20</li>
<li>gap-24</li>
<li>gap-x-24</li>
<li>gap-y-24</li>
<li>gap-28</li>
<li>gap-x-28</li>
<li>gap-y-28</li>
<li>gap-32</li>
<li>gap-x-32</li>
<li>gap-y-32</li>
<li>gap-36</li>
<li>gap-x-36</li>
<li>gap-y-36</li>
<li>gap-40</li>
<li>gap-x-40</li>
<li>gap-y-40</li>
<li>gap-44</li>
<li>gap-x-44</li>
<li>gap-y-44</li>
<li>gap-48</li>
<li>gap-x-48</li>
<li>gap-y-48</li>
<li>gap-52</li>
<li>gap-x-52</li>
<li>gap-y-52</li>
<li>gap-56</li>
<li>gap-x-56</li>
<li>gap-y-56</li>
<li>gap-60</li>
<li>gap-x-60</li>
<li>gap-y-60</li>
<li>gap-64</li>
<li>gap-x-64</li>
<li>gap-y-64</li>
<li>gap-72</li>
<li>gap-x-72</li>
<li>gap-y-72</li>
<li>gap-80</li>
<li>gap-x-80</li>
<li>gap-y-80</li>
<li>gap-96</li>
<li>gap-x-96</li>
<li>gap-y-96</li>
</ul>
<!--rehype:className=cols-3 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="justify-content"><a aria-hidden="true" tabindex="-1" href="#justify-content"><span class="icon icon-link"></span></a>Justify Content</h3><div class="wrap-body">
<p>用于控制 flex 和 grid 项目如何沿容器的主轴定位的实用程序</p>
<ul class="cols-2 style-none">
<li>justify-start</li>
<li>justify-end</li>
<li>justify-center</li>
<li>justify-between</li>
<li>justify-around</li>
<li>justify-evenly</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="justify-items"><a aria-hidden="true" tabindex="-1" href="#justify-items"><span class="icon icon-link"></span></a>Justify Items</h3><div class="wrap-body">
<p>用于控制网格项目如何沿其内联轴对齐的实用程序</p>
<ul class="cols-2 style-none">
<li>justify-items-start</li>
<li>justify-items-end</li>
<li>justify-items-center</li>
<li>justify-items-stretch</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="justify-self"><a aria-hidden="true" tabindex="-1" href="#justify-self"><span class="icon icon-link"></span></a>Justify Self</h3><div class="wrap-body">
<p>用于控制单个网格项目如何沿其内联轴对齐的实用程序</p>
<ul class="cols-2 style-none">
<li>justify-self-auto</li>
<li>justify-self-start</li>
<li>justify-self-end</li>
<li>justify-self-center</li>
<li>justify-self-stretch</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="align-content"><a aria-hidden="true" tabindex="-1" href="#align-content"><span class="icon icon-link"></span></a>Align Content</h3><div class="wrap-body">
<p>用于控制行在多行 flex 和网格容器中的定位方式的实用程序</p>
<ul class="cols-2 style-none">
<li>content-center</li>
<li>content-start</li>
<li>content-end</li>
<li>content-between</li>
<li>content-around</li>
<li>content-evenly</li>
<li>content-baseline</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="align-items"><a aria-hidden="true" tabindex="-1" href="#align-items"><span class="icon icon-link"></span></a>Align Items</h3><div class="wrap-body">
<p>用于控制 flex 和 grid 项目如何沿容器的横轴定位的实用程序</p>
<ul class="cols-2 style-none">
<li>items-start</li>
<li>items-end</li>
<li>items-center</li>
<li>items-baseline</li>
<li>items-stretch</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="align-self"><a aria-hidden="true" tabindex="-1" href="#align-self"><span class="icon icon-link"></span></a>Align Self</h3><div class="wrap-body">
<p>用于控制单个弹性或网格项目如何沿其容器的横轴定位的实用程序</p>
<ul class="cols-2 style-none">
<li>self-auto</li>
<li>self-start</li>
<li>self-end</li>
<li>self-center</li>
<li>self-stretch</li>
<li>self-baseline</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="place-content"><a aria-hidden="true" tabindex="-1" href="#place-content"><span class="icon icon-link"></span></a>Place Content</h3><div class="wrap-body">
<p>用于控制内容如何同时对齐和对齐的实用程序</p>
<ul class="cols-2 style-none">
<li>place-content-center</li>
<li>place-content-start</li>
<li>place-content-end</li>
<li>place-content-between</li>
<li>place-content-around</li>
<li>place-content-evenly</li>
<li>place-content-baseline</li>
<li>place-content-stretch</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="place-items"><a aria-hidden="true" tabindex="-1" href="#place-items"><span class="icon icon-link"></span></a>Place Items</h3><div class="wrap-body">
<p>用于控制项目如何同时对齐和对齐的实用程序</p>
<ul class="cols-2 style-none">
<li>place-items-start</li>
<li>place-items-end</li>
<li>place-items-center</li>
<li>place-items-baseline</li>
<li>place-items-stretch</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="place-self"><a aria-hidden="true" tabindex="-1" href="#place-self"><span class="icon icon-link"></span></a>Place Self</h3><div class="wrap-body">
<p>用于控制单个项目如何同时对齐和对齐的实用程序</p>
<ul class="cols-2 style-none">
<li>place-self-auto</li>
<li>place-self-start</li>
<li>place-self-end</li>
<li>place-self-center</li>
<li>place-self-stretch</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="accessibility"><a aria-hidden="true" tabindex="-1" href="#accessibility"><span class="icon icon-link"></span></a>Accessibility</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="screen-readers"><a aria-hidden="true" tabindex="-1" href="#screen-readers"><span class="icon icon-link"></span></a>Screen Readers</h3><div class="wrap-body">
<p>用于提高屏幕阅读器可访问性的实用程序</p>
<ul class="cols-2 style-none">
<li>sr-only</li>
<li>not-sr-only</li>
</ul>
<!--rehype:className=cols-2 style-none-->
</div></div></div></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&#x26;A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.3" defer></script><script src="../js/fuse.min.js?v=1.8.3" defer></script><script src="../js/main.js?v=1.8.3" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
</html>
Reference in New Issue View Git Blame Copy Permalink