Attributify Mode

See attributify for setup instructions.

Syntax

(variant[:-]{1})*key? = "((variant:)*value)*"

Examples

sm = "bg-blue-200 hover:bg-blue-300"
sm:hover = "bg-blue-200 dark:bg-blue-300"
sm-hover = "bg-blue-200 dark:bg-blue-300"

p = "x-4 y-2 md:y-3"
md:bg = "blue-300 dark:blue-400"
md-bg = "blue-300 dark:blue-400"

Utilities

Font

font = "sans italic leading-3"

valuesproperty
sans, serif, monofont-family
italic, not-italicfont-style
thin, extralight, light, normal, medium, semibold, bold, extrabold, blackfont-weight
antialiased, subpixel-antialiasedfont-smoothing
normal-nums, ordinal, slashed-zero, lining-nums, oldstyle-nums, proportional-nums...font-variant-numeric
tracking-tighter,tracking-tight, tracking-normal, ..., tracking-widestletter-spacing
leading-none, leading-tight, leading-normal, ..., 0, 1, 2, 3, ...line-height

Text

text = "sm gray-900 underline truncate"

valuesproperty
xs, sm, ..., lgfont-size
left, center, right, justifytext-align
baseline, top, middle, bottom, text-top, text-bottomvertical-align
blue-500, gray-700, ...color
opacity-40, ... opacity-90opacity
underline, line-through, no-underlinetext-decoration
underline-green-500, underline-opacity-50, underline-auto, underline-2, underline-offset-autotext-decoration
tab, tab-0, tab-2, tab-4tab-size
indent, indent-xs, indent-sm, indent-mdtext-indent
uppercase, lowercase, capitalize, normal-casetext-transform
stroke, stroke-none, stroke-sm, ...text-stroke-width
stroke-transparent, stroke-blue-500, stroke-gray-500, ...text-stroke-color
shadow, shadow-sm, shadow-md, shadow-lg, ...text-stroke-shadow
truncate, overflow-ellipsis, overflow-cliptext-overflow
space-normal, space-nowrap, space-pre, space-pre-line, space-pre-wrapwhite-space
break-normal, break-words, break-allword-break
write-normal, write-vertical-right, write-vertical-leftwriting-mode
write-orient-mixed, write-orient-upright, write-orient-sidewayswriting-orientation
hyphens-none, hyphens-manual, hyphens-autohyphens
placeholder-blue-500, placeholder-gray-700, ...placeholder-color
placeholder-opacity-50, placeholder-opacity-90, ...placeholder-opacity

You can also use placeholder = "blue-500 opacity-50", but usually it conflicts with the placeholder attribute of the input element, so it is better to put it in text, and it also makes sense.

Underline

underline = "~ green-500 opacity-50 2 offset-2"

valuesproperty
~ line-through nonetext-decoration
green-500, current ...text-decoration-color
opacity-50, opacity-60 ...text-decoration-opacity
auto, 0, 1, 2, 3, 4 ...text-decoration-thickness
offset-auto, offset-1, offset-2, ...text-decoration-offset

List

list = "disc inside"

valuesproperty
none, disc, decimallist-style-type
inside, outsidelist-style-position

Background

bg = "gray-100 opacity-90"

valuesproperty
fixed, local, scrollbackground-attachment
bottom, center, left, bottom, ...background-position
black, white, ...background-color
opacity-50, ...background-opacity
repeat, no-repeat, repeat-x, ...background-repeat
auto, cover, containbackground-size
clip-border, clip-padding, clip-content, ...background-clip
origin-border, origin-padding, origin-contentbackground-origin
blend-normal, blend-overlay, blend-darken, ...background-blend-mode
nonebackground-image

Gradient

gradient = "to-r from-yellow-400 via-red-500 to-pink-500"

valuesproperty
none, to-t, to-r, to-br, ...background-image
from-yellow-400, ...from-color
via-red-500, ...via-color
to-pink-500, ...to-color

Border

border = "~ rounded dashed gray-400 opacity-80"

~ represents border itself, which means border-DEFAULT

valuesproperty
~, 1, 2, t-0, ...border(-top/left/bottom/right)?-width
rounded-none, rounded-sm, rounded-b-sm, ...border-radius
solid, dashed, dotted, double, noneborder-style
collapse, separateborder-collapse
gray-500, ...border-color
opacity-50, ...border-opacity

Divide

divide = "y dashed gray-800 opacity-90"

valuesproperty
y, x, y-reverse, x-reverse, y-2, ...divide-width
solid, dashed, dotted, double, nonedivide-style
gray-500, ...divide-color
opacity-90, ...divide-opacity

Ring

ring = "2 gray-200 opacity-50 offset-1 offset-gray-400"

valuesproperty
~, inset, 0, 1, 2, ...ring-width
gray-200, ...ring-color
opacity-50, ...ring-opacity
offset-4, ...ring-offset-width
offset-gray-200, ...ring-offset-color

Icon

icon = "fill-gray-200 stroke-blue-400 stroke-2"

valuesproperty
fill-current, fill-gray-200, ...fill
stroke-current, stroke-gray-400, ...stroke
stroke-2, stroke-4, ...stroke-width
stroke-dash-2 , stroke-dash-4, ...stroke-dasharray
stroke-offset-2, stroke-offset-4, ...stroke-dashoffset
stroke-cap-auto , stroke-cap-square..stroke-line-cap
stroke-join-auto, stroke-join-auto...stroke-line-join

You can also use stroke = "2 gray-400" or fill = "gray-200", but usually it conflicts with the fill/stroke attribute of the svg element, so it is better to put it in svg.


Container

container = "~"

container is just a single utility, you can also write it in the class attr.

valuesproperty
~width/max-width

Padding

p = "x-2 y-4 md:4"

valuesproperty
0, px, 1, 2, 4...padding
y-0, y-px, y-1, y-2, y-4...padding-top, padding-bottom
x-0, x-px, x-1, x-2, x-4...padding-left, padding-right
t-0, t-px, t-1, t-2, t-4...padding-top
l-0, l-px, l-1, l-2, l-4...padding-left
b-0, b-px, b-1, b-2, b-4...padding-bottom
r-0, r-px, r-1, r-2, r-4...padding-right

Margin

m = "x-2 y-4 md:4"

valuesproperty
0, px, 1, 2, 4...margin
y-0, y-px, y-1, y-2, y-4...margin-top, margin-bottom
x-0, x-px, x-1, x-2, x-4...margin-left, margin-right
t-0, t-px, t-1, t-2, t-4...margin-top
l-0, l-px, l-1, l-2, l-4...margin-left
b-0, b-px, b-1, b-2, b-4...margin-bottom
r-0, r-px, r-1, r-2, r-4...margin-right

Space

space = "x-2 -y-4 y-reverse"

valuesproperty
x-4, -x-4, ...space-x
x-reversespace-x-reverse
y-2, -y-2, ...space-y
y-reversespace-y-reverse

Width

w = "2xl md:screen"

valuesproperty
0, auto, px, full, sm, md, screen-sm, ...width

Min-Width

min-w = "2xl md:screen"

valuesproperty
0, px, full, sm, md, screen-sm, ...min-width

Max-Width

max-w = "2xl md:screen"

valuesproperty
0, px, full, sm, md, screen-sm, ...max-width

Height

h = "screen"

valuesproperty
0, auto, px, full, sm, md, screen-sm, ...height

Min-Height

min-h = "screen"

valuesproperty
0, px, full, sm, md, screen-sm, ...min-height

Max-Height

max-h = "screen"

valuesproperty
0, px, full, sm, md, screen-sm, ...max-height

Flex

flex = "md:~ col wrap"

valuesproperty
~, inlinedisplay
row, row-reverse, col, col-reverseflex-direction
wrap, wrap-reverse, nowrapflex-wrap
1, auto, initial, noneflex
grow, grow-0flex-grow
shrink, shrink-0flex-shrink

Grid

grid = "~ cols-1 lg:cols-3 gap-4"

valuesproperty
~, inlinedisplay
cols-1, cols-3, cols-none, ...grid-template-columns
col-auto, col-span2, ...grid-column
rows-1, rows-3, rows-none, ...grid-template-rows
flow-row, flow-col, flow-row-dense, flow-col-densegrid-auto-flow
auto-cols-auto, auto-cols-min, auto-cols-max, ...grid-auto-columns
auto-rows-auto, auto-rows-min, auto-rows-max, ...grid-auto-rows
gap-2, gap-x-4, gap-y-2, ...gap/column-gap/row-gap

Table

table = "inline column"

valuesproperty
~, inline, caption, cell, column, column-group, footer-group, header-group, row-group, rowdisplay
auto, fixedtable-layout
caption-top, caption-bottomcaption-side
empty-cells-visible, empty-cells-hiddenempty-cells

Order

order = "first lg:last"

valuesproperty
1, 2, first, last, ...order

Align

align = "start md:end"

valuesproperty
(content-)center, (content-)start, (content-)end, (content-)between, (content-)around, (content-)evenlyalign-content
items-start, items-end, items-center, items-baseline, items-stretchalign-items
self-auto, self-start, self-end, self-center, self-stretchalign-self

Justify

justify = "start md:between"

valuesproperty
(content-)center, (content-)start, (content-)end, (content-)between, (content-)around, (content-)evenlyjustify-content
items-start, items-end, items-center, items-baseline, items-stretchjustify-items
self-auto, self-start, self-end, self-center, self-stretchjustify-self

Place

place = "start md:center"

valuesproperty
(content-)center, (content-)start, (content-)end, (content-)between, (content-)around, (content-)evenly, (content-)stretchplace-content
items-start, items-end, items-center, items-stretchplace-items
self-auto, self-start, self-end, self-center, self-stretchplace-self

Display

display = "block md:hidden"

valuesproperty
inline, flow-root, contents, list-item, hidden, block, inline-blockdisplay
visible, invisiblevisibility
backface-visible, backface-hiddenbackface-visibility

Position

pos = "fixed top-0 left-4"

valuesproperty
static, fixed, absolute, relative, stickyposition
inset-1, -inset-1, -inset-x-1, -inset-y-2, inset-y-autoinset
top-0, left-0, bottom-0, right-0, ...top/right/bottom/left
float-right, float-left, float-nonefloat
clear-left, clear-right, clear-both, clear-noneclear
isolate, isolation-autoisolation

Box

box = "decoration-slice content"

valuesproperty
decoration-slice, decoration-clonebox-decoration-break
border, contentbox-sizing

Caret

caret = "gray-500 opacity-50"

valuesproperty
gray-500 transparent ...caret-color
opacity-0, opacity-50, ...caret-opacity

Isolation

isolation = "isolate md:auto"

valuesproperty
isolate, autoisolation

Object

object = "none center"

valuesproperty
contain, cover, fill, none, scale-downobject-fit
bottom, center, left, left-bottom, left-top, right, ...object-position

Overflow

overflow = "auto md:scroll"

valuesproperty
auto, hidden, visible, scrolloverflow
x-auto, x-hidden, x-visible, x-scrolloverflow-x
y-auto, y-hidden, y-visible, y-scrolloverflow-y

OverScroll

overscroll = "auto md:contain"

valuesproperty
auto, contain, noneoverscroll-behavior
x-auto, x-contain, x-noneoverscroll-behavior-x
y-auto, y-contain, y-noneoverscroll-behavior-y

ZIndex

z = "0 md:50"

valuesproperty
auto, 0, 10, 20, 50, ...z-index

Shadow

shadow = "md gray-200"

valuesproperty
sm, ~, md, lg, xl, 2xl, inner, nonebox-shadow
gray-200, ...shadow-color

Opacity

opacity = "100 md:50"

valuesproperty
0, 5, 10, 20, ...opacity

Blend

blend = "darken md:hard-light"

valuesproperty
normal, multiply, screen, overlay, darken, ...mix-blend-mode

Filter

filter = "~ blur-sm brightness-125"

valuesproperty
~, nonefilter
blur-0, blur-sm, blur, blur-md, ...blur
brightness-0, brightness-50, brightness-75, ...brightness
contrast-0, contrast-50, contrast-75, ...contrast
drop-shadow-sm, drop-shadow, drop-shadow-md, ...drop-shadow
grayscale-0, grayscalegrayscale
-hue-rotate-180, -hue-rotate-90, ..., hue-rotate-90, hue-rotate-180hue-rotate
invert-0, invertinvert
saturate-0, saturate-50, saturate-100, ...saturate
sepia-0, sepiasepia

Backdrop Filter

backdrop = "~ blur-sm brightness-125"

valuesproperty
~, nonebackdrop-filter
blur-0, blur-sm, blur, blur-md, ...blur
brightness-0, brightness-50, brightness-75, ...brightness
contrast-0, contrast-50, contrast-75, ...contrast
grayscale-0, grayscalegrayscale
-hue-rotate-180, -hue-rotate-90, ..., hue-rotate-90, hue-rotate-180hue-rotate
invert-0, invertinvert
opacity-0, opacity-5, ... opacity-95opacity
saturate-0, saturate-50, saturate-100, ...saturate
sepia-0, sepiasepia

Transition

transition = "~ duration-500 ease-in-out"

valuesproperty
~, none, all, colors, opacity, shadow, transformtransition-property
duration-75, duration-100, duration-150, ...transition-duration
ease-linear, ease-in, ease-out, ease-in-outtransition-timing-function
delay-75, delay-100, delay-150, ...transition-delay

Animate

animate = "spin"

valuesproperty
none, spin, ping, pulse, bounceanimation

Transform

transform = "~ rotate-45 lg:none"

valuesproperty
~, gpu, nonetransform
preserve-flat, preserve-3dtransform-style
perspect-lg, perspect-none, ...perspective
perspect-origin-center, perspect-origin-topperspective-origin
origin-center, origin-top, origin-top-right, ...transform-origin
scale-0, scale-50, scale-75, ...scale
scale-x-60, scale-y-30, scale-z-45scale-x/y/z
rotate-50, -rotate-50, ...rotate
rotate-x-30, rotate-y-45, rotate-z-90rotate-x/y/z
translate-x-2, -translate-x-4, translate-y-40, -translate-y-40, translate-z-12translate-x/y/z
skew-x-2, -skew-x-4, skew-y-2, -skew-y-2skew-x/skew-y

Appearance

appearance = "none"

valuesproperty
noneappearance

Cursor

cursor = "pointer"

valuesproperty
auto, default, pointer, wait, text, move, help, not-allowedcursor

Outline

outline = "none"

valuesproperty
none, white, blackoutline

Pointer Events

pointer = "none"

valuesproperty
none, autopointer-events

Resize

resize = "~"

valuesproperty
~, x, y, noneresize

User Select

select = "none"

valuesproperty
none, text, all, autouser-select

Screen Reader

sr = "only"

valuesproperty
only, not-onlyscreen-reader

Special cases

grid table flex ring shadow border filter backdrop transition transform resize

These classes are special cases, you cannot write empty attribute values (flex=""). You can write default or ~ instead (flex="~" or flex="default").

Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.