PHPackages                             vollegrond/rootstock - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. vollegrond/rootstock

ActiveLibrary

vollegrond/rootstock
====================

Framework-agnostic PHP library for generating CSS utility classes.

v0.1.0(today)00MITPHPPHP >=8.3

Since Apr 4Pushed todayCompare

[ Source](https://github.com/vollegrond/rootstock)[ Packagist](https://packagist.org/packages/vollegrond/rootstock)[ RSS](/packages/vollegrond-rootstock/feed)WikiDiscussions main Synced today

READMEChangelog (1)Dependencies (3)Versions (2)Used By (0)

Utility Classes
===============

[](#utility-classes)

How to use utility classes
--------------------------

[](#how-to-use-utility-classes)

Every utility class begins with `@` and contains a single style definition, optionally followed by one or more variants. The final segment specifies the actual styling for elements, while any preceding segments are variants that determine when or where the styling is applied.

A basic utility class looks like this: `@d[block]`. A more advanced utility class might look like this: `@lg:hover:d[block]!`. The final part always defines the style to be applied (in this case, `display: block`). In the advanced example, additional conditions specify when the style should apply — in this case, only from the `lg` breakpoint and on `hover`.

Hover, focus, and other states
------------------------------

[](#hover-focus-and-other-states)

Using utilities to style elements based on pseudo classes and elements

### Pseudo classes

[](#pseudo-classes)

The following pseudo-classes are supported:

- `:last` (mapped to `:last-child`)
- `:first` (mapped to `:first-child`)
- `:even` (mapped to `:nth-child(even)`)
- `:odd` (mapped to `:nth-child(odd)`)
- `:hover`
- `:focus`
- `:active`

### Pseudo elements

[](#pseudo-elements)

The following pseudo-elements are supported:

- `:after`
- `:before`
- `:placeholder`
- `:selection`

Responsive design
-----------------

[](#responsive-design)

Using responsive utility variants to apply styles only from specific breakpoints:

Supported breakpoints are:

- `sm` (≥576px)
- `md` (≥768px)
- `lg` (≥992px)
- `xl` (≥1200px)
- `xxl` (≥1400px)

Dark mode
---------

[](#dark-mode)

Using variants to style your site in dark mode.

You can easily use the `dark` variant to only apply the style on dark mode. Like this: `@dark:color[#FFF]`

Utility classes list
--------------------

[](#utility-classes-list)

### Layout

[](#layout)

#### aspect-ratio

[](#aspect-ratio)

ClassStyleExampleaspect\[square\]`aspect-ratio: 1 / 1;`aspect\[auto\]`aspect-ratio: auto;`aspect\[*<ratio>*\]`aspect-ratio: ;`aspect\[16/9\]aspect\[*<var>*\]`aspect-ratio: ;`aspect\[--my-aspect-ratio\]#### columns

[](#columns)

ClassStyleExamplecolumns\[auto\]`columns: auto;`columns\[*<number>*\]`columns: ;`columns\[3\]columns\[*<var>*\]`columns: ;`columns\[--my-columns\]#### break-after

[](#break-after)

ClassStyleExamplebreak-after\[auto\]`break-after: auto;`break-after\[avoid\]`break-after: avoid;`break-after\[all\]`break-after: all;`break-after\[avoid-page\]`break-after: avoid-page;`break-after\[page\]`break-after: page;`break-after\[left\]`break-after: left;`break-after\[right\]`break-after: right;`break-after\[column\]`break-after: column;`break-after\[*<var>*\]`break-after: **;`break-after\[--my-break\]#### break-before

[](#break-before)

ClassStyleExamplebreak-before\[auto\]`break-before: auto;`break-before\[avoid\]`break-before: avoid;`break-before\[all\]`break-before: all;`break-before\[avoid-page\]`break-before: avoid-page;`break-before\[page\]`break-before: page;`break-before\[left\]`break-before: left;`break-before\[right\]`break-before: right;`break-before\[column\]`break-before: column;`break-before\[*<var>*\]`break-before: **;`break-before\[--my-break\]#### break-inside

[](#break-inside)

ClassStyleExamplebreak-inside\[auto\]`break-inside: auto;`break-inside\[avoid\]`break-inside: avoid;`break-inside\[avoid-page\]`break-inside: avoid-page;`break-inside\[avoid-column\]`break-inside: avoid-column;`break-inside\[*<var>*\]`break-inside: **;`break-inside\[--my-break\]#### box-decoration-break

[](#box-decoration-break)

ClassStyleExamplebox-decoration-break\[clone\]`box-decoration-break: clone;`box-decoration-break\[slice\]`box-decoration-break: slice;`box-decoration-break\[*<var>*\]`box-decoration-break: **;`box-decoration-break\[--my-decoration\]#### box-sizing

[](#box-sizing)

ClassStyleExamplebox\[border\]`box-sizing: border-box;`box\[content\]`box-sizing: content-box;`box\[*<var>*\]`box-sizing: **;`box\[--my-sizing\]#### display

[](#display)

ClassStyleExampled\[none\]`display: none;`d\[grid\]`display: grid;`d\[inline\]`display: inline;`d\[inline-block\]`display: inline-block;`d\[block\]`display: block;`d\[table\]`display: table;`d\[table-cell\]`display: table-cell;`d\[table-row\]`display: table-row;`d\[flex\]`display: flex;`d\[inline-flex\]`display: inline-flex;`d\[*<var>*\]`display: **;`d\[--my-display\]#### float

[](#float)

ClassStyleExamplefloat\[left\]`float: left;`float\[right\]`float: right;`float\[start\]`float: start;`float\[end\]`float: end;`float\[none\]`float: none;`float\[*<var>*\]`float: **;`float\[--my-float\]#### clear

[](#clear)

ClassStyleExampleclear\[left\]`clear: left;`clear\[right\]`clear: right;`clear\[both\]`clear: both;`clear\[start\]`clear: start;`clear\[end\]`clear: end;`clear\[none\]`clear: none;`clear\[*<var>*\]`clear: **;`clear\[--my-clear\]#### isolation

[](#isolation)

ClassStyleExampleisolation\[isolate\]`isolation: isolate;`isolation\[auto\]`isolation: auto;`isolation\[*<var>*\]`isolation: **;`isolation\[--my-isolation\]#### object-fit

[](#object-fit)

ClassStyleExampleobject-fit\[contain\]`object-fit: contain;`object-fit\[cover\]`object-fit: cover;`object-fit\[fill\]`object-fit: fill;`object-fit\[none\]`object-fit: none;`object-fit\[scale-down\]`object-fit: scale-down;`object-fit\[*<var>*\]`object-fit: **;`object-fit\[--my-fit\]object-fit\[*<custom>*\]`object-fit: **;`object-fit\[custom-value\]#### object-position

[](#object-position)

ClassStyleExampleobject-position\[top-left\]`object-position: top left;`object-position\[top\]`object-position: top;`object-position\[top-right\]`object-position: top right;`object-position\[left\]`object-position: left;`object-position\[center\]`object-position: center;`object-position\[right\]`object-position: right;`object-position\[bottom-left\]`object-position: bottom left;`object-position\[bottom\]`object-position: bottom;`object-position\[bottom-right\]`object-position: bottom right;`object-position\[*<var>*\]`object-position: **;`object-position\[--my-position\]object-position\[*<custom>*\]`object-position: **;`object-position\[custom-value\]#### overflow

[](#overflow)

ClassStyleExampleoverflow\[visible\]`overflow: visible;`overflow\[hidden\]`overflow: hidden;`overflow\[scroll\]`overflow: scroll;`overflow\[clip\]`overflow: clip;`overflow\[auto\]`overflow: auto;`overflow\[*<var>*\]`overflow: **;`overflow\[--my-overflow\]#### overflow-x

[](#overflow-x)

ClassStyleExampleoverflow-x\[visible\]`overflow-x: visible;`overflow-x\[hidden\]`overflow-x: hidden;`overflow-x\[scroll\]`overflow-x: scroll;`overflow-x\[clip\]`overflow-x: clip;`overflow-x\[auto\]`overflow-x: auto;`overflow-x\[*<var>*\]`overflow-x: **;`overflow-x\[--my-overflow\]#### overflow-y

[](#overflow-y)

ClassStyleExampleoverflow-y\[visible\]`overflow-y: visible;`overflow-y\[hidden\]`overflow-y: hidden;`overflow-y\[scroll\]`overflow-y: scroll;`overflow-y\[clip\]`overflow-y: clip;`overflow-y\[auto\]`overflow-y: auto;`overflow-y\[*<var>*\]`overflow-y: **;`overflow-y\[--my-overflow\]#### overscroll-behavior

[](#overscroll-behavior)

ClassStyleExampleoverscroll\[auto\]`overscroll-behavior: auto;`overscroll\[contain\]`overscroll-behavior: contain;`overscroll\[none\]`overscroll-behavior: none;`overscroll\[*<var>*\]`overscroll-behavior: **;`overscroll\[--my-overscroll\]#### position

[](#position)

ClassStyleExampleposition\[static\]`position: static;`position\[fixed\]`position: fixed;`position\[absolute\]`position: absolute;`position\[relative\]`position: relative;`position\[sticky\]`position: sticky;`position\[*<var>*\]`position: **;`position\[--my-position\]#### top / right / bottom / left

[](#top--right--bottom--left)

ClassStyleExampletop\[auto\]`top: auto;`top\[full\]`top: 100%;`top\[*<fraction>*\]`top: **;`top\[1/2\]top\[*<dimension>*\]`top: **;`top\[10px\]top\[*<var>*\]`top: **;`top\[--my-top\]right\[auto\]`right: auto;`right\[full\]`right: 100%;`right\[*<fraction>*\]`right: **;`right\[1/2\]right\[*<dimension>*\]`right: **;`right\[10px\]right\[*<var>*\]`right: **;`right\[--my-right\]bottom\[auto\]`bottom: auto;`bottom\[full\]`bottom: 100%;`bottom\[*<fraction>*\]`bottom: **;`bottom\[1/2\]bottom\[*<dimension>*\]`bottom: **;`bottom\[10px\]bottom\[*<var>*\]`bottom: **;`bottom\[--my-bottom\]left\[auto\]`left: auto;`left\[full\]`left: 100%;`left\[*<fraction>*\]`left: **;`left\[1/2\]left\[*<dimension>*\]`left: **;`left\[10px\]left\[*<var>*\]`left: **;`left\[--my-left\]#### visibility

[](#visibility)

ClassStyleExamplevisibility\[visible\]`visibility: visible;`visibility\[invisible\]`visibility: invisible;`visibility\[collapsable\]`visibility: collapsable;`visibility\[*<var>*\]`visibility: **;`visibility\[--my-visibility\]#### z-index

[](#z-index)

ClassStyleExamplez\[auto\]`z-index: auto;`z\[*<number>*\]`z-index: **;`z\[10\]z\[*<var>*\]`z-index: **;`z\[--my-z\]---

### Flex

[](#flex)

#### flex

[](#flex-1)

ClassStyleExampleflex\[auto\]`flex: auto;`flex\[none\]`flex: none;`flex\[initial\]`flex: 0 auto;`flex\[1\]`flex: 1;`flex\[*<number>*\]`flex: **;`flex\[2\]flex\[*<custom>*\]`flex: **;`flex\[1\_0\_auto\]#### flex-basis

[](#flex-basis)

ClassStyleExampleflex\[basis:auto\]`flex-basis: auto;`flex\[basis:full\]`flex-basis: 100%;`flex\[basis:*<fraction>*\]`flex-basis: **;`flex\[basis:1/2\]flex\[basis:*<dimension>*\]`flex-basis: **;`flex\[basis:10px\]flex\[basis:*<var>*\]`flex-basis: **;`flex\[basis:--my-basis\]#### flex-direction

[](#flex-direction)

ClassStyleExampleflex\[row\]`flex-direction: row;`flex\[row-reverse\]`flex-direction: row-reverse;`flex\[column\]`flex-direction: column;`flex\[column-reverse\]`flex-direction: column-reverse;`#### flex-wrap

[](#flex-wrap)

ClassStyleExampleflex\[nowrap\]`flex-wrap: nowrap;`flex\[wrap\]`flex-wrap: wrap;`flex\[wrap-reverse\]`flex-wrap: wrap-reverse;`#### flex-grow

[](#flex-grow)

ClassStyleExampleflex\[grow\]`flex-grow: 1;`flex\[grow:*<number>*\]`flex-grow: **;`flex\[grow:2\]flex\[grow:*<var>*\]`flex-grow: **;`flex\[grow:--my-grow\]#### flex-shrink

[](#flex-shrink)

ClassStyleExampleflex\[shrink\]`flex-shrink: 1;`flex\[shrink:*<number>*\]`flex-shrink: **;`flex\[shrink:2\]flex\[shrink:*<var>*\]`flex-shrink: **;`flex\[shrink:--my-shrink\]#### order

[](#order)

ClassStyleExampleorder\[first\]`order: -9999;`order\[last\]`order: 9999;`order\[none\]`order: 0;`order\[*<number>*\]`order: **;`order\[2\]order\[*<var>*\]`order: **;`order\[--my-order\]---

### Grid

[](#grid)

#### grid-template-columns

[](#grid-template-columns)

ClassStyleExamplegrid\[cols:none\]`grid-template-columns: none;`grid\[cols:subgrid\]`grid-template-columns: subgrid;`grid\[cols:*<number>*\]`grid-template-columns: repeat(**, minmax(0, 1fr));`grid\[cols:3\]grid\[cols:*<custom>*\]`grid-template-columns: **;`grid\[cols:\[200px\_1fr\_200px\]\]grid\[cols:*<var>*\]`grid-template-columns: **;`grid\[cols:--my-cols\]#### grid-template-rows

[](#grid-template-rows)

ClassStyleExamplegrid\[rows:none\]`grid-template-rows: none;`grid\[rows:subgrid\]`grid-template-rows: subgrid;`grid\[rows:*<number>*\]`grid-template-rows: repeat(**, minmax(0, 1fr));`grid\[rows:3\]grid\[rows:*<custom>*\]`grid-template-rows: **;`grid\[rows:\[100px\_1fr\]\]grid\[rows:*<var>*\]`grid-template-rows: **;`grid\[rows:--my-rows\]#### grid-column-span

[](#grid-column-span)

ClassStyleExamplegrid\[span:full\]`grid-column: 1 / -1;`grid\[span:*<number>*\]`grid-column: span ** / span **;`grid\[span:2\]grid\[span:*<var>*\]`grid-column: span ** / span **;`grid\[span:--my-span\]#### grid-column

[](#grid-column)

ClassStyleExamplegrid\[column:auto\]`grid-column: auto;`grid\[column:*<number>*\]`grid-column: **;`grid\[column:2\]grid\[column:*<var>*\]`grid-column: **;`grid\[column:--my-col\]grid\[column-start:auto\]`grid-column-start: auto;`grid\[column-start:*<number>*\]`grid-column-start: **;`grid\[column-start:1\]grid\[column-end:auto\]`grid-column-end: auto;`grid\[column-end:*<number>*\]`grid-column-end: **;`grid\[column-end:3\]#### grid-row

[](#grid-row)

ClassStyleExamplegrid\[row:auto\]`grid-row: auto;`grid\[row:*<number>*\]`grid-row: **;`grid\[row:2\]grid\[row:*<var>*\]`grid-row: **;`grid\[row:--my-row\]#### grid-auto-flow

[](#grid-auto-flow)

ClassStyleExamplegrid\[flow:row\]`grid-auto-flow: row;`grid\[flow:column\]`grid-auto-flow: column;`grid\[flow:dense\]`grid-auto-flow: dense;`grid\[flow:row-dense\]`grid-auto-flow: row dense;`grid\[flow:column-dense\]`grid-auto-flow: column dense;`#### grid-auto-columns

[](#grid-auto-columns)

ClassStyleExamplegrid\[auto-columns:auto\]`grid-auto-columns: auto;`grid\[auto-columns:min\]`grid-auto-columns: min-content;`grid\[auto-columns:max\]`grid-auto-columns: max-content;`grid\[auto-columns:fr\]`grid-auto-columns: minmax(0, 1fr);`grid\[auto-columns:*<dimension>*\]`grid-auto-columns: **;`grid\[auto-columns:100px\]grid\[auto-columns:*<var>*\]`grid-auto-columns: **;`grid\[auto-columns:--my-cols\]#### grid-auto-rows

[](#grid-auto-rows)

ClassStyleExamplegrid\[auto-rows:auto\]`grid-auto-rows: auto;`grid\[auto-rows:min\]`grid-auto-rows: min-content;`grid\[auto-rows:max\]`grid-auto-rows: max-content;`grid\[auto-rows:fr\]`grid-auto-rows: minmax(0, 1fr);`grid\[auto-rows:*<dimension>*\]`grid-auto-rows: **;`grid\[auto-rows:100px\]grid\[auto-rows:*<var>*\]`grid-auto-rows: **;`grid\[auto-rows:--my-rows\]#### gap

[](#gap)

ClassStyleExamplegap\[*<theme-size>*\]`gap: var(--theme-gap-**);`gap\[sm\]gap\[*<dimension>*\]`gap: **;`gap\[10px\]gap\[*<var>*\]`gap: **;`gap\[--my-gap\]gap\[x:*<dimension>*\]`column-gap: **;`gap\[x:10px\]gap\[x:*<var>*\]`column-gap: **;`gap\[x:--my-gap\]gap\[y:*<dimension>*\]`row-gap: **;`gap\[y:10px\]gap\[y:*<var>*\]`row-gap: **;`gap\[y:--my-gap\]#### justify-content

[](#justify-content)

ClassStyleExamplejustify-content\[start\]`justify-content: start;`justify-content\[end\]`justify-content: end;`justify-content\[center\]`justify-content: center;`justify-content\[between\]`justify-content: space-between;`justify-content\[around\]`justify-content: space-around;`justify-content\[evenly\]`justify-content: space-evenly;`justify-content\[stretch\]`justify-content: stretch;`justify-content\[baseline\]`justify-content: baseline;`justify-content\[normal\]`justify-content: normal;`justify-content\[end-safe\]`justify-content: safe end;`justify-content\[center-safe\]`justify-content: safe center;`#### justify-items

[](#justify-items)

ClassStyleExamplejustify-items\[start\]`justify-items: start;`justify-items\[end\]`justify-items: end;`justify-items\[center\]`justify-items: center;`justify-items\[stretch\]`justify-items: stretch;`justify-items\[normal\]`justify-items: normal;`justify-items\[end-safe\]`justify-items: safe end;`justify-items\[center-safe\]`justify-items: safe center;`#### justify-self

[](#justify-self)

ClassStyleExamplejustify-self\[auto\]`justify-self: auto;`justify-self\[start\]`justify-self: start;`justify-self\[end\]`justify-self: end;`justify-self\[center\]`justify-self: center;`justify-self\[stretch\]`justify-self: stretch;`justify-self\[end-safe\]`justify-self: safe end;`justify-self\[center-safe\]`justify-self: safe center;`#### align-content

[](#align-content)

ClassStyleExamplealign-content\[start\]`align-content: start;`align-content\[end\]`align-content: end;`align-content\[center\]`align-content: center;`align-content\[between\]`align-content: space-between;`align-content\[around\]`align-content: space-around;`align-content\[evenly\]`align-content: space-evenly;`align-content\[stretch\]`align-content: stretch;`align-content\[baseline\]`align-content: baseline;`align-content\[normal\]`align-content: normal;`align-content\[end-safe\]`align-content: safe end;`align-content\[center-safe\]`align-content: safe center;`#### align-items

[](#align-items)

ClassStyleExamplealign-items\[start\]`align-items: start;`align-items\[end\]`align-items: end;`align-items\[center\]`align-items: center;`align-items\[stretch\]`align-items: stretch;`align-items\[baseline\]`align-items: baseline;`align-items\[baseline-last\]`align-items: last baseline;`align-items\[end-safe\]`align-items: safe end;`align-items\[center-safe\]`align-items: safe center;`#### align-self

[](#align-self)

ClassStyleExamplealign-self\[auto\]`align-self: auto;`align-self\[start\]`align-self: start;`align-self\[end\]`align-self: end;`align-self\[center\]`align-self: center;`align-self\[stretch\]`align-self: stretch;`align-self\[baseline\]`align-self: baseline;`align-self\[baseline-last\]`align-self: last baseline;`align-self\[end-safe\]`align-self: safe end;`align-self\[center-safe\]`align-self: safe center;`#### place-content

[](#place-content)

ClassStyleExampleplace-content\[start\]`place-content: start;`place-content\[end\]`place-content: end;`place-content\[center\]`place-content: center;`place-content\[between\]`place-content: space-between;`place-content\[around\]`place-content: space-around;`place-content\[evenly\]`place-content: space-evenly;`place-content\[baseline\]`place-content: baseline;`place-content\[stretch\]`place-content: stretch;`place-content\[end-safe\]`place-content: safe end;`place-content\[center-safe\]`place-content: safe center;`#### place-items

[](#place-items)

ClassStyleExampleplace-items\[start\]`place-items: start;`place-items\[end\]`place-items: end;`place-items\[center\]`place-items: center;`place-items\[stretch\]`place-items: stretch;`place-items\[baseline\]`place-items: baseline;`#### place-self

[](#place-self)

ClassStyleExampleplace-self\[auto\]`place-self: auto;`place-self\[start\]`place-self: start;`place-self\[end\]`place-self: end;`place-self\[center\]`place-self: center;`place-self\[stretch\]`place-self: stretch;`---

### Spacing

[](#spacing)

#### padding

[](#padding)

ClassStyleExamplep\[auto\]`padding: auto;`p\[*<dimension>*\]`padding: **;`p\[10px\]p\[*<var>*\]`padding: **;`p\[--my-padding\]pt\[*<dimension>*\]`padding-top: **;`pt\[10px\]pb\[*<dimension>*\]`padding-bottom: **;`pb\[10px\]ps\[*<dimension>*\]`padding-left: **;`ps\[10px\]pe\[*<dimension>*\]`padding-right: **;`pe\[10px\]px\[*<dimension>*\]`padding-left: **; padding-right: **;`px\[10px\]py\[*<dimension>*\]`padding-top: **; padding-bottom: **;`py\[10px\]#### margin

[](#margin)

ClassStyleExamplem\[auto\]`margin: auto;`m\[*<dimension>*\]`margin: **;`m\[10px\]m\[*<var>*\]`margin: **;`m\[--my-margin\]mt\[*<dimension>*\]`margin-top: **;`mt\[10px\]mb\[*<dimension>*\]`margin-bottom: **;`mb\[10px\]ms\[*<dimension>*\]`margin-left: **;`ms\[10px\]me\[*<dimension>*\]`margin-right: **;`me\[10px\]mx\[*<dimension>*\]`margin-left: **; margin-right: **;`mx\[10px\]mx\[auto\]`margin-left: auto; margin-right: auto;`my\[*<dimension>*\]`margin-top: **; margin-bottom: **;`my\[10px\]---

### Sizing

[](#sizing)

#### width

[](#width)

ClassStyleExamplew\[auto\]`width: auto;`w\[full\]`width: 100%;`w\[screen\]`width: 100vw;`w\[dvw\]`width: 100dvw;`w\[lvw\]`width: 100lvw;`w\[svw\]`width: 100svw;`w\[min\]`width: min-content;`w\[max\]`width: max-content;`w\[fit\]`width: fit-content;`w\[lh\]`width: 1lh;`w\[*<dimension>*\]`width: **;`w\[10px\]w\[*<fraction>*\]`width: **;`w\[1/2\]w\[*<var>*\]`width: **;`w\[--my-width\]#### min-width

[](#min-width)

ClassStyleExamplemin-w\[auto\]`min-width: auto;`min-w\[full\]`min-width: 100%;`min-w\[screen\]`min-width: 100vw;`min-w\[dvw\]`min-width: 100dvw;`min-w\[lvw\]`min-width: 100lvw;`min-w\[svw\]`min-width: 100svw;`min-w\[min\]`min-width: min-content;`min-w\[max\]`min-width: max-content;`min-w\[fit\]`min-width: fit-content;`min-w\[*<dimension>*\]`min-width: **;`min-w\[10px\]min-w\[*<fraction>*\]`min-width: **;`min-w\[1/2\]min-w\[*<var>*\]`min-width: **;`min-w\[--my-min-width\]#### max-width

[](#max-width)

ClassStyleExamplemax-w\[auto\]`max-width: auto;`max-w\[full\]`max-width: 100%;`max-w\[screen\]`max-width: 100vw;`max-w\[dvw\]`max-width: 100dvw;`max-w\[lvw\]`max-width: 100lvw;`max-w\[svw\]`max-width: 100svw;`max-w\[min\]`max-width: min-content;`max-w\[max\]`max-width: max-content;`max-w\[fit\]`max-width: fit-content;`max-w\[*<dimension>*\]`max-width: **;`max-w\[10px\]max-w\[*<fraction>*\]`max-width: **;`max-w\[1/2\]max-w\[*<var>*\]`max-width: **;`max-w\[--my-max-width\]#### height

[](#height)

ClassStyleExampleh\[auto\]`height: auto;`h\[full\]`height: 100%;`h\[screen\]`height: 100vh;`h\[dvh\]`height: 100dvh;`h\[lvh\]`height: 100lvh;`h\[svh\]`height: 100svh;`h\[min\]`height: min-content;`h\[max\]`height: max-content;`h\[fit\]`height: fit-content;`h\[lh\]`height: 1lh;`h\[*<dimension>*\]`height: **;`h\[10px\]h\[*<fraction>*\]`height: **;`h\[1/2\]h\[*<var>*\]`height: **;`h\[--my-height\]#### min-height

[](#min-height)

ClassStyleExamplemin-h\[auto\]`min-height: auto;`min-h\[full\]`min-height: 100%;`min-h\[screen\]`min-height: 100vh;`min-h\[dvh\]`min-height: 100dvh;`min-h\[lvh\]`min-height: 100lvh;`min-h\[svh\]`min-height: 100svh;`min-h\[min\]`min-height: min-content;`min-h\[max\]`min-height: max-content;`min-h\[fit\]`min-height: fit-content;`min-h\[*<dimension>*\]`min-height: **;`min-h\[10px\]min-h\[*<fraction>*\]`min-height: **;`min-h\[1/2\]min-h\[*<var>*\]`min-height: **;`min-h\[--my-min-height\]#### max-height

[](#max-height)

ClassStyleExamplemax-h\[auto\]`max-height: auto;`max-h\[full\]`max-height: 100%;`max-h\[screen\]`max-height: 100vh;`max-h\[dvh\]`max-height: 100dvh;`max-h\[lvh\]`max-height: 100lvh;`max-h\[svh\]`max-height: 100svh;`max-h\[min\]`max-height: min-content;`max-h\[max\]`max-height: max-content;`max-h\[fit\]`max-height: fit-content;`max-h\[*<dimension>*\]`max-height: **;`max-h\[10px\]max-h\[*<fraction>*\]`max-height: **;`max-h\[1/2\]max-h\[*<var>*\]`max-height: **;`max-h\[--my-max-height\]---

### Typography

[](#typography)

#### font-family

[](#font-family)

ClassStyleExamplefont\[family:sans\]`font-family: var(--theme-font-sans);`font\[family:serif\]`font-family: var(--theme-font-serif);`font\[family:mono\]`font-family: var(--theme-font-mono);`font\[family:*<var>*\]`font-family: **;`font\[family:--my-font\]font\[family:*<custom>*\]`font-family: **;`font\[family:Georgia\]#### font-size

[](#font-size)

ClassStyleExamplefont\[size:xs\]`font-size: var(--theme-font-xs);`font\[size:sm\]`font-size: var(--theme-font-sm);`font\[size:md\]`font-size: var(--theme-font-md);`font\[size:lg\]`font-size: var(--theme-font-lg);`font\[size:xl\]`font-size: var(--theme-font-xl);`font\[size:*<dimension>*\]`font-size: **;`font\[size:20px\]font\[size:*<var>*\]`font-size: **;`font\[size:--my-size\]#### font-smoothing

[](#font-smoothing)

ClassStyleExamplefont\[smoothing:antialiased\]`-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`font\[smoothing:auto\]`-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;`font\[smoothing:none\]`-webkit-font-smoothing: none;`#### font-style

[](#font-style)

ClassStyleExamplefont\[style:italic\]`font-style: italic;`font\[style:normal\]`font-style: normal;`#### font-weight

[](#font-weight)

ClassStyleExamplefont\[weight:100\]`font-weight: 100;`font\[weight:200\]`font-weight: 200;`font\[weight:300\]`font-weight: 300;`font\[weight:400\]`font-weight: 400;`font\[weight:500\]`font-weight: 500;`font\[weight:600\]`font-weight: 600;`font\[weight:700\]`font-weight: 700;`font\[weight:800\]`font-weight: 800;`font\[weight:900\]`font-weight: 900;`font\[weight:bold\]`font-weight: bold;`font\[weight:bolder\]`font-weight: bolder;`#### font-stretch

[](#font-stretch)

ClassStyleExamplefont\[stretch:ultra-condensed\]`font-stretch: ultra-condensed;`font\[stretch:extra-condensed\]`font-stretch: extra-condensed;`font\[stretch:condensed\]`font-stretch: condensed;`font\[stretch:semi-condensed\]`font-stretch: semi-condensed;`font\[stretch:normal\]`font-stretch: normal;`font\[stretch:semi-expanded\]`font-stretch: semi-expanded;`font\[stretch:expanded\]`font-stretch: expanded;`font\[stretch:extra-expanded\]`font-stretch: extra-expanded;`font\[stretch:ultra-expanded\]`font-stretch: ultra-expanded;`font\[stretch:*<percentage>*\]`font-stretch: **;`font\[stretch:75%\]font\[stretch:*<var>*\]`font-stretch: **;`font\[stretch:--my-stretch\]#### font-variant-numeric

[](#font-variant-numeric)

ClassStyleExamplefont\[variant-numeric:normal\]`font-variant-numeric: normal;`font\[variant-numeric:ordinal\]`font-variant-numeric: ordinal;`font\[variant-numeric:slashed-zero\]`font-variant-numeric: slashed-zero;`font\[variant-numeric:lining-nums\]`font-variant-numeric: lining-nums;`font\[variant-numeric:oldstyle-nums\]`font-variant-numeric: oldstyle-nums;`font\[variant-numeric:proportional-nums\]`font-variant-numeric: proportional-nums;`font\[variant-numeric:tabular-nums\]`font-variant-numeric: tabular-nums;`font\[variant-numeric:diagonal-fractions\]`font-variant-numeric: diagonal-fractions;`font\[variant-numeric:stacked-fractions\]`font-variant-numeric: stacked-fractions;`#### letter-spacing

[](#letter-spacing)

ClassStyleExampleletterspacing\[tight\]`letter-spacing: var(--theme-letterSpacing-tight);`letterspacing\[normal\]`letter-spacing: var(--theme-letterSpacing-normal);`letterspacing\[wide\]`letter-spacing: var(--theme-letterSpacing-wide);`letterspacing\[*<dimension>*\]`letter-spacing: **;`letterspacing\[2px\]letterspacing\[*<var>*\]`letter-spacing: **;`letterspacing\[--my-spacing\]#### line-clamp

[](#line-clamp)

ClassStyleExamplelineclamp\[none\]`line-clamp: none;`lineclamp\[*<number>*\]`line-clamp: **;`lineclamp\[3\]lineclamp\[*<var>*\]`line-clamp: **;`lineclamp\[--my-clamp\]#### line-height

[](#line-height)

ClassStyleExamplelh\[none\]`line-height: none;`lh\[tight\]`line-height: var(--theme-lineHeight-tight);`lh\[snug\]`line-height: var(--theme-lineHeight-snug);`lh\[normal\]`line-height: var(--theme-lineHeight-normal);`lh\[relaxed\]`line-height: var(--theme-lineHeight-relaxed);`lh\[loose\]`line-height: var(--theme-lineHeight-loose);`lh\[*<number>*\]`line-height: **;`lh\[1.5\]lh\[*<var>*\]`line-height: **;`lh\[--my-height\]#### list-style-image

[](#list-style-image)

ClassStyleExamplelist\[image:none\]`list-style-image: none;`list\[image:*<url>*\]`list-style-image: **;`list\[image:url(image.png)\]list\[image:*<var>*\]`list-style-image: **;`list\[image:--my-image\]#### list-style-position

[](#list-style-position)

ClassStyleExamplelist\[position:inside\]`list-style-position: inside;`list\[position:outside\]`list-style-position: outside;`#### list-style-type

[](#list-style-type)

ClassStyleExamplelist\[type:none\]`list-style-type: none;`list\[type:disc\]`list-style-type: disc;`list\[type:decimal\]`list-style-type: decimal;`list\[type:*<custom>*\]`list-style-type: **;`list\[type:upper-roman\]list\[type:*<var>*\]`list-style-type: **;`list\[type:--my-type\]#### text-align

[](#text-align)

ClassStyleExampletext\[left\]`text-align: left;`text\[center\]`text-align: center;`text\[right\]`text-align: right;`text\[justify\]`text-align: justify;`text\[start\]`text-align: start;`text\[end\]`text-align: end;`#### text-decoration

[](#text-decoration)

ClassStyleExampletext\[underline\]`text-decoration: underline;`text\[overline\]`text-decoration: overline;`text\[line-through\]`text-decoration: line-through;`text\[no-underline\]`text-decoration: none;`#### text-transform

[](#text-transform)

ClassStyleExampletext\[uppercase\]`text-transform: uppercase;`text\[lowercase\]`text-transform: lowercase;`text\[capitalize\]`text-transform: capitalize;`text\[normal-case\]`text-transform: none;`#### text-overflow

[](#text-overflow)

ClassStyleExampletext\[truncate\]`overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`text\[ellipsis\]`text-overflow: ellipsis;`text\[clip\]`text-overflow: clip;`#### text-wrap

[](#text-wrap)

ClassStyleExampletext\[wrap\]`text-wrap: wrap;`text\[nowrap\]`text-wrap: nowrap;`text\[balance\]`text-wrap: balance;`text\[pretty\]`text-wrap: pretty;`#### text-indent

[](#text-indent)

ClassStyleExampletext\[indent:*<dimension>*\]`text-indent: **;`text\[indent:2em\]text\[indent:*<var>*\]`text-indent: **;`text\[indent:--my-indent\]#### vertical-align

[](#vertical-align)

ClassStyleExampletext\[vertical:baseline\]`vertical-align: baseline;`text\[vertical:top\]`vertical-align: top;`text\[vertical:middle\]`vertical-align: middle;`text\[vertical:bottom\]`vertical-align: bottom;`text\[vertical:text-top\]`vertical-align: text-top;`text\[vertical:text-bottom\]`vertical-align: text-bottom;`text\[vertical:sub\]`vertical-align: sub;`text\[vertical:super\]`vertical-align: super;`text\[vertical:*<dimension>*\]`vertical-align: **;`text\[vertical:4px\]text\[vertical:*<var>*\]`vertical-align: **;`text\[vertical:--my-align\]#### white-space

[](#white-space)

ClassStyleExamplewhitespace\[normal\]`white-space: normal;`whitespace\[nowrap\]`white-space: nowrap;`whitespace\[pre\]`white-space: pre;`whitespace\[pre-line\]`white-space: pre-line;`whitespace\[pre-wrap\]`white-space: pre-wrap;`whitespace\[break-spaces\]`white-space: break-spaces;`#### word-break

[](#word-break)

ClassStyleExamplewordbreak\[normal\]`word-break: normal;`wordbreak\[break-all\]`word-break: break-all;`wordbreak\[keep-all\]`word-break: keep-all;`#### overflow-wrap

[](#overflow-wrap)

ClassStyleExampleoverflow-wrap\[normal\]`overflow-wrap: normal;`overflow-wrap\[break-word\]`overflow-wrap: break-word;`overflow-wrap\[anywhere\]`overflow-wrap: anywhere;`overflow-wrap\[*<var>*\]`overflow-wrap: **;`overflow-wrap\[--my-wrap\]#### hyphens

[](#hyphens)

ClassStyleExamplehyphens\[none\]`hyphens: none;`hyphens\[manual\]`hyphens: manual;`hyphens\[auto\]`hyphens: auto;`hyphens\[*<var>*\]`hyphens: **;`hyphens\[--my-hyphens\]#### content

[](#content)

ClassStyleExamplecontent\[none\]`content: none;`content\[*<string>*\]`content: **;`content\["Hello"\]content\[*<var>*\]`content: **;`content\[--my-content\]---

### Backgrounds

[](#backgrounds)

#### background-attachment

[](#background-attachment)

ClassStyleExamplebg\[fixed\]`background-attachment: fixed;`bg\[local\]`background-attachment: local;`bg\[scroll\]`background-attachment: scroll;`#### background-clip

[](#background-clip)

ClassStyleExamplebg\[clip:border\]`background-clip: border-box;`bg\[clip:padding\]`background-clip: padding-box;`bg\[clip:content\]`background-clip: content-box;`bg\[clip:text\]`background-clip: text;`#### background-color

[](#background-color)

ClassStyleExamplebg\[none\]`background-color: none;`bg\[inherit\]`background-color: inherit;`bg\[transparent\]`background-color: transparent;`bg\[current\]`background-color: currentColor;`bg\[*<hex>*\]`background-color: **;`bg\[#ff0000\]bg\[*<color-function>*\]`background-color: **;`bg\[oklch(70%\_0.1\_180)\]bg\[*<var>*\]`background-color: **;`bg\[--my-bg\]#### background-image

[](#background-image)

ClassStyleExamplebg\[image:*<url>*\]`background-image: **;`bg\[image:url(image.png)\]bg\[image:*<var>*\]`background-image: **;`bg\[image:--my-image\]bg\[url(*<src>*)\]`background-image: url(**);`bg\[url(image.png)\]#### background-origin

[](#background-origin)

ClassStyleExamplebg\[origin:border\]`background-origin: border-box;`bg\[origin:padding\]`background-origin: padding-box;`bg\[origin:content\]`background-origin: content-box;`#### background-position

[](#background-position)

ClassStyleExamplebg\[position:top\]`background-position: top;`bg\[position:right\]`background-position: right;`bg\[position:bottom\]`background-position: bottom;`bg\[position:left\]`background-position: left;`bg\[position:center\]`background-position: center;`bg\[position:*<custom>*\]`background-position: **;`bg\[position:center\_top\]bg\[position:*<var>*\]`background-position: **;`bg\[position:--my-position\]#### background-repeat

[](#background-repeat)

ClassStyleExamplebg\[repeat\]`background-repeat: repeat;`bg\[repeat:repeat\]`background-repeat: repeat;`bg\[repeat:no-repeat\]`background-repeat: no-repeat;`bg\[repeat:space\]`background-repeat: space;`bg\[repeat:round\]`background-repeat: round;`bg\[repeat:x\]`background-repeat: repeat-x;`bg\[repeat:y\]`background-repeat: repeat-y;`bg\[repeat:*<var>*\]`background-repeat: **;`bg\[repeat:--my-repeat\]#### background-size

[](#background-size)

ClassStyleExamplebg\[size:auto\]`background-size: auto;`bg\[size:cover\]`background-size: cover;`bg\[size:contain\]`background-size: contain;`bg\[size:*<custom>*\]`background-size: **;`bg\[size:100px\_auto\]bg\[size:*<var>*\]`background-size: **;`bg\[size:--my-size\]---

### Borders

[](#borders)

#### border-radius

[](#border-radius)

ClassStyleExampleborder\[radius:none\]`border-radius: 0;`border\[radius:full\]`border-radius: calc(infinity * 1px);`border\[radius:sm\]`border-radius: var(--theme-radius-sm);`border\[radius:md\]`border-radius: var(--theme-radius-md);`border\[radius:lg\]`border-radius: var(--theme-radius-lg);`border\[radius:*<dimension>*\]`border-radius: **;`border\[radius:10px\]border\[radius:*<var>*\]`border-radius: **;`border\[radius:--my-radius\]border\[radius-t:*<dimension>*\]`border-top-left-radius: **; border-top-right-radius: **;`border\[radius-t:8px\]border\[radius-r:*<dimension>*\]`border-top-right-radius: **; border-bottom-right-radius: **;`border\[radius-r:8px\]border\[radius-b:*<dimension>*\]`border-bottom-left-radius: **; border-bottom-right-radius: **;`border\[radius-b:8px\]border\[radius-l:*<dimension>*\]`border-top-left-radius: **; border-bottom-left-radius: **;`border\[radius-l:8px\]border\[radius-tl:*<dimension>*\]`border-top-left-radius: **;`border\[radius-tl:8px\]border\[radius-tr:*<dimension>*\]`border-top-right-radius: **;`border\[radius-tr:8px\]border\[radius-br:*<dimension>*\]`border-bottom-right-radius: **;`border\[radius-br:8px\]border\[radius-bl:*<dimension>*\]`border-bottom-left-radius: **;`border\[radius-bl:8px\]#### border-width

[](#border-width)

ClassStyleExampleborder\[0\]`border-width: 0;`border\[*<dimension>*\]`border-width: **;`border\[2px\]border\[*<var>*\]`border-width: **;`border\[--my-width\]border\[t:*<dimension>*\]`border-top-width: **;`border\[t:2px\]border\[r:*<dimension>*\]`border-right-width: **;`border\[r:2px\]border\[b:*<dimension>*\]`border-bottom-width: **;`border\[b:2px\]border\[l:*<dimension>*\]`border-left-width: **;`border\[l:2px\]border\[x:*<dimension>*\]`border-inline-width: **;`border\[x:2px\]border\[y:*<dimension>*\]`border-block-width: **;`border\[y:2px\]border\[s:*<dimension>*\]`border-inline-start-width: **;`border\[s:2px\]border\[e:*<dimension>*\]`border-inline-end-width: **;`border\[e:2px\]#### border-color

[](#border-color)

ClassStyleExampleborder\[color:transparent\]`border-color: transparent;`border\[color:current\]`border-color: currentColor;`border\[color:*<hex>*\]`border-color: **;`border\[color:#000000\]border\[color:*<color-function>*\]`border-color: **;`border\[color:oklch(50%\_0.1\_180)\]border\[color:*<var>*\]`border-color: **;`border\[color:--my-color\]#### border-style

[](#border-style)

ClassStyleExampleborder\[style:solid\]`border-style: solid;`border\[style:dashed\]`border-style: dashed;`border\[style:dotted\]`border-style: dotted;`border\[style:double\]`border-style: double;`border\[style:hidden\]`border-style: hidden;`border\[style:none\]`border-style: none;`#### border-divide

[](#border-divide)

ClassStyleExampleborder\[divide-x\]`border-inline-start-width: 0px; border-inline-end-width: 1px;` (on child elements)border\[divide-x:*<dimension>*\]`border-inline-start-width: 0px; border-inline-end-width: **;`border\[divide-x:2px\]border\[divide-y\]`border-top-width: 0px; border-bottom-width: 1px;` (on child elements)border\[divide-y:*<dimension>*\]`border-top-width: 0px; border-bottom-width: **;`border\[divide-y:2px\]border\[divide:solid\]`border-style: solid;` (on child elements)border\[divide:dashed\]`border-style: dashed;` (on child elements)#### outline

[](#outline)

ClassStyleExampleoutline\[0\]`outline-width: 0;`outline\[*<dimension>*\]`outline-width: **;`outline\[2px\]outline\[width:*<dimension>*\]`outline-width: **;`outline\[width:2px\]outline\[color:transparent\]`outline-color: transparent;`outline\[color:current\]`outline-color: currentColor;`outline\[color:*<hex>*\]`outline-color: **;`outline\[color:#000\]outline\[color:*<var>*\]`outline-color: **;`outline\[color:--my-color\]outline\[style:solid\]`outline-style: solid;`outline\[style:dashed\]`outline-style: dashed;`outline\[style:dotted\]`outline-style: dotted;`outline\[style:double\]`outline-style: double;`outline\[style:none\]`outline-style: none;`outline\[offset:*<var>*\]`outline-offset: **;`outline\[offset:--my-offset\]---

### Effects

[](#effects)

#### box-shadow

[](#box-shadow)

ClassStyleExampleshadow\[none\]`box-shadow: 0 0 #0000;`shadow\[xs\]`box-shadow: var(--theme-shadow-xs);`shadow\[sm\]`box-shadow: var(--theme-shadow-sm);`shadow\[md\]`box-shadow: var(--theme-shadow-md);`shadow\[lg\]`box-shadow: var(--theme-shadow-lg);`shadow\[xl\]`box-shadow: var(--theme-shadow-xl);`shadow\[*<custom>*\]`box-shadow: **;`shadow\[0\_2px\_4px\_#000\]shadow\[*<var>*\]`box-shadow: **;`shadow\[--my-shadow\]shadow\[color:*<hex>*\]`--uc-shadow-color: **;`shadow\[color:#000\]shadow\[color:*<var>*\]`--uc-shadow-color: **;`shadow\[color:--my-color\]#### inset-shadow

[](#inset-shadow)

ClassStyleExampleinset-shadow\[none\]`box-shadow: inset 0 0 #0000;`inset-shadow\[xs\]`box-shadow: inset var(--theme-shadow-xs);`inset-shadow\[sm\]`box-shadow: inset var(--theme-shadow-sm);`inset-shadow\[*<var>*\]`box-shadow: inset **;`inset-shadow\[--my-shadow\]#### ring

[](#ring)

ClassStyleExamplering\[*<number>*\]`box-shadow: 0 0 0 **px var(--uc-ring-color);`ring\[2\]ring\[*<var>*\]`box-shadow: 0 0 0 ** var(--uc-ring-color);`ring\[--my-ring\]ring\[color:*<hex>*\]`--uc-ring-color: **;`ring\[color:#000\]ring\[color:*<var>*\]`--uc-ring-color: **;`ring\[color:--my-color\]#### opacity

[](#opacity)

ClassStyleExampleopacity\[0\]`opacity: 0;`opacity\[25\]`opacity: 0.25;`opacity\[50\]`opacity: 0.5;`opacity\[75\]`opacity: 0.75;`opacity\[100\]`opacity: 1;`opacity\[*<number>*\]`opacity: **;`opacity\[0.8\]opacity\[*<var>*\]`opacity: **;`opacity\[--my-opacity\]#### mix-blend-mode

[](#mix-blend-mode)

ClassStyleExamplemix-blend\[normal\]`mix-blend-mode: normal;`mix-blend\[multiply\]`mix-blend-mode: multiply;`mix-blend\[screen\]`mix-blend-mode: screen;`mix-blend\[overlay\]`mix-blend-mode: overlay;`mix-blend\[darken\]`mix-blend-mode: darken;`mix-blend\[lighten\]`mix-blend-mode: lighten;`mix-blend\[color-dodge\]`mix-blend-mode: color-dodge;`mix-blend\[color-burn\]`mix-blend-mode: color-burn;`mix-blend\[hard-light\]`mix-blend-mode: hard-light;`mix-blend\[soft-light\]`mix-blend-mode: soft-light;`mix-blend\[difference\]`mix-blend-mode: difference;`mix-blend\[exclusion\]`mix-blend-mode: exclusion;`mix-blend\[hue\]`mix-blend-mode: hue;`mix-blend\[saturation\]`mix-blend-mode: saturation;`mix-blend\[color\]`mix-blend-mode: color;`mix-blend\[luminosity\]`mix-blend-mode: luminosity;`mix-blend\[plus-darker\]`mix-blend-mode: plus-darker;`mix-blend\[plus-lighter\]`mix-blend-mode: plus-lighter;`#### background-blend-mode

[](#background-blend-mode)

ClassStyleExamplebg-blend\[normal\]`background-blend-mode: normal;`bg-blend\[multiply\]`background-blend-mode: multiply;`bg-blend\[screen\]`background-blend-mode: screen;`bg-blend\[overlay\]`background-blend-mode: overlay;`bg-blend\[darken\]`background-blend-mode: darken;`bg-blend\[lighten\]`background-blend-mode: lighten;`bg-blend\[color-dodge\]`background-blend-mode: color-dodge;`bg-blend\[color-burn\]`background-blend-mode: color-burn;`bg-blend\[hard-light\]`background-blend-mode: hard-light;`bg-blend\[soft-light\]`background-blend-mode: soft-light;`bg-blend\[difference\]`background-blend-mode: difference;`bg-blend\[exclusion\]`background-blend-mode: exclusion;`bg-blend\[hue\]`background-blend-mode: hue;`bg-blend\[saturation\]`background-blend-mode: saturation;`bg-blend\[color\]`background-blend-mode: color;`bg-blend\[luminosity\]`background-blend-mode: luminosity;`bg-blend\[plus-darker\]`background-blend-mode: plus-darker;`bg-blend\[plus-lighter\]`background-blend-mode: plus-lighter;`#### mask-clip

[](#mask-clip)

ClassStyleExamplemask\[clip:border\]`mask-clip: border-box;`mask\[clip:padding\]`mask-clip: padding-box;`mask\[clip:content\]`mask-clip: content-box;`mask\[clip:fill\]`mask-clip: fill-box;`mask\[clip:stroke\]`mask-clip: stroke-box;`mask\[clip:view\]`mask-clip: view-box;`mask\[clip:no-clip\]`mask-clip: no-clip;`#### mask-composite

[](#mask-composite)

ClassStyleExamplemask\[composite:add\]`mask-composite: add;`mask\[composite:subtract\]`mask-composite: subtract;`mask\[composite:intersect\]`mask-composite: intersect;`mask\[composite:exclude\]`mask-composite: exclude;`#### mask-image

[](#mask-image)

ClassStyleExamplemask\[image:*<url>*\]`mask-image: **;`mask\[image:url(mask.png)\]mask\[image:*<var>*\]`mask-image: **;`mask\[image:--my-mask\]#### mask-mode

[](#mask-mode)

ClassStyleExamplemask\[mode:alpha\]`mask-mode: alpha;`mask\[mode:luminance\]`mask-mode: luminance;`mask\[mode:match-source\]`mask-mode: match-source;`#### mask-position

[](#mask-position)

ClassStyleExamplemask\[position:top\]`mask-position: top;`mask\[position:right\]`mask-position: right;`mask\[position:bottom\]`mask-position: bottom;`mask\[position:left\]`mask-position: left;`mask\[position:center\]`mask-position: center;`mask\[position:top-left\]`mask-position: top left;`mask\[position:top-right\]`mask-position: top right;`mask\[position:bottom-left\]`mask-position: bottom left;`mask\[position:bottom-right\]`mask-position: bottom right;`mask\[position:*<var>*\]`mask-position: **;`mask\[position:--my-position\]#### mask-repeat

[](#mask-repeat)

ClassStyleExamplemask\[repeat:repeat\]`mask-repeat: repeat;`mask\[repeat:no-repeat\]`mask-repeat: no-repeat;`mask\[repeat:space\]`mask-repeat: space;`mask\[repeat:round\]`mask-repeat: round;`mask\[repeat:x\]`mask-repeat: repeat-x;`mask\[repeat:y\]`mask-repeat: repeat-y;`#### mask-size

[](#mask-size)

ClassStyleExamplemask\[size:auto\]`mask-size: auto;`mask\[size:cover\]`mask-size: cover;`mask\[size:contain\]`mask-size: contain;`mask\[size:*<custom>*\]`mask-size: **;`mask\[size:100px\_auto\]mask\[size:*<var>*\]`mask-size: **;`mask\[size:--my-size\]#### mask-type

[](#mask-type)

ClassStyleExamplemask\[type:alpha\]`mask-type: alpha;`mask\[type:luminance\]`mask-type: luminance;`---

### Filters

[](#filters)

Filters are composable — multiple filter utilities can be combined on the same element. Each utility sets a CSS custom property and the combined `filter` property is updated automatically.

#### blur

[](#blur)

ClassStyleExampleblur\[*<px>*\]`--uc-blur: blur(**); filter: ...;`blur\[4px\]blur\[sm\]`--uc-blur: blur(var(--theme-blur-sm)); filter: ...;`blur\[md\]`--uc-blur: blur(var(--theme-blur-md)); filter: ...;`blur\[lg\]`--uc-blur: blur(var(--theme-blur-lg)); filter: ...;`blur\[*<var>*\]`--uc-blur: blur(**); filter: ...;`blur\[--my-blur\]#### brightness

[](#brightness)

ClassStyleExamplebrightness\[*<%>*\]`--uc-brightness: brightness(**); filter: ...;`brightness\[150%\]brightness\[*<var>*\]`--uc-brightness: brightness(**); filter: ...;`brightness\[--my-brightness\]#### contrast

[](#contrast)

ClassStyleExamplecontrast\[*<%>*\]`--uc-contrast: contrast(**); filter: ...;`contrast\[200%\]contrast\[*<var>*\]`--uc-contrast: contrast(**); filter: ...;`contrast\[--my-contrast\]#### grayscale

[](#grayscale)

ClassStyleExamplegrayscale\[*<%>*\]`--uc-grayscale: grayscale(**); filter: ...;`grayscale\[100%\]grayscale\[*<var>*\]`--uc-grayscale: grayscale(**); filter: ...;`grayscale\[--my-grayscale\]#### hue-rotate

[](#hue-rotate)

ClassStyleExamplehue-rotate\[*<angle>*\]`--uc-hue-rotate: hue-rotate(**); filter: ...;`hue-rotate\[180deg\]hue-rotate\[*<var>*\]`--uc-hue-rotate: hue-rotate(**); filter: ...;`hue-rotate\[--my-hue\]#### invert

[](#invert)

ClassStyleExampleinvert\[*<%>*\]`--uc-invert: invert(**); filter: ...;`invert\[100%\]invert\[*<var>*\]`--uc-invert: invert(**); filter: ...;`invert\[--my-invert\]#### saturate

[](#saturate)

ClassStyleExamplesaturate\[*<%>*\]`--uc-saturate: saturate(**); filter: ...;`saturate\[50%\]saturate\[*<var>*\]`--uc-saturate: saturate(**); filter: ...;`saturate\[--my-saturate\]#### sepia

[](#sepia)

ClassStyleExamplesepia\[*<%>*\]`--uc-sepia: sepia(**); filter: ...;`sepia\[100%\]sepia\[*<var>*\]`--uc-sepia: sepia(**); filter: ...;`sepia\[--my-sepia\]#### drop-shadow

[](#drop-shadow)

ClassStyleExampledrop-shadow\[none\]`--uc-drop-shadow: drop-shadow(0 0 #0000); filter: ...;`drop-shadow\[xs\]`--uc-drop-shadow-length: var(--theme-drop-shadow-xs); filter: ...;`drop-shadow\[sm\]`--uc-drop-shadow-length: var(--theme-drop-shadow-sm); filter: ...;`drop-shadow\[md\]`--uc-drop-shadow-length: var(--theme-drop-shadow-md); filter: ...;`drop-shadow\[lg\]`--uc-drop-shadow-length: var(--theme-drop-shadow-lg); filter: ...;`drop-shadow\[xl\]`--uc-drop-shadow-length: var(--theme-drop-shadow-xl); filter: ...;`drop-shadow\[*<var>*\]`--uc-drop-shadow-length: **; filter: ...;`drop-shadow\[--my-shadow\]drop-shadow\[color:*<hex>*\]`--uc-drop-shadow-color: **;`drop-shadow\[color:#000\]drop-shadow\[color:*<var>*\]`--uc-drop-shadow-color: **;`drop-shadow\[color:--my-color\]#### backdrop

[](#backdrop)

Backdrop filter utilities work the same as their filter counterparts but apply to `backdrop-filter` instead.

ClassStyleExamplebackdrop\[blur:*<px>*\]`--uc-blur: blur(**); backdrop-filter: ...;`backdrop\[blur:4px\]backdrop\[blur:sm\]`--uc-blur: blur(var(--theme-blur-sm)); backdrop-filter: ...;`backdrop\[brightness:*<%>*\]`--uc-brightness: brightness(**); backdrop-filter: ...;`backdrop\[brightness:150%\]backdrop\[contrast:*<%>*\]`--uc-contrast: contrast(**); backdrop-filter: ...;`backdrop\[contrast:200%\]backdrop\[grayscale:*<%>*\]`--uc-grayscale: grayscale(**); backdrop-filter: ...;`backdrop\[grayscale:100%\]backdrop\[hue-rotate:*<angle>*\]`--uc-hue-rotate: hue-rotate(**); backdrop-filter: ...;`backdrop\[hue-rotate:180deg\]backdrop\[invert:*<%>*\]`--uc-invert: invert(**); backdrop-filter: ...;`backdrop\[invert:100%\]backdrop\[saturate:*<%>*\]`--uc-saturate: saturate(**); backdrop-filter: ...;`backdrop\[saturate:50%\]backdrop\[sepia:*<%>*\]`--uc-sepia: sepia(**); backdrop-filter: ...;`backdrop\[sepia:100%\]---

### Transition

[](#transition)

#### transition

[](#transition-1)

ClassStyleExampletransition\[all\]`transition-property: all; transition-timing-function: ...; transition-duration: ...;`transition\[colors\]`transition-property: color, background-color, ...; transition-timing-function: ...; transition-duration: ...;`transition\[opacity\]`transition-property: opacity; transition-timing-function: ...; transition-duration: ...;`transition\[shadow\]`transition-property: box-shadow; transition-timing-function: ...; transition-duration: ...;`transition\[transform\]`transition-property: transform, translate, scale, rotate; transition-timing-function: ...; transition-duration: ...;`transition\[none\]`transition-property: none; transition-timing-function: ...; transition-duration: ...;`transition\[normal\]`transition-behavior: normal;`transition\[discrete\]`transition-behavior: allow-discrete;`transition\[linear\]`transition-timing-function: linear;`transition\[ease-in\]`transition-timing-function: var(--ease-in);`transition\[ease-out\]`transition-timing-function: var(--ease-out);`transition\[ease-in-out\]`transition-timing-function: var(--ease-in-out);`transition\[duration:*<time>*\]`transition-duration: **;`transition\[duration:300ms\]transition\[duration:*<number>*\]`transition-duration: **ms;`transition\[duration:300\]transition\[duration:initial\]`transition-duration: initial;`transition\[delay:*<time>*\]`transition-delay: **;`transition\[delay:100ms\]transition\[delay:*<number>*\]`transition-delay: **ms;`transition\[delay:100\]transition\[timing:initial\]`transition-timing-function: initial;`transition\[timing:*<var>*\]`transition-timing-function: **;`transition\[timing:--my-timing\]transition\[timing:*<custom>*\]`transition-timing-function: **;`transition\[timing:cubic-bezier(0.4,0,0.2,1)\]#### animation

[](#animation)

ClassStyleExampleanimate\[none\]`animation: none;`animate\[spin\]`animation: var(--animate-spin);`registers `@keyframes spin`animate\[ping\]`animation: var(--animate-ping);`registers `@keyframes ping`animate\[pulse\]`animation: var(--animate-pulse);`registers `@keyframes pulse`animate\[bounce\]`animation: var(--animate-bounce);`registers `@keyframes bounce`animate\[*<var>*\]`animation: **;`animate\[--my-animation\]animate\[*<custom>*\]`animation: **;`animate\[spin\_1s\_linear\_infinite\]---

### Transform

[](#transform)

#### backface-visibility

[](#backface-visibility)

ClassStyleExamplebackface\[hidden\]`backface-visibility: hidden;`backface\[visible\]`backface-visibility: visible;`#### perspective

[](#perspective)

ClassStyleExampleperspective\[none\]`perspective: none;`perspective\[dramatic\]`perspective: var(--perspective-dramatic);`(100px)perspective\[near\]`perspective: var(--perspective-near);`(300px)perspective\[normal\]`perspective: var(--perspective-normal);`(500px)perspective\[midrange\]`perspective: var(--perspective-midrange);`(800px)perspective\[distant\]`perspective: var(--perspective-distant);`(1200px)perspective\[*<px>*\]`perspective: **;`perspective\[500px\]perspective\[*<var>*\]`perspective: **;`perspective\[--my-perspective\]perspective\[origin:center\]`perspective-origin: center;`perspective\[origin:top\]`perspective-origin: top;`perspective\[origin:right\]`perspective-origin: right;`perspective\[origin:bottom\]`perspective-origin: bottom;`perspective\[origin:left\]`perspective-origin: left;`perspective\[origin:top-right\]`perspective-origin: top right;`perspective\[origin:top-left\]`perspective-origin: top left;`perspective\[origin:bottom-right\]`perspective-origin: bottom right;`perspective\[origin:bottom-left\]`perspective-origin: bottom left;`perspective\[origin:*<var>*\]`perspective-origin: **;`perspective\[origin:--my-origin\]perspective\[origin:*<custom>*\]`perspective-origin: **;`perspective\[origin:50%\_50%\]#### rotate

[](#rotate)

ClassStyleExamplerotate\[none\]`rotate: none;`rotate\[*<angle>*\]`rotate: **;`rotate\[45deg\]rotate\[*<number>*\]`rotate: **deg;`rotate\[45\]rotate\[*<var>*\]`rotate: **;`rotate\[--my-rotate\]rotate\[x:*<angle>*\]`--uc-rotate-x: rotateX(**); transform: ...;`rotate\[x:45deg\]rotate\[y:*<angle>*\]`--uc-rotate-y: rotateY(**); transform: ...;`rotate\[y:30deg\]rotate\[z:*<angle>*\]`--uc-rotate-z: rotateZ(**); transform: ...;`rotate\[z:90deg\]#### scale

[](#scale)

ClassStyleExamplescale\[none\]`scale: none;`scale\[*<%>*\]`scale: ** **;`scale\[150%\]scale\[*<number>*\]`scale: **% **%;`scale\[1.5\]scale\[*<var>*\]`scale: **;`scale\[--my-scale\]scale\[x:*<%>*\]`--uc-scale-x: **; scale: ...;`scale\[x:150%\]scale\[y:*<%>*\]`--uc-scale-y: **; scale: ...;`scale\[y:50%\]scale\[z:*<%>*\]`--uc-scale-z: **; scale: ...;`scale\[z:100%\]#### skew

[](#skew)

ClassStyleExampleskew\[*<angle>*\]`--uc-skew-x: skewX(**); --uc-skew-y: skewY(**); transform: ...;`skew\[10deg\]skew\[*<number>*\]`--uc-skew-x: skewX(**deg); --uc-skew-y: skewY(**deg); transform: ...;`skew\[10\]skew\[*<var>*\]`--uc-skew-x: skewX(**); --uc-skew-y: skewY(**); transform: ...;`skew\[--my-skew\]skew\[x:*<angle>*\]`--uc-skew-x: skewX(**); transform: ...;`skew\[x:10deg\]skew\[y:*<angle>*\]`--uc-skew-y: skewY(**); transform: ...;`skew\[y:5deg\]#### transform

[](#transform-1)

ClassStyleExampletransform\[none\]`transform: none;`transform\[*<var>*\]`transform: **;`transform\[--my-transform\]transform\[*<custom>*\]`transform: **;`transform\[translateX(10px)\]transform\[origin:center\]`transform-origin: center;`transform\[origin:top\]`transform-origin: top;`transform\[origin:right\]`transform-origin: right;`transform\[origin:bottom\]`transform-origin: bottom;`transform\[origin:left\]`transform-origin: left;`transform\[origin:top-right\]`transform-origin: top right;`transform\[origin:top-left\]`transform-origin: top left;`transform\[origin:bottom-right\]`transform-origin: bottom right;`transform\[origin:bottom-left\]`transform-origin: bottom left;`transform\[origin:*<var>*\]`transform-origin: **;`transform\[origin:--my-origin\]transform\[origin:*<custom>*\]`transform-origin: **;`transform\[origin:50%\_50%\]transform\[style:flat\]`transform-origin: flat;`transform\[style:3d\]`transform-origin: reserve-3d;`#### translate

[](#translate)

ClassStyleExampletranslate\[*<dimension>*\]`translate: ** **;`translate\[10px\]translate\[full\]`translate: 100% 100%;`translate\[*<fraction>*\]`translate: ** **;`translate\[1/2\]translate\[*<var>*\]`translate: **;`translate\[--my-translate\]translate\[x:*<dimension>*\]`--uc-translate-x: **; translate: ...;`translate\[x:10px\]translate\[x:full\]`--uc-translate-x: 100%; translate: ...;`translate\[y:*<dimension>*\]`--uc-translate-y: **; translate: ...;`translate\[y:50%\]translate\[z:*<dimension>*\]`--uc-translate-z: **; translate: ...;`translate\[z:0px\]---

### Interactivity

[](#interactivity)

#### accent-color

[](#accent-color)

ClassStyleExampleaccent\[auto\]`accent-color: auto;`accent\[*<hex>*\]`accent-color: **;`accent\[#ff0000\]accent\[*<var>*\]`accent-color: **;`accent\[--my-accent\]#### appearance

[](#appearance)

ClassStyleExampleappearance\[none\]`appearance: none;`appearance\[auto\]`appearance: auto;`#### caret-color

[](#caret-color)

ClassStyleExamplecaret\[auto\]`caret-color: auto;`caret\[*<hex>*\]`caret-color: **;`caret\[#ff0000\]caret\[*<var>*\]`caret-color: **;`caret\[--my-caret\]#### color-scheme

[](#color-scheme)

ClassStyleExamplescheme\[normal\]`color-scheme: normal;`scheme\[light\]`color-scheme: light;`scheme\[dark\]`color-scheme: dark;`scheme\[light-dark\]`color-scheme: light dark;`scheme\[only-dark\]`color-scheme: only dark;`scheme\[only-light\]`color-scheme: only light;`#### cursor

[](#cursor)

ClassStyleExamplecursor\[pointer\]`cursor: pointer;`cursor\[default\]`cursor: default;`cursor\[move\]`cursor: move;`cursor\[not-allowed\]`cursor: not-allowed;`cursor\[grab\]`cursor: grab;`cursor\[grabbing\]`cursor: grabbing;`cursor\[none\]`cursor: none;`cursor\[auto\]`cursor: auto;`cursor\[*<url>*\]`cursor: **;`cursor\[url(cursor.png)\]cursor\[*<var>*\]`cursor: **;`cursor\[--my-cursor\]#### field-sizing

[](#field-sizing)

ClassStyleExamplefield-sizing\[content\]`field-sizing: content;`field-sizing\[fixed\]`field-sizing: fixed;`#### pointer-events

[](#pointer-events)

ClassStyleExamplepointer-events\[auto\]`pointer-events: auto;`pointer-events\[none\]`pointer-events: none;`#### resize

[](#resize)

ClassStyleExampleresize\[none\]`resize: none;`resize\[both\]`resize: both;`resize\[y\]`resize: vertical;`resize\[x\]`resize: horizontal;`#### scroll-behavior

[](#scroll-behavior)

ClassStyleExamplescroll\[auto\]`scroll-behavior: auto;`scroll\[smooth\]`scroll-behavior: smooth;`#### scroll-margin

[](#scroll-margin)

ClassStyleExamplescroll\[m:*<dimension>*\]`scroll-margin: **;`scroll\[m:10px\]scroll\[mx:*<dimension>*\]`scroll-margin-inline: **;`scroll\[mx:10px\]scroll\[my:*<dimension>*\]`scroll-margin-block: **;`scroll\[my:10px\]scroll\[ms:*<dimension>*\]`scroll-margin-inline-start: **;`scroll\[ms:10px\]scroll\[me:*<dimension>*\]`scroll-margin-inline-end: **;`scroll\[me:10px\]scroll\[mt:*<dimension>*\]`scroll-margin-top: **;`scroll\[mt:10px\]scroll\[mr:*<dimension>*\]`scroll-margin-right: **;`scroll\[mr:10px\]scroll\[mb:*<dimension>*\]`scroll-margin-bottom: **;`scroll\[mb:10px\]scroll\[ml:*<dimension>*\]`scroll-margin-left: **;`scroll\[ml:10px\]#### scroll-padding

[](#scroll-padding)

ClassStyleExamplescroll\[p:*<dimension>*\]`scroll-padding: **;`scroll\[p:10px\]scroll\[px:*<dimension>*\]`scroll-padding-inline: **;`scroll\[px:10px\]scroll\[py:*<dimension>*\]`scroll-padding-block: **;`scroll\[py:10px\]scroll\[ps:*<dimension>*\]`scroll-padding-inline-start: **;`scroll\[ps:10px\]scroll\[pe:*<dimension>*\]`scroll-padding-inline-end: **;`scroll\[pe:10px\]scroll\[pt:*<dimension>*\]`scroll-padding-top: **;`scroll\[pt:10px\]scroll\[pr:*<dimension>*\]`scroll-padding-right: **;`scroll\[pr:10px\]scroll\[pb:*<dimension>*\]`scroll-padding-bottom: **;`scroll\[pb:10px\]scroll\[pl:*<dimension>*\]`scroll-padding-left: **;`scroll\[pl:10px\]#### scroll-snap

[](#scroll-snap)

ClassStyleExamplesnap\[x\]`scroll-snap-type: x var(--uc-scroll-snap-strictness);`snap\[y\]`scroll-snap-type: y var(--uc-scroll-snap-strictness);`snap\[both\]`scroll-snap-type: both var(--uc-scroll-snap-strictness);`snap\[none\]`scroll-snap-type: none;`snap\[mandatory\]`--uc-scroll-snap-strictness: mandatory;`snap\[proximity\]`--uc-scroll-snap-strictness: proximity;`snap\[align:start\]`scroll-snap-align: start;`snap\[align:end\]`scroll-snap-align: end;`snap\[align:center\]`scroll-snap-align: center;`snap\[align:none\]`scroll-snap-align: none;`snap\[stop:normal\]`scroll-snap-stop: normal;`snap\[stop:always\]`scroll-snap-stop: always;`snap\[type:none\]`scroll-snap-type: none;`snap\[type:mandatory\]`scroll-snap-type: mandatory;`snap\[type:proximity\]`scroll-snap-type: proximity;`snap\[type:x\]`scroll-snap-type: x var(--uc-scroll-snap-strictness);`snap\[type:y\]`scroll-snap-type: y var(--uc-scroll-snap-strictness);`snap\[type:both\]`scroll-snap-type: both var(--uc-scroll-snap-strictness);`#### touch-action

[](#touch-action)

ClassStyleExampletouch\[auto\]`touch-action: auto;`touch\[none\]`touch-action: none;`touch\[pan-x\]`touch-action: pan-x;`touch\[pan-y\]`touch-action: pan-y;`touch\[pan-left\]`touch-action: pan-left;`touch\[pan-right\]`touch-action: pan-right;`touch\[pan-up\]`touch-action: pan-up;`touch\[pan-down\]`touch-action: pan-down;`touch\[pinch-zoom\]`touch-action: pinch-zoom;`touch\[manipulation\]`touch-action: manipulation;`#### user-select

[](#user-select)

ClassStyleExampleselect\[none\]`user-select: none;`select\[text\]`user-select: text;`select\[all\]`user-select: all;`select\[auto\]`user-select: auto;`#### will-change

[](#will-change)

ClassStyleExamplewill-change\[auto\]`will-change: auto;`will-change\[transform\]`will-change: transform;`will-change\[contents\]`will-change: contents;`will-change\[scroll\]`will-change: scroll-position;`will-change\[inherit\]`will-change: inherit;`will-change\[initial\]`will-change: initial;`will-change\[revert\]`will-change: revert;`will-change\[revert-layer\]`will-change: revert-layer;`will-change\[unset\]`will-change: unset;`will-change\[*<var>*\]`will-change: **;`will-change\[--my-change\]will-change\[*<custom>*\]`will-change: **;`will-change\[opacity,transform\]---

### SVG

[](#svg)

#### fill

[](#fill)

ClassStyleExamplefill\[none\]`fill: none;`fill\[transparent\]`fill: transparent;`fill\[current\]`fill: currentColor;`fill\[*<hex>*\]`fill: **;`fill\[#ff0000\]fill\[*<var>*\]`fill: **;`fill\[--my-fill\]#### stroke

[](#stroke)

ClassStyleExamplestroke\[none\]`stroke: none;`stroke\[transparent\]`stroke: transparent;`stroke\[current\]`stroke: currentColor;`stroke\[*<hex>*\]`stroke: **;`stroke\[#ff0000\]stroke\[*<var>*\]`stroke: **;`stroke\[--my-stroke\]stroke\[width:*<number>*\]`stroke-width: **;`stroke\[width:2\]stroke\[width:0\]`stroke-width: 0;`---

### Accessibility

[](#accessibility)

#### forced-color-adjust

[](#forced-color-adjust)

ClassStyleExampleforced-color-adjust\[auto\]`forced-color-adjust: auto;`forced-color-adjust\[none\]`forced-color-adjust: none;`

###  Health Score

37

—

LowBetter than 83% of packages

Maintenance100

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

0d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/ade73108a50285c69498c010ae11da6afc1e1c0bbb7f58e801a8044cc5dc47f7?d=identicon)[chris-raow](/maintainers/chris-raow)

---

Top Contributors

[![ChrisRAoW](https://avatars.githubusercontent.com/u/1393964?v=4)](https://github.com/ChrisRAoW "ChrisRAoW (1 commits)")

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Code StylePHP CS Fixer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/vollegrond-rootstock/health.svg)

```
[![Health](https://phpackages.com/badges/vollegrond-rootstock/health.svg)](https://phpackages.com/packages/vollegrond-rootstock)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)