twcss
Version:
Fast minimalist utility-first CSS runtime inspired by Tailwind and Twind
3,147 lines (2,410 loc) • 78.8 kB
Markdown
# Reference
## Defaults
### CSS reset
```css
*,*::before,*::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; margin: 0; padding: 0 }
ul,ol { list-style: none }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit }
input,button,textarea,select { font: inherit }
body,html { height: 100% }
img,video { max-width: 100%; height: auto }
cite { font-style: normal }
a { text-decoration: none; color: inherit }
button { text-align: unset; background: transparent; color: inherit }
body { overflow-y: scroll }
svg { display: block }
::placeholder { color: currentColor; opacity: 0.8 }
[tw]:not([class]) { display: none }
```
### Media and container queries
All container queries are relative to the ancestor with `@container` class.
```css
/* sm */
@media screen and (max-width: 599px)
```
```css
/* md */
@media screen and (min-width: 600px) and (max-width: 959px)
```
```css
/* lg */
@media screen and (min-width: 960px)
```
```css
/* light */
@media (prefers-color-scheme: light)
```
```css
/* dark */
@media (prefers-color-scheme: dark)
```
```css
/* inverted-colors */
@media (inverted-colors: inverted)
```
```css
/* pointer-coarse */
@media (pointer: coarse)
```
```css
/* pointer-fine */
@media (pointer: fine)
```
```css
/* pointer-none */
@media (pointer: none)
```
```css
/* print */
@media print
```
```css
/* @3xs */
@container (width >= 256px)
```
```css
/* @2xs */
@container (width >= 288px)
```
```css
/* @xs */
@container (width >= 320px)
```
```css
/* @sm */
@container (width >= 384px)
```
```css
/* @md */
@container (width >= 448px)
```
```css
/* @lg */
@container (width >= 512px)
```
```css
/* @xl */
@container (width >= 576px)
```
```css
/* @2xl */
@container (width >= 672px)
```
```css
/* @3xl */
@container (width >= 768px)
```
```css
/* @4xl */
@container (width >= 896px)
```
```css
/* @5xl */
@container (width >= 1024px)
```
```css
/* @6xl */
@container (width >= 1152px)
```
```css
/* @7xl */
@container (width >= 1280px)
```
### Prefixes
Classes can be prefixed. The order is always `query:state:pseudo:class`.
- Supported states: `active`, `any-link`, `checked`, `default`, `defined`, `disabled`, `empty`, `enabled`, `first-child`, `first-of-type`, `focus`, `focus-visible`, `focus-within`, `fullscreen`, `future`, `host`, `hover`, `in-range`, `indeterminate`, `invalid`, `last-child`, `last-of-type`, `link`, `modal`, `only-child`, `only-of-type`, `open`, `optional`, `out-of-range`, `past`, `picture-in-picture`, `placeholder-shown`, `popover-open`, `read-only`, `read-write`, `required`, `root`, `scope`, `target`, `user-invalid`, `user-valid`, `valid`, `visited`.
- Supported pseudo elements: `after`, `backdrop`, `before`, `cue`, `details-content`, `file-selector-button`, `first-letter`, `first-line`, `grammar-error`, `marker`, `placeholder`, `selection`, `spelling-error`, `target-text`.
### Keyframes
```css
@keyframes expand {
from { opacity: 0; transform: translateY(-8px) } to { opacity: 1 }
}
```
```css
@keyframes toast {
from { opacity: 0; transform: translateY(48px) } to { opacity: 1 }
}
```
```css
@keyframes fade {
0% { opacity: 0 } 100% { opacity: 1 }
}
```
### Colors
In addition to the colors below, `black`, `white`, `transparent`, `current` and `inherit` are also supported.
| | 50|100|200|300|400|500|600|700|800|900|950|
|---|---|---|---|---|---|---|---|---|---|---|---|
**red**|$\color{#fef2f2}{\textsf{█}}$|$\color{#ffe2e2}{\textsf{█}}$|$\color{#ffc9c9}{\textsf{█}}$|$\color{#ffa2a2}{\textsf{█}}$|$\color{#ff6467}{\textsf{█}}$|$\color{#fb2c36}{\textsf{█}}$|$\color{#e7000b}{\textsf{█}}$|$\color{#c10007}{\textsf{█}}$|$\color{#9f0712}{\textsf{█}}$|$\color{#82181a}{\textsf{█}}$|$\color{#460809}{\textsf{█}}$
**orange**|$\color{#fff7ed}{\textsf{█}}$|$\color{#ffedd4}{\textsf{█}}$|$\color{#ffd6a8}{\textsf{█}}$|$\color{#ffb86a}{\textsf{█}}$|$\color{#ff8904}{\textsf{█}}$|$\color{#ff6900}{\textsf{█}}$|$\color{#f54900}{\textsf{█}}$|$\color{#ca3500}{\textsf{█}}$|$\color{#9f2d00}{\textsf{█}}$|$\color{#7e2a0c}{\textsf{█}}$|$\color{#441306}{\textsf{█}}$
**amber**|$\color{#fffbeb}{\textsf{█}}$|$\color{#fef3c6}{\textsf{█}}$|$\color{#fee685}{\textsf{█}}$|$\color{#ffd230}{\textsf{█}}$|$\color{#ffb900}{\textsf{█}}$|$\color{#fe9a00}{\textsf{█}}$|$\color{#e17100}{\textsf{█}}$|$\color{#bb4d00}{\textsf{█}}$|$\color{#973c00}{\textsf{█}}$|$\color{#7b3306}{\textsf{█}}$|$\color{#461901}{\textsf{█}}$
**yellow**|$\color{#fefce8}{\textsf{█}}$|$\color{#fef9c2}{\textsf{█}}$|$\color{#fff085}{\textsf{█}}$|$\color{#ffdf20}{\textsf{█}}$|$\color{#fdc700}{\textsf{█}}$|$\color{#f0b100}{\textsf{█}}$|$\color{#d08700}{\textsf{█}}$|$\color{#a65f00}{\textsf{█}}$|$\color{#894b00}{\textsf{█}}$|$\color{#733e0a}{\textsf{█}}$|$\color{#432004}{\textsf{█}}$
**lime**|$\color{#f7fee7}{\textsf{█}}$|$\color{#ecfcca}{\textsf{█}}$|$\color{#d8f999}{\textsf{█}}$|$\color{#bbf451}{\textsf{█}}$|$\color{#9ae600}{\textsf{█}}$|$\color{#7ccf00}{\textsf{█}}$|$\color{#5ea500}{\textsf{█}}$|$\color{#497d00}{\textsf{█}}$|$\color{#3c6300}{\textsf{█}}$|$\color{#35530e}{\textsf{█}}$|$\color{#192e03}{\textsf{█}}$
**green**|$\color{#f0fdf4}{\textsf{█}}$|$\color{#dcfce7}{\textsf{█}}$|$\color{#b9f8cf}{\textsf{█}}$|$\color{#7bf1a8}{\textsf{█}}$|$\color{#05df72}{\textsf{█}}$|$\color{#00c950}{\textsf{█}}$|$\color{#00a63e}{\textsf{█}}$|$\color{#008236}{\textsf{█}}$|$\color{#016630}{\textsf{█}}$|$\color{#0d542b}{\textsf{█}}$|$\color{#032e15}{\textsf{█}}$
**emerald**|$\color{#ecfdf5}{\textsf{█}}$|$\color{#d0fae5}{\textsf{█}}$|$\color{#a4f4cf}{\textsf{█}}$|$\color{#5ee9b5}{\textsf{█}}$|$\color{#00d492}{\textsf{█}}$|$\color{#00bc7d}{\textsf{█}}$|$\color{#009966}{\textsf{█}}$|$\color{#007a55}{\textsf{█}}$|$\color{#006045}{\textsf{█}}$|$\color{#004f3b}{\textsf{█}}$|$\color{#002c22}{\textsf{█}}$
**teal**|$\color{#f0fdfa}{\textsf{█}}$|$\color{#cbfbf1}{\textsf{█}}$|$\color{#96f7e4}{\textsf{█}}$|$\color{#46ecd5}{\textsf{█}}$|$\color{#00d5be}{\textsf{█}}$|$\color{#00bba7}{\textsf{█}}$|$\color{#009689}{\textsf{█}}$|$\color{#00786f}{\textsf{█}}$|$\color{#005f5a}{\textsf{█}}$|$\color{#0b4f4a}{\textsf{█}}$|$\color{#022f2e}{\textsf{█}}$
**cyan**|$\color{#ecfeff}{\textsf{█}}$|$\color{#cefafe}{\textsf{█}}$|$\color{#a2f4fd}{\textsf{█}}$|$\color{#53eafd}{\textsf{█}}$|$\color{#00d3f3}{\textsf{█}}$|$\color{#00b8db}{\textsf{█}}$|$\color{#0092b8}{\textsf{█}}$|$\color{#007595}{\textsf{█}}$|$\color{#005f78}{\textsf{█}}$|$\color{#104e64}{\textsf{█}}$|$\color{#053345}{\textsf{█}}$
**sky**|$\color{#f0f9ff}{\textsf{█}}$|$\color{#dff2fe}{\textsf{█}}$|$\color{#b8e6fe}{\textsf{█}}$|$\color{#74d4ff}{\textsf{█}}$|$\color{#00bcff}{\textsf{█}}$|$\color{#00a6f4}{\textsf{█}}$|$\color{#0084d1}{\textsf{█}}$|$\color{#0069a8}{\textsf{█}}$|$\color{#00598a}{\textsf{█}}$|$\color{#024a70}{\textsf{█}}$|$\color{#052f4a}{\textsf{█}}$
**blue**|$\color{#eff6ff}{\textsf{█}}$|$\color{#dbeafe}{\textsf{█}}$|$\color{#bedbff}{\textsf{█}}$|$\color{#8ec5ff}{\textsf{█}}$|$\color{#51a2ff}{\textsf{█}}$|$\color{#2b7fff}{\textsf{█}}$|$\color{#155dfc}{\textsf{█}}$|$\color{#1447e6}{\textsf{█}}$|$\color{#193cb8}{\textsf{█}}$|$\color{#1c398e}{\textsf{█}}$|$\color{#162456}{\textsf{█}}$
**indigo**|$\color{#eef2ff}{\textsf{█}}$|$\color{#e0e7ff}{\textsf{█}}$|$\color{#c6d2ff}{\textsf{█}}$|$\color{#a3b3ff}{\textsf{█}}$|$\color{#7c86ff}{\textsf{█}}$|$\color{#615fff}{\textsf{█}}$|$\color{#4f39f6}{\textsf{█}}$|$\color{#432dd7}{\textsf{█}}$|$\color{#372aac}{\textsf{█}}$|$\color{#312c85}{\textsf{█}}$|$\color{#1e1a4d}{\textsf{█}}$
**violet**|$\color{#f5f3ff}{\textsf{█}}$|$\color{#ede9fe}{\textsf{█}}$|$\color{#ddd6ff}{\textsf{█}}$|$\color{#c4b4ff}{\textsf{█}}$|$\color{#a684ff}{\textsf{█}}$|$\color{#8e51ff}{\textsf{█}}$|$\color{#7f22fe}{\textsf{█}}$|$\color{#7008e7}{\textsf{█}}$|$\color{#5d0ec0}{\textsf{█}}$|$\color{#4d179a}{\textsf{█}}$|$\color{#2f0d68}{\textsf{█}}$
**purple**|$\color{#faf5ff}{\textsf{█}}$|$\color{#f3e8ff}{\textsf{█}}$|$\color{#e9d4ff}{\textsf{█}}$|$\color{#dab2ff}{\textsf{█}}$|$\color{#c27aff}{\textsf{█}}$|$\color{#ad46ff}{\textsf{█}}$|$\color{#9810fa}{\textsf{█}}$|$\color{#8200db}{\textsf{█}}$|$\color{#6e11b0}{\textsf{█}}$|$\color{#59168b}{\textsf{█}}$|$\color{#3c0366}{\textsf{█}}$
**fuchsia**|$\color{#fdf4ff}{\textsf{█}}$|$\color{#fae8ff}{\textsf{█}}$|$\color{#f6cfff}{\textsf{█}}$|$\color{#f4a8ff}{\textsf{█}}$|$\color{#ed6aff}{\textsf{█}}$|$\color{#e12afb}{\textsf{█}}$|$\color{#c800de}{\textsf{█}}$|$\color{#a800b7}{\textsf{█}}$|$\color{#8a0194}{\textsf{█}}$|$\color{#721378}{\textsf{█}}$|$\color{#4b004f}{\textsf{█}}$
**pink**|$\color{#fdf2f8}{\textsf{█}}$|$\color{#fce7f3}{\textsf{█}}$|$\color{#fccee8}{\textsf{█}}$|$\color{#fda5d5}{\textsf{█}}$|$\color{#fb64b6}{\textsf{█}}$|$\color{#f6339a}{\textsf{█}}$|$\color{#e60076}{\textsf{█}}$|$\color{#c6005c}{\textsf{█}}$|$\color{#a3004c}{\textsf{█}}$|$\color{#861043}{\textsf{█}}$|$\color{#510424}{\textsf{█}}$
**rose**|$\color{#fff1f2}{\textsf{█}}$|$\color{#ffe4e6}{\textsf{█}}$|$\color{#ffccd3}{\textsf{█}}$|$\color{#ffa1ad}{\textsf{█}}$|$\color{#ff637e}{\textsf{█}}$|$\color{#ff2056}{\textsf{█}}$|$\color{#ec003f}{\textsf{█}}$|$\color{#c70036}{\textsf{█}}$|$\color{#a50036}{\textsf{█}}$|$\color{#8b0836}{\textsf{█}}$|$\color{#4d0218}{\textsf{█}}$
**slate**|$\color{#f8fafc}{\textsf{█}}$|$\color{#f1f5f9}{\textsf{█}}$|$\color{#e2e8f0}{\textsf{█}}$|$\color{#cad5e2}{\textsf{█}}$|$\color{#90a1b9}{\textsf{█}}$|$\color{#62748e}{\textsf{█}}$|$\color{#45556c}{\textsf{█}}$|$\color{#314158}{\textsf{█}}$|$\color{#1d293d}{\textsf{█}}$|$\color{#0f172b}{\textsf{█}}$|$\color{#020618}{\textsf{█}}$
**gray**|$\color{#f9fafb}{\textsf{█}}$|$\color{#f3f4f6}{\textsf{█}}$|$\color{#e5e7eb}{\textsf{█}}$|$\color{#d1d5dc}{\textsf{█}}$|$\color{#99a1af}{\textsf{█}}$|$\color{#6a7282}{\textsf{█}}$|$\color{#4a5565}{\textsf{█}}$|$\color{#364153}{\textsf{█}}$|$\color{#1e2939}{\textsf{█}}$|$\color{#101828}{\textsf{█}}$|$\color{#030712}{\textsf{█}}$
**zinc**|$\color{#fafafa}{\textsf{█}}$|$\color{#f4f4f5}{\textsf{█}}$|$\color{#e4e4e7}{\textsf{█}}$|$\color{#d4d4d8}{\textsf{█}}$|$\color{#9f9fa9}{\textsf{█}}$|$\color{#71717b}{\textsf{█}}$|$\color{#52525c}{\textsf{█}}$|$\color{#3f3f47}{\textsf{█}}$|$\color{#27272a}{\textsf{█}}$|$\color{#18181b}{\textsf{█}}$|$\color{#09090b}{\textsf{█}}$
**neutral**|$\color{#fafafa}{\textsf{█}}$|$\color{#f5f5f5}{\textsf{█}}$|$\color{#e5e5e5}{\textsf{█}}$|$\color{#d4d4d4}{\textsf{█}}$|$\color{#a1a1a1}{\textsf{█}}$|$\color{#737373}{\textsf{█}}$|$\color{#525252}{\textsf{█}}$|$\color{#404040}{\textsf{█}}$|$\color{#262626}{\textsf{█}}$|$\color{#171717}{\textsf{█}}$|$\color{#0a0a0a}{\textsf{█}}$
**stone**|$\color{#fafaf9}{\textsf{█}}$|$\color{#f5f5f4}{\textsf{█}}$|$\color{#e7e5e4}{\textsf{█}}$|$\color{#d6d3d1}{\textsf{█}}$|$\color{#a6a09b}{\textsf{█}}$|$\color{#79716b}{\textsf{█}}$|$\color{#57534d}{\textsf{█}}$|$\color{#44403b}{\textsf{█}}$|$\color{#292524}{\textsf{█}}$|$\color{#1c1917}{\textsf{█}}$|$\color{#0c0a09}{\textsf{█}}$
### Dynamic properties
Dynamic properties can be set by adding a suffix according to the table below. With a few exceptions, this mainly applies to sizing. Note that for simplicity the engine treats all of them equally, which means not all combinations will result in a valid CSS. A good example is background image: `bg-[url(...)]` makes sense, whereas `bg-1/3` does not.
|Value|Output|
|-----|------|
|`class-<number>`|`property: calc(<number> * 4px)`|
|`-class-<number>`|`property: calc(-<number> * 4px)`|
|`class-<fraction>`|`property: calc(<fraction> * 100%)`|
|`-class-<fraction>`|`property: calc(-<fraction> * 100%)`|
|`class-[<value>]`|`property: <value>`|
|`class-(--custom-property)`|`property: var(--custom-property)`|
|`class-auto`|`property: auto`|
|`class-px`|`property: 1px`|
|`class-full`|`property: 100%`|
|`class-screen`|`property: 100vw`|
|`class-dvw`|`property: 100vw`|
|`class-dvh`|`property: 100vh`|
|`class-lvw`|`property: 100lvw`|
|`class-lvh`|`property: 100lvh`|
|`class-svw`|`property: 100svw`|
|`class-svh`|`property: 100svh`|
|`class-min`|`property: min-content`|
|`class-max`|`property: max-content`|
|`class-fit`|`property: fit-content`|
## Layout
### aspect-ratio
```css
.aspect-auto { aspect-ratio: auto }
```
```css
.aspect-square { aspect-ratio: 1 / 1 }
```
```css
.aspect-video { aspect-ratio: 16 / 9 }
```
```css
.aspect-SUFFIX { aspect-ratio: ... }
```
### columns
```css
.columns-1 { columns: 1 }
```
```css
.columns-2 { columns: 2 }
```
```css
.columns-3 { columns: 3 }
```
```css
.columns-4 { columns: 4 }
```
```css
.columns-5 { columns: 5 }
```
```css
.columns-6 { columns: 6 }
```
```css
.columns-7 { columns: 7 }
```
```css
.columns-8 { columns: 8 }
```
```css
.columns-9 { columns: 9 }
```
```css
.columns-10 { columns: 10 }
```
```css
.columns-11 { columns: 11 }
```
```css
.columns-12 { columns: 12 }
```
```css
.columns-auto { columns: auto }
```
```css
.order-1 { columns: 1 }
```
```css
.order-2 { columns: 2 }
```
```css
.order-3 { columns: 3 }
```
```css
.order-4 { columns: 4 }
```
```css
.order-5 { columns: 5 }
```
```css
.order-6 { columns: 6 }
```
```css
.order-7 { columns: 7 }
```
```css
.order-8 { columns: 8 }
```
```css
.order-9 { columns: 9 }
```
```css
.order-10 { columns: 10 }
```
```css
.order-11 { columns: 11 }
```
```css
.order-12 { columns: 12 }
```
### break-after
```css
.break-after-auto { break-after: auto }
```
```css
.break-after-avoid { break-after: avoid }
```
```css
.break-after-avoid-page { break-after: avoid-page }
```
```css
.break-after-page { break-after: page }
```
```css
.break-after-left { break-after: left }
```
```css
.break-after-right { break-after: right }
```
```css
.break-after-column { break-after: column }
```
```css
.break-before-auto { break-after: auto }
```
```css
.break-before-avoid { break-after: avoid }
```
```css
.break-before-avoid-page { break-after: avoid-page }
```
```css
.break-before-page { break-after: page }
```
```css
.break-before-left { break-after: left }
```
```css
.break-before-right { break-after: right }
```
```css
.break-before-column { break-after: column }
```
### break-before
```css
.break-after-auto { break-after: auto }
```
```css
.break-after-avoid { break-after: avoid }
```
```css
.break-after-avoid-page { break-after: avoid-page }
```
```css
.break-after-page { break-after: page }
```
```css
.break-after-left { break-after: left }
```
```css
.break-after-right { break-after: right }
```
```css
.break-after-column { break-after: column }
```
```css
.break-before-auto { break-after: auto }
```
```css
.break-before-avoid { break-after: avoid }
```
```css
.break-before-avoid-page { break-after: avoid-page }
```
```css
.break-before-page { break-after: page }
```
```css
.break-before-left { break-after: left }
```
```css
.break-before-right { break-after: right }
```
```css
.break-before-column { break-after: column }
```
### break-inside
```css
.break-after-auto { break-after: auto }
```
```css
.break-after-avoid { break-after: avoid }
```
```css
.break-after-avoid-page { break-after: avoid-page }
```
```css
.break-after-page { break-after: page }
```
```css
.break-after-left { break-after: left }
```
```css
.break-after-right { break-after: right }
```
```css
.break-after-column { break-after: column }
```
```css
.break-before-auto { break-after: auto }
```
```css
.break-before-avoid { break-after: avoid }
```
```css
.break-before-avoid-page { break-after: avoid-page }
```
```css
.break-before-page { break-after: page }
```
```css
.break-before-left { break-after: left }
```
```css
.break-before-right { break-after: right }
```
```css
.break-before-column { break-after: column }
```
### box-decoration-break
```css
.box-decoration-clone { box-decoration-break: clone }
```
```css
.box-decoration-slice { box-decoration-break: slice }
```
### box-sizing
```css
.box-border { box-sizing: border-box }
```
```css
.box-content { box-sizing: content-box }
```
### display
```css
.inline { display: inline }
```
```css
.block { display: block }
```
```css
.inline-block { display: inline-block }
```
```css
.flow-root { display: flow-root }
```
```css
.flex { display: flex }
```
```css
.inline-flex { display: inline-flex }
```
```css
.grid { display: grid }
```
```css
.inline-grid { display: inline-grid }
```
```css
.contents { display: contents }
```
```css
.table { display: table }
```
```css
.inline-table { display: inline-table }
```
```css
.list-item { display: list-item }
```
```css
.hidden { display: none }
```
```css
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1
}
```
```css
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}
```
```css
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3
}
```
```css
.line-clamp-4 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4
}
```
```css
.line-clamp-5 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5
}
```
```css
.line-clamp-6 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6
}
```
```css
.line-clamp-none {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: none
}
```
### float
```css
.float-start { float: inline-start }
```
```css
.float-end { float: inline-end }
```
```css
.float-left { float: left }
```
```css
.float-right { float: right }
```
```css
.float-none { float: none }
```
### clear
```css
.clear-start { clear: inline-start }
```
```css
.clear-end { clear: inline-end }
```
```css
.clear-left { clear: left }
```
```css
.clear-right { clear: right }
```
```css
.clear-both { clear: both }
```
```css
.clear-none { clear: none }
```
### isolation
```css
.isolate { isolation: isolate }
```
```css
.isolation-auto { isolation: auto }
```
### object-fit
```css
.object-contain { object-fit: contain }
```
```css
.object-cover { object-fit: cover }
```
```css
.object-fill { object-fit: fill }
```
```css
.object-none { object-fit: none }
```
```css
.object-scale-down { object-fit: scale-down }
```
### object-position
```css
.object-bottom { object-position: bottom }
```
```css
.object-center { object-position: center }
```
```css
.object-left { object-position: left }
```
```css
.object-left-bottom { object-position: left bottom }
```
```css
.object-left-top { object-position: left top }
```
```css
.object-right { object-position: right }
```
```css
.object-right-bottom { object-position: right bottom }
```
```css
.object-right-top { object-position: right top }
```
```css
.object-top { object-position: top }
```
### overflow
```css
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0
}
```
```css
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal
}
```
```css
.overflow-auto { overflow: auto }
```
```css
.overflow-hidden { overflow: hidden }
```
```css
.overflow-visible { overflow: visible }
```
```css
.overflow-scroll { overflow: scroll }
```
```css
.overflow-x-auto { overflow-x: auto }
```
```css
.overflow-x-hidden { overflow-x: hidden }
```
```css
.overflow-x-clip { overflow-x: clip }
```
```css
.overflow-x-visible { overflow-x: visible }
```
```css
.overflow-x-scroll { overflow-x: scroll }
```
```css
.overflow-y-auto { overflow-y: auto }
```
```css
.overflow-y-hidden { overflow-y: hidden }
```
```css
.overflow-y-clip { overflow-y: clip }
```
```css
.overflow-y-visible { overflow-y: visible }
```
```css
.overflow-y-scroll { overflow-y: scroll }
```
```css
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1
}
```
```css
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}
```
```css
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3
}
```
```css
.line-clamp-4 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4
}
```
```css
.line-clamp-5 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5
}
```
```css
.line-clamp-6 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6
}
```
```css
.line-clamp-none {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: none
}
```
```css
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
```
### overscroll-behavior
```css
.overscroll-auto { overscroll-behavior: auto }
```
```css
.overscroll-contain { overscroll-behavior: contain }
```
```css
.overscroll-none { overscroll-behavior: none }
```
```css
.overscroll-x-auto { overscroll-behavior-x: auto }
```
```css
.overscroll-x-contain { overscroll-behavior-x: contain }
```
```css
.overscroll-x-none { overscroll-behavior-x: none }
```
```css
.overscroll-y-auto { overscroll-behavior-y: auto }
```
```css
.overscroll-y-contain { overscroll-behavior-y: contain }
```
```css
.overscroll-y-none { overscroll-behavior-y: none }
```
### position
```css
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0
}
```
```css
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal
}
```
```css
.static { position: static }
```
```css
.fixed { position: fixed }
```
```css
.absolute { position: absolute }
```
```css
.relative { position: relative }
```
```css
.sticky { position: sticky }
```
### top / right / bottom / left
```css
.inset-SUFFIX { inset: ... }
```
```css
.inset-x-SUFFIX { inset-inline: ... }
```
```css
.inset-y-SUFFIX { inset-block: ... }
```
```css
.start-SUFFIX { inset-inline-start: ... }
```
```css
.end-SUFFIX { inset-inline-end: ... }
```
```css
.top-SUFFIX { top: ... }
```
```css
.right-SUFFIX { right: ... }
```
```css
.bottom-SUFFIX { bottom: ... }
```
```css
.left-SUFFIX { left: ... }
```
### visibility
```css
.visible { visibility: visible }
```
```css
.invisible { visibility: hidden }
```
```css
.collapse { visibility: collapse }
```
### z-index
```css
.z-0 { z-index: 0 }
```
```css
.z-10 { z-index: 10 }
```
```css
.z-20 { z-index: 20 }
```
```css
.z-30 { z-index: 30 }
```
```css
.z-40 { z-index: 40 }
```
```css
.z-50 { z-index: 50 }
```
```css
.z-auto { z-index: auto }
```
## Flexbox & Grid
### flex-basis
```css
.basis-SUFFIX { flex-basis: ... }
```
### flex-direction
```css
.flex-row { flex-direction: row }
```
```css
.flex-row-reverse { flex-direction: row-reverse }
```
```css
.flex-col { flex-direction: column }
```
```css
.flex-col-reverse { flex-direction: column-reverse }
```
### flex-wrap
```css
.flex-nowrap { flex-wrap: nowrap }
```
```css
.flex-wrap { flex-wrap: wrap }
```
```css
.flex-wrap-reverse { flex-wrap: wrap-reverse }
```
### flex
```css
.flex-SUFFIX { flex: ... }
```
```css
.flex-auto { flex: 1 1 auto }
```
```css
.flex-initial { flex: 0 1 auto }
```
```css
.flex-none { flex: none }
```
### flex-grow
```css
.grow { flex-grow: 1 }
```
```css
.grow-0 { flex-grow: 0 }
```
### flex-shrink
```css
.shrink { flex-shrink: 1 }
```
```css
.shrink-0 { flex-shrink: 0 }
```
### order
```css
.order-first { order: -9999 }
```
```css
.order-last { order: 9999 }
```
```css
.order-none { order: 0 }
```
### grid-template-columns
```css
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
```
```css
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
```
```css
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
```
```css
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
```
```css
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
```
```css
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
```
```css
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) }
```
```css
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) }
```
```css
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) }
```
```css
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) }
```
```css
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) }
```
```css
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) }
```
```css
.grid-cols-none { grid-template-columns: none }
```
```css
.grid-cols-subgrid { grid-template-columns: subgrid }
```
### grid-column
```css
.col-auto { grid-column: auto }
```
```css
.col-span-1 { grid-column: span 1 / span 1 }
```
```css
.col-span-2 { grid-column: span 2 / span 2 }
```
```css
.col-span-3 { grid-column: span 3 / span 3 }
```
```css
.col-span-4 { grid-column: span 4 / span 4 }
```
```css
.col-span-5 { grid-column: span 5 / span 5 }
```
```css
.col-span-6 { grid-column: span 6 / span 6 }
```
```css
.col-span-7 { grid-column: span 7 / span 7 }
```
```css
.col-span-8 { grid-column: span 8 / span 8 }
```
```css
.col-span-9 { grid-column: span 9 / span 9 }
```
```css
.col-span-10 { grid-column: span 10 / span 10 }
```
```css
.col-span-11 { grid-column: span 11 / span 11 }
```
```css
.col-span-12 { grid-column: span 12 / span 12 }
```
```css
.col-span-full { grid-column: 1 / -1 }
```
```css
.col-start-1 { grid-column-start: 1 }
```
```css
.col-start-2 { grid-column-start: 2 }
```
```css
.col-start-3 { grid-column-start: 3 }
```
```css
.col-start-4 { grid-column-start: 4 }
```
```css
.col-start-5 { grid-column-start: 5 }
```
```css
.col-start-6 { grid-column-start: 6 }
```
```css
.col-start-7 { grid-column-start: 7 }
```
```css
.col-start-8 { grid-column-start: 8 }
```
```css
.col-start-9 { grid-column-start: 9 }
```
```css
.col-start-10 { grid-column-start: 10 }
```
```css
.col-start-11 { grid-column-start: 11 }
```
```css
.col-start-12 { grid-column-start: 12 }
```
```css
.col-start-13 { grid-column-start: 13 }
```
```css
.col-start-auto { grid-column-start: auto }
```
### grid-template-rows
```css
.grid-rows-1 { grid-template-rows: repeat(1, auto) }
```
```css
.grid-rows-2 { grid-template-rows: repeat(2, auto) }
```
```css
.grid-rows-3 { grid-template-rows: repeat(3, auto) }
```
```css
.grid-rows-4 { grid-template-rows: repeat(4, auto) }
```
```css
.grid-rows-5 { grid-template-rows: repeat(5, auto) }
```
```css
.grid-rows-6 { grid-template-rows: repeat(6, auto) }
```
```css
.grid-rows-7 { grid-template-rows: repeat(7, auto) }
```
```css
.grid-rows-8 { grid-template-rows: repeat(8, auto) }
```
```css
.grid-rows-9 { grid-template-rows: repeat(9, auto) }
```
```css
.grid-rows-10 { grid-template-rows: repeat(10, auto) }
```
```css
.grid-rows-11 { grid-template-rows: repeat(11, auto) }
```
```css
.grid-rows-12 { grid-template-rows: repeat(12, auto) }
```
```css
.grid-rows-none { grid-template-rows: none }
```
```css
.grid-rows-subgrid { grid-template-rows: subgrid }
```
### grid-row
```css
.row-auto { grid-row: auto }
```
```css
.row-span-1 { grid-row: span 1 / span 1 }
```
```css
.row-span-2 { grid-row: span 2 / span 2 }
```
```css
.row-span-3 { grid-row: span 3 / span 3 }
```
```css
.row-span-4 { grid-row: span 4 / span 4 }
```
```css
.row-span-5 { grid-row: span 5 / span 5 }
```
```css
.row-span-6 { grid-row: span 6 / span 6 }
```
```css
.row-span-7 { grid-row: span 7 / span 7 }
```
```css
.row-span-8 { grid-row: span 8 / span 8 }
```
```css
.row-span-9 { grid-row: span 9 / span 9 }
```
```css
.row-span-10 { grid-row: span 10 / span 10 }
```
```css
.row-span-11 { grid-row: span 11 / span 11 }
```
```css
.row-span-12 { grid-row: span 12 / span 12 }
```
```css
.row-span-full { grid-row: 1 / -1 }
```
```css
.row-start-1 { grid-row-start: 1 }
```
```css
.row-start-2 { grid-row-start: 2 }
```
```css
.row-start-3 { grid-row-start: 3 }
```
```css
.row-start-4 { grid-row-start: 4 }
```
```css
.row-start-5 { grid-row-start: 5 }
```
```css
.row-start-6 { grid-row-start: 6 }
```
```css
.row-start-7 { grid-row-start: 7 }
```
```css
.row-start-8 { grid-row-start: 8 }
```
```css
.row-start-9 { grid-row-start: 9 }
```
```css
.row-start-10 { grid-row-start: 10 }
```
```css
.row-start-11 { grid-row-start: 11 }
```
```css
.row-start-12 { grid-row-start: 12 }
```
```css
.row-start-13 { grid-row-start: 13 }
```
```css
.row-start-auto { grid-row-start: auto }
```
### grid-auto-flow
```css
.grid-flow-row { grid-auto-flow: row }
```
```css
.grid-flow-col { grid-auto-flow: column }
```
```css
.grid-flow-dense { grid-auto-flow: dense }
```
```css
.grid-flow-row-dense { grid-auto-flow: row dense }
```
```css
.grid-flow-col-dense { grid-auto-flow: column dense }
```
### grid-auto-columns
```css
.auto-cols-auto { grid-auto-columns: auto }
```
```css
.auto-cols-min { grid-auto-columns: min-content }
```
```css
.auto-cols-max { grid-auto-columns: max-content }
```
```css
.auto-cols-fr { grid-auto-columns: minmax(0, 1fr) }
```
### grid-auto-rows
```css
.auto-rows-auto { grid-auto-rows: auto }
```
```css
.auto-rows-min { grid-auto-rows: min-content }
```
```css
.auto-rows-max { grid-auto-rows: max-content }
```
```css
.auto-rows-fr { grid-auto-rows: minmax(0, 1fr) }
```
### gap
```css
.gap-SUFFIX { gap: ... }
```
```css
.gap-x-SUFFIX { column-gap: ... }
```
```css
.gap-y-SUFFIX { row-gap: ... }
```
### justify-content
```css
.justify-start { justify-content: flex-start }
```
```css
.justify-end { justify-content: flex-end }
```
```css
.justify-center { justify-content: center }
```
```css
.justify-between { justify-content: space-between }
```
```css
.justify-around { justify-content: space-around }
```
```css
.justify-evenly { justify-content: space-evenly }
```
```css
.justify-stretch { justify-content: stretch }
```
```css
.justify-normal { justify-content: normal }
```
### justify-items
```css
.justify-items-start { justify-items: start }
```
```css
.justify-items-end { justify-items: end }
```
```css
.justify-items-center { justify-items: center }
```
```css
.justify-items-stretch { justify-items: stretch }
```
```css
.justify-items-normal { justify-items: normal }
```
### justify-self
```css
.justify-self-auto { justify-self: auto }
```
```css
.justify-self-start { justify-self: start }
```
```css
.justify-self-end { justify-self: end }
```
```css
.justify-self-center { justify-self: center }
```
```css
.justify-self-stretch { justify-self: stretch }
```
### align-content
```css
.content-normal { align-content: normal }
```
```css
.content-center { align-content: center }
```
```css
.content-start { align-content: flex-start }
```
```css
.content-end { align-content: flex-end }
```
```css
.content-between { align-content: space-between }
```
```css
.content-around { align-content: space-around }
```
```css
.content-evenly { align-content: space-evenly }
```
```css
.content-baseline { align-content: baseline }
```
```css
.content-stretch { align-content: stretch }
```
### align-items
```css
.items-start { align-items: flex-start }
```
```css
.items-end { align-items: flex-end }
```
```css
.items-end-safe { align-items: safe flex-end }
```
```css
.items-center { align-items: center }
```
```css
.items-center-safe { align-items: safe center }
```
```css
.items-baseline { align-items: baseline }
```
```css
.items-baseline-last { align-items: last baseline }
```
```css
.items-stretch { align-items: stretch }
```
### align-self
```css
.self-auto { align-self: auto }
```
```css
.self-start { align-self: flex-start }
```
```css
.self-end { align-self: flex-end }
```
```css
.self-center { align-self: center }
```
```css
.self-stretch { align-self: stretch }
```
```css
.self-baseline { align-self: baseline }
```
### place-content
```css
.place-content-center { place-content: center }
```
```css
.place-content-start { place-content: flex-start }
```
```css
.place-content-end { place-content: flex-end }
```
```css
.place-content-between { place-content: space-between }
```
```css
.place-content-around { place-content: space-around }
```
```css
.place-content-evenly { place-content: space-evenly }
```
```css
.place-content-baseline { place-content: baseline }
```
```css
.place-content-stretch { place-content: stretch }
```
### place-items
```css
.place-items-start { place-items: start }
```
```css
.place-items-end { place-items: end }
```
```css
.place-items-center { place-items: center }
```
```css
.place-items-baseline { place-items: baseline }
```
```css
.place-items-stretch { place-items: stretch }
```
### place-self
```css
.place-self-auto { place-self: auto }
```
```css
.place-self-start { place-self: start }
```
```css
.place-self-end { place-self: end }
```
```css
.place-self-center { place-self: center }
```
```css
.place-self-stretch { place-self: stretch }
```
## Spacing
### padding
```css
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0
}
```
```css
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal
}
```
```css
.p-SUFFIX { padding: ... }
```
```css
.px-SUFFIX { padding-inline: ... }
```
```css
.py-SUFFIX { padding-block: ... }
```
```css
.pt-SUFFIX { padding-top: ... }
```
```css
.pr-SUFFIX { padding-right: ... }
```
```css
.pb-SUFFIX { padding-bottom: ... }
```
```css
.pl-SUFFIX { padding-left: ... }
```
```css
.ps-SUFFIX { padding-inline-start: ... }
```
```css
.pe-SUFFIX { padding-inline-end: ... }
```
### margin
```css
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0
}
```
```css
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal
}
```
```css
.m-SUFFIX { margin: ... }
```
```css
.mx-SUFFIX { margin-inline: ... }
```
```css
.my-SUFFIX { margin-block: ... }
```
```css
.mt-SUFFIX { margin-top: ... }
```
```css
.mr-SUFFIX { margin-right: ... }
```
```css
.mb-SUFFIX { margin-bottom: ... }
```
```css
.ml-SUFFIX { margin-left: ... }
```
```css
.ms-SUFFIX { margin-inline-start: ... }
```
```css
.me-SUFFIX { margin-inline-end: ... }
```
```css
.space-x-SUFFIX > :not(:last-child) { margin-inline-end: ... }
```
```css
.space-y-SUFFIX > :not(:last-child) { margin-bottom: ... }
```
## Sizing
### width
```css
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0
}
```
```css
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal
}
```
```css
.w-SUFFIX { width: ... }
```
### min-width
```css
.min-w-SUFFIX { min-width: ... }
```
### max-width
```css
.max-w-SUFFIX { max-width: ... }
```
### height
```css
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0
}
```
```css
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal
}
```
```css
.h-SUFFIX { height: ... }
```
### min-height
```css
.min-h-SUFFIX { min-height: ... }
```
### max-height
```css
.max-h-SUFFIX { max-height: ... }
```
## Typography
### font-family
```css
.font-sans { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" }
```
```css
.font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif }
```
```css
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace }
```
### font-size
```css
.text-xs {
font-size: 12px;
line-height: 1.333
}
```
```css
.text-sm {
font-size: 14px;
line-height: 1.429
}
```
```css
.text-base {
font-size: 16px;
line-height: 1.5
}
```
```css
.text-lg {
font-size: 18px;
line-height: 1.555
}
```
```css
.text-xl {
font-size: 20px;
line-height: 1.4
}
```
```css
.text-2xl {
font-size: 24px;
line-height: 1.333
}
```
```css
.text-3xl {
font-size: 30px;
line-height: 1.2
}
```
```css
.text-4xl {
font-size: 36px;
line-height: 1.111
}
```
```css
.text-5xl {
font-size: 48px;
line-height: 1
}
```
```css
.text-6xl {
font-size: 60px;
line-height: 1
}
```
```css
.text-7xl {
font-size: 72px;
line-height: 1
}
```
```css
.text-8xl {
font-size: 96px;
line-height: 1
}
```
```css
.text-9xl {
font-size: 128px;
line-height: 1
}
```
### font-smoothing
```css
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
```
```css
.subpixel-antialiased {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto
}
```
### font-style
```css
.italic { font-style: italic }
```
```css
.not-italic { font-style: normal }
```
### font-weight
```css
.font-thin { font-weight: 100 }
```
```css
.font-extralight { font-weight: 200 }
```
```css
.font-light { font-weight: 300 }
```
```css
.font-normal { font-weight: 400 }
```
```css
.font-medium { font-weight: 500 }
```
```css
.font-semibold { font-weight: 600 }
```
```css
.font-bold { font-weight: 700 }
```
```css
.font-extrabold { font-weight: 800 }
```
```css
.font-black { font-weight: 900 }
```
### font-stretch
```css
.font-stretch-ultra-condensed { font-stretch: ultra-condensed }
```
```css
.font-stretch-extra-condensed { font-stretch: extra-condensed }
```
```css
.font-stretch-condensed { font-stretch: condensed }
```
```css
.font-stretch-semi-condensed { font-stretch: semi-condensed }
```
```css
.font-stretch-normal { font-stretch: normal }
```
```css
.font-stretch-semi-expanded { font-stretch: semi-expanded }
```
```css
.font-stretch-expanded { font-stretch: expanded }
```
```css
.font-stretch-extra-expanded { font-stretch: extra-expanded }
```
```css
.font-stretch-ultra-expanded { font-stretch: ultra-expanded }
```
### font-variant-numeric
```css
.normal-nums { font-variant-numeric: normal }
```
```css
.ordinal { font-variant-numeric: ordinal }
```
```css
.slashed-zero { font-variant-numeric: slashed-zero }
```
```css
.lining-nums { font-variant-numeric: lining-nums }
```
```css
.oldstyle-nums { font-variant-numeric: oldstyle-nums }
```
```css
.proportional-nums { font-variant-numeric: proportional-nums }
```
```css
.tabular-nums { font-variant-numeric: tabular-nums }
```
```css
.diagonal-fractions { font-variant-numeric: diagonal-fractions }
```
```css
.stacked-fractions { font-variant-numeric: stacked-fractions }
```
### letter-spacing
```css
.tracking-tighter { letter-spacing: -0.05em }
```
```css
.tracking-tight { letter-spacing: -0.025em }
```
```css
.tracking-normal { letter-spacing: 0 }
```
```css
.tracking-wide { letter-spacing: 0.025em }
```
```css
.tracking-wider { letter-spacing: 0.05em }
```
```css
.tracking-widest { letter-spacing: 0.1em }
```
### line-clamp
```css
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1
}
```
```css
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}
```
```css
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3
}
```
```css
.line-clamp-4 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4
}
```
```css
.line-clamp-5 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5
}
```
```css
.line-clamp-6 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6
}
```
```css
.line-clamp-none {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: none
}
```
### line-height
```css
.text-xs {
font-size: 12px;
line-height: 1.333
}
```
```css
.text-sm {
font-size: 14px;
line-height: 1.429
}
```
```css
.text-base {
font-size: 16px;
line-height: 1.5
}
```
```css
.text-lg {
font-size: 18px;
line-height: 1.555
}
```
```css
.text-xl {
font-size: 20px;
line-height: 1.4
}
```
```css
.text-2xl {
font-size: 24px;
line-height: 1.333
}
```
```css
.text-3xl {
font-size: 30px;
line-height: 1.2
}
```
```css
.text-4xl {
font-size: 36px;
line-height: 1.111
}
```
```css
.text-5xl {
font-size: 48px;
line-height: 1
}
```
```css
.text-6xl {
font-size: 60px;
line-height: 1
}
```
```css
.text-7xl {
font-size: 72px;
line-height: 1
}
```
```css
.text-8xl {
font-size: 96px;
line-height: 1
}
```
```css
.text-9xl {
font-size: 128px;
line-height: 1
}
```
```css
.leading-none { line-height: 1 }
```
```css
.leading-tight { line-height: 1.25 }
```
```css
.leading-snug { line-height: 1.375 }
```
```css
.leading-normal { line-height: 1.5 }
```
```css
.leading-relaxed { line-height: 1.625 }
```
```css
.leading-loose { line-height: 2 }
```
### list-style-image
```css
.list-image-none { list-style-image: none }
```
### list-style-position
```css
.list-inside { list-style-position: inside }
```
```css
.list-outside { list-style-position: outside }
```
### list-style-type
```css
.list-disc { list-style-type: disc }
```
```css
.list-decimal { list-style-type: decimal }
```
```css
.list-none { list-style-type: none }
```
### text-align
```css
.text-left { text-align: left }
```
```css
.text-center { text-align: center }
```
```css
.text-right { text-align: right }
```
```css
.text-justify { text-align: justify }
```
```css
.text-start { text-align: start }
```
```css
.text-end { text-align: end }
```
### color
```css
.text-COLOR { color: oklch(...) }
```
### text-decoration-line
```css
.underline { text-decoration-line: underline }
```
```css
.overline { text-decoration-line: overline }
```
```css
.line-through { text-decoration-line: line-through }
```
```css
.no-underline { text-decoration-line: none }
```
### text-decoration-color
```css
.decoration-COLOR { text-decoration-color: oklch(...) }
```
### text-decoration-style
```css
.decoration-solid { text-decoration-style: solid }
```
```css
.decoration-double { text-decoration-style: double }
```
```css
.decoration-dotted { text-decoration-style: dotted }
```
```css
.decoration-dashed { text-decoration-style: dashed }
```
```css
.decoration-wavy { text-decoration-style: wavy }
```
### text-decoration-thickness
```css
.decoration-auto { text-decoration-thickness: auto }
```
```css
.decoration-from-font { text-decoration-thickness: from-font }
```
```css
.decoration-0 { text-decoration-thickness: 0px }
```
```css
.decoration-1 { text-decoration-thickness: 1px }
```
```css
.decoration-2 { text-decoration-thickness: 2px }
```
```css
.decoration-4 { text-decoration-thickness: 4px }
```
```css
.decoration-8 { text-decoration-thickness: 8px }
```
### text-underline-offset
```css
.underline-offset-auto { text-underline-offset: auto }
```
```css
.underline-offset-0 { text-underline-offset: 0px }
```
```css
.underline-offset-1 { text-underline-offset: 1px }
```
```css
.underline-offset-2 { text-underline-offset: 2px }
```
```css
.underline-offset-4 { text-underline-offset: 4px }
```
```css
.underline-offset-8 { text-underline-offset: 8px }
```
### text-overflow
```css
.overflow-clip { text-overflow: clip }
```
```css
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
```
```css
.overflow-ellipsis { text-overflow: ellipsis }
```
### text-wrap
```css
.text-wrap { text-wrap: wrap }
```
```css
.text-nowrap { text-wrap: nowrap }
```
```css
.text-balance { text-wrap: balance }
```
```css
.text-pretty { text-wrap: pretty }
```
### text-indent
```css
.indentSUFFIX { text-indent: ... }
```
### vertical-align
```css
.align-baseline { vertical-align: baseline }
```
```css
.align-top { vertical-align: top }
```
```css
.align-middle { vertical-align: middle }
```
```css
.align-bottom { vertical-align: bottom }
```
```css
.align-text-top { vertical-align: text-top }
```
```css
.align-text-bottom { vertical-align: text-bottom }
```
```css
.align-sub { vertical-align: sub }
```
```css
.align-super { vertical-align: super }
```
### white-space
```css
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0
}
```
```css
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal
}
```
```css
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
```
```css
.whitespace-normal { white-space: normal }
```
```css
.whitespace-nowrap { white-space: nowrap }
```
```css
.whitespace-pre { white-space: pre }
```
```css
.whitespace-pre-line { white-space: pre-line }
```
```css
.whitespace-pre-wrap { white-space: pre-wrap }
```
```css
.whitespace-break-spaces { white-space: break-spaces }
```
### word-break
```css
.break-normal { word-break: normal }
```
```css
.break-all { word-break: break-all }
```
```css
.break-keep { word-break: keep-all }
```
### overflow-wrap
```css
.wrap-break-word { overflow-wrap: break-word }
```
```css
.wrap-anywhere { overflow-wrap: anywhere }
```
```css
.wrap-normal { overflow-wrap: normal }
```
### hyphens
```css
.hyphens-none { hyphens: none }
```
```css
.hyphens-manual { hyphens: manual }
```
```css
.hyphens-auto { hyphens: auto }
```
### content
```css
.content-SUFFIX { content: ... }
```
## Backgrounds
### background-attachment
```css
.bg-fixed { background-attachment: fixed }
```
```css
.bg-local { background-attachment: local }
```
```css
.bg-scroll { background-attachment: scroll }
```
### background-clip
```css
.bg-clip-border { background-clip: border-box }
```
```css
.bg-clip-padding { background-clip: padding-box }
```
```css
.bg-clip-content { background-clip: content-box }
```
```css
.bg-clip-text { background-clip: text }
```
### background-color
```css
.bg-COLOR { background-color: oklch(...) }
```
### background-image
```css
.bg-SUFFIX { background-image: ... }
```
```css
.bg-none { background-image: none }
```
### background-origin
```css
.bg-border-box { background-origin: border-box }
```
```css
.bg-padding-box { background-origin: padding-box }
```
```css
.bg-content-box { background-origin: content-box }
```
### background-position
```css
.bg-bottom { background-position: bottom }
```
```css
.bg-center { background-position: center }
```
```css
.bg-left { background-position: left }
```
```css
.bg-left-bottom { background-position: left bottom }
```
```css
.bg-left-top { background-position: left top }
```
```css
.bg-right { background-position: right }
```
```css
.bg-right-bottom { background-position: right bottom }
```
```css
.bg-right-top { background-position: right top }
```
```css
.bg-top { background-position: top }
```
### background-repeat
```css
.bg-repeat { background-repeat: repeat }
```
```css
.bg-repeat-x { background-repeat: repeat-x }
```
```css
.bg-repeat-y { background-repeat: repeat-y }
```
```css
.bg-space { background-repeat: space }
```
```css
.bg-round { background-repeat: round }
```
```css
.bg-no-repeat { background-repeat: no-repeat }
```
### background-size
```css
.bg-auto { background-size: auto }
```
```css
.bg-cover { background-size: cover }
```
```css
.bg-contain { background-size: contain }
```
## Borders
### border-radius
```css
.rounded-xs { border-radius: 2px }
```
```css
.rounded-sm { border-radius: 4px }
```
```css
.rounded-md { border-radius: 6px }
```
```css
.rounded-lg { border-radius: 8px }
```
```css
.rounded-xl { border-radius: 12px }
```
```css
.rounded-2xl { border-radius: 16px }
```
```css
.rounded-3xl { border-radius: 24px }
```
```css
.rounded-full { border-radius: 50% }
```
```css
.rounded-none { border-radius: 0 }
```
```css
.rounded-tl-xs { border-top-left-radius: 2px }
```
```css
.rounded-tl-sm { border-top-left-radius: 4px }
```
```css
.rounded-tl-md { border-top-left-radius: 6px }
```
```css
.rounded-tl-lg { border-top-left-radius: 8px }
```
```css
.rounded-tl-xl { border-top-left-radius: 12px }
```
```css
.rounded-tl-2xl { border-top-left-radius: 16px }
```
```css
.rounded-tl-3xl { border-top-left-radius: 24px }
```
```css
.rounded-tl-full { border-top-left-radius: 50% }
```
```css
.rounded-tl-none { border-top-left-radius: 0 }
```
```css
.rounded-tr-xs { border-top-right-radius: 2px }
```
```css
.rounded-tr-sm { border-top-right-radius: 4px }
```
```css
.rounded-tr-md { border-top-right-radius: 6px }
```
```css
.rounded-tr-lg { border-top-right-radius: 8px }
```
```css
.rounded-tr-xl { border-top-right-radius: 12px }
```
```css
.rounded-tr-2xl { border-top-right-radius: 16px }
```
```css
.rounded-tr-3xl { border-top-right-radius: 24px }
```
```css
.rounded-tr-full { border-top-right-radiu