Foundations

Utilities

Tailwind CSS utilities with Tailwind CSS's names and values: layout, spacing, sizing, text, color, borders, position and more.

How utilities work

Utilities are Tailwind CSS’s classes with Tailwind CSS’s values, such as flex, p-4 or md:grid-cols-2, with plf: in front in Prefixed CSS (plf:flex). Pelatform UI has no utilities of its own. Like components, utilities apply only inside a data-plf-root element, and they win over every component style, so font-bold makes a Button bold.

The package ships the families below, each complete. A class outside them, such as bg-red-500 or group-hover:underline, does nothing; for those, use your own Tailwind CSS beside the library.

Values read the tokens, so root, theme and element overrides reach them: a spacing step is --plf-spacing (0.25rem) times its number, and font sizes, radii and shadows hold Tailwind CSS’s values. Semantic colors take daisyUI’s names, since Tailwind CSS has none. The live examples show spacing from gap, as with Preflight; without it, paragraphs and headings keep the browser’s margins.

To hide any element, including a component, use the native hidden attribute or hidden. The native attribute wins over every utility, including md:flex.

Breakpoints

A breakpoint form, {breakpoint}:{name}, applies from that breakpoint’s minimum width up; the widths are Tailwind CSS’s and are listed in Layout. Combine it with a base utility for smaller screens: this navigation is hidden on small screens and becomes a flex row from md.

HTML

<nav class="hidden md:flex gap-4" aria-label="Sections">…</nav>

Breakpoint forms exist at sm, md, lg, xl and 2xl for the rows marked in the tables below.

Display

Set the display of an element. container takes the active breakpoint’s width as its maximum; center and pad it with mx-auto px-4.

Class	Effect	Breakpoints
`{block,inline-block,inline,flex,inline-flex,grid,inline-grid,contents,flow-root}`	`display` with that value	Yes
`hidden`	`display: none`	Yes
`{visible,invisible}`	`visibility`	No
`container`	`width: 100%`; from each breakpoint, that breakpoint's width as `max-width`	No

Flex and grid

Lay out rows, columns and grids; Layout shows page layouts with them.

Class	Effect	Breakpoints
`flex-{row,row-reverse,col,col-reverse}`	`flex-direction`	Yes
`flex-{wrap,nowrap,wrap-reverse}`	`flex-wrap`	Yes
`flex-{1,auto,initial,none}`	`flex`: grow, shrink and basis	No
`{grow,grow-0,shrink,shrink-0}`	`flex-grow` or `flex-shrink`	No
`grid-cols-{1–12}`	`grid-template-columns: repeat(n, minmax(0, 1fr))`	Yes
`grid-cols-none`	`grid-template-columns: none`	Yes
`col-span-{1–12}`	`grid-column: span n / span n`	Yes
`col-span-full`	`grid-column: 1 / -1`	Yes
`grid-rows-{1–6}`	`grid-template-rows: repeat(n, minmax(0, 1fr))`	Yes
`grid-rows-none`	`grid-template-rows: none`	Yes
`row-span-{1–6}`	`grid-row: span n / span n`	Yes
`row-span-full`	`grid-row: 1 / -1`	Yes
`items-{start,end,center,baseline,stretch}`	`align-items`	Yes
`justify-{start,end,center,between,around,evenly,stretch,normal}`	`justify-content`	Yes
`content-{start,end,center,between,around,evenly,stretch}`	`align-content`	Yes
`self-{auto,start,end,center,stretch,baseline}`	`align-self`	Yes
`order-{first,last,none,1,2,3}`	`order`	Yes
`place-items-{start,end,center,stretch}`	`place-items`	No
`place-content-{start,end,center,between,around,evenly,stretch}`	`place-content`	No
`place-self-{auto,start,end,center,stretch}`	`place-self`	No

Spacing

Padding, margin and gaps on Tailwind CSS’s spacing scale. x is the inline axis and y the block axis. ps, pe, ms and me follow the reading direction, so use them rather than pl, pr, ml and mr on pages that may be right to left.

A step is --plf-spacing, 0.25rem, times its number; the steps run from 0 to 96, as Tailwind CSS’s do (0.5 to 3.5 by halves, 4 to 12, then 14, 16, 20 to 64 by fours, 72, 80 and 96). Widths and heights use the same steps.

Step	Size
`1`	0.25rem, 4px
`2`	0.5rem, 8px
`3`	0.75rem, 12px
`4`	1rem, 16px
`5`	1.25rem, 20px
`6`	1.5rem, 24px
`8`	2rem, 32px
`10`	2.5rem, 40px
`12`	3rem, 48px
`16`	4rem, 64px

The pixels are at a 16px root.

Class	Effect	Breakpoints
`{p,px,py,pt,pr,pb,pl}-{0–12}`	`padding: calc(var(--plf-spacing) * n)` on every side, inline, block or one physical side	Yes
`{ps,pe}-{0–12}`	`padding-inline-start` or `-end`, following the reading direction	Yes
`{p,px,py,pt,pr,pb,pl,ps,pe}-{px,0.5,1.5,2.5,3.5,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96}`	Padding on the rest of the scale (`px` is 1px)	No
`{gap,gap-x,gap-y}-{0–12}`	`gap` on both axes, columns or rows	Yes
`{gap,gap-x,gap-y}-{px,0.5,1.5,2.5,3.5,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96}`	Gaps on the rest of the scale	No
`{m,mx,my,mt,mr,mb,ml}-{{0–12},px,0.5,1.5,2.5,3.5,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96}`	`margin`, sides as for padding	No
`{ms,me}-{{0–12},px,0.5,1.5,2.5,3.5,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96}`	`margin-inline-start` or `-end`, following the reading direction	No
`{m,mx,my,mt,mr,mb,ml,ms,me}-auto`	`margin: auto`	No
`{space-x,space-y}-{{0–12},px,0.5,1.5,2.5,3.5,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96}`	Space between children of a row or column	No

Sizing

Widths and heights on the spacing scale, as fractions or as keywords; size-* sets both at once, as an icon or an avatar takes. A block button uses w-full. A layout as tall as the screen takes h-dvh, which follows a phone browser’s toolbars, where h-screen can end behind them.

Class	Effect	Breakpoints
`{w,h,size,min-w,min-h,max-h}-{{0–12},px,0.5,1.5,2.5,3.5,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96}`	Width, height or both on the spacing scale	No
`{w,h,size,min-w,min-h,max-h}-{1/2,1/3,2/3,1/4,3/4,full}`	A percentage of the parent	No
`{w,h,size,min-w,min-h,max-h}-{fit,min,max}`	`fit-content`, `min-content` or `max-content`	No
`{w,h,size,min-w,min-h}-auto`	`auto`	No
`{w,h,min-w,min-h,max-h}-screen`	The viewport's width or height	No
`max-h-none`	`max-height: none`	No
`{w,h,size,min-w,min-h,max-w,max-h}-{svw,lvw,dvw,svh,lvh,dvh}`	The small, large or dynamic viewport's width (`vw`) or height (`vh`)	No
`max-w-{3xs,2xs,xs,sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl}`	`max-width`: 16rem (3xs) to 80rem (7xl)	No
`max-w-{full,none,screen}`	`max-width: 100%`, `none` or the viewport's width	No

Text

Size, weight, line height, letter spacing, alignment, decoration and wrapping.

Start-aligned text.

Centered text.

End-aligned text.

A long sentence that does not fit on one line ends with an ellipsis instead of wrapping onto the next line, however wide the screen is.

<p class="text-start">Start-aligned text.</p>
<p class="text-center">Centered text.</p>
<p class="text-end">End-aligned text.</p>
<p class="truncate">A long sentence that does not fit on one line ends with an ellipsis instead of wrapping onto the next line, however wide the screen is.</p>

<p class="plf:text-start">Start-aligned text.</p>
<p class="plf:text-center">Centered text.</p>
<p class="plf:text-end">End-aligned text.</p>
<p class="plf:truncate">A long sentence that does not fit on one line ends with an ellipsis instead of wrapping onto the next line, however wide the screen is.</p>

Small text.

Large semibold text.

Heading-sized bold text.

<p class="text-sm">Small text.</p>
<p class="text-lg font-semibold">Large semibold text.</p>
<p class="text-2xl font-bold">Heading-sized bold text.</p>

<p class="plf:text-sm">Small text.</p>
<p class="plf:text-lg plf:font-semibold">Large semibold text.</p>
<p class="plf:text-2xl plf:font-bold">Heading-sized bold text.</p>

Class	Effect	Breakpoints
`text-{start,center,end,left,right,justify}`	`text-align`; `start` and `end` follow the reading direction	Yes
`text-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl,9xl}`	`font-size`, 0.75rem to 8rem, with Tailwind CSS's line heights	Yes
`font-{thin,extralight,light,normal,medium,semibold,bold,extrabold,black}`	`font-weight`, 100 to 900	No
`leading-{none,tight,snug,normal,relaxed,loose}`	`line-height`	No
`tracking-{tighter,tight,normal,wide,wider,widest}`	`letter-spacing`	No
`{italic,not-italic}`	`font-style`	No
`{underline,no-underline,line-through}`	`text-decoration-line`	No
`hover:{underline,no-underline}`	The same on hover	No
`{uppercase,lowercase,capitalize,normal-case}`	`text-transform`	No
`text-{wrap,nowrap,balance,pretty}`	`text-wrap`	No
`break-{words,all,normal}`	Where long words break	No
`whitespace-{normal,nowrap,pre,pre-line,pre-wrap,break-spaces}`	`white-space`	No
`truncate`	One line, cut with an ellipsis	No
`line-clamp-{{1–6},none}`	At most n lines, cut with an ellipsis	No

Color

Color	Use
`base-100` to `base-300`	Surfaces
`base-content`	Text
`primary`, `success`, `warning`, `error`, `info`	Accent and status colors
`primary-content`, `success-content`, `warning-content`, `error-content`, `info-content`	Text on that color

They follow the root’s theme. text-base-content/70 is muted text with at least 4.5:1 contrast on every surface.

Muted supporting text.

An error message.

A raised panel.

<p class="text-base-content/70">Muted supporting text.</p>
<p class="text-error">An error message.</p>
<p class="bg-base-200 border border-base-300 rounded-lg p-4">A raised panel.</p>

<p class="plf:text-base-content/70">Muted supporting text.</p>
<p class="plf:text-error">An error message.</p>
<p class="plf:bg-base-200 plf:border plf:border-base-300 plf:rounded-lg plf:p-4">A raised panel.</p>

Class	Effect	Breakpoints
`{text,bg,border}-{base-100,base-200,base-300,base-content,primary,primary-content,success,success-content,warning,warning-content,error,error-content,info,info-content}`	The color, following the root's theme	No
`{text,bg,border}-{base-100,base-200,base-300,base-content,primary,primary-content,success,success-content,warning,warning-content,error,error-content,info,info-content}/{10,50,70}`	The color at 10%, 50% or 70% opacity	No
`{hover,focus-visible}:{text,bg,border}-{base-100,base-200,base-300,base-content,primary,primary-content,success,success-content,warning,warning-content,error,error-content,info,info-content}`	The color on hover or keyboard focus	No
`{text,bg,border}-{transparent,current,inherit}`	`transparent`, `currentColor` or `inherit`	No

Borders and effects

Borders, radius, shadow and opacity.

Class	Effect	Breakpoints
`{border,border-x,border-y,border-t,border-r,border-b,border-l,border-s,border-e}{,-0,-2,-4}`	`border-width`: 1px, 0, 2px or 4px on every side, an axis or one side	No
`border-{solid,dashed,dotted,none}`	`border-style`	No
`{rounded,rounded-{none,xs,sm,md,lg,xl,2xl,3xl,4xl,full}}`	`border-radius`, 0.125rem (xs) to 2rem (4xl); `rounded` is `sm`	No
`rounded-{t,r,b,l,s,e}{,-none,-sm,-md,-lg,-xl,-full}`	The radius of one side's corners	No
`{shadow,shadow-{none,2xs,xs,sm,md,lg,xl,2xl}}`	`box-shadow`; `shadow` is `sm`	No
`opacity-{0,5,10,20,25,30,40,50,60,70,75,80,90,95,100}`	`opacity`	No
`hover:{shadow,shadow-{none,2xs,xs,sm,md,lg,xl,2xl},opacity-{0,5,10,20,25,30,40,50,60,70,75,80,90,95,100}}`	The shadow or opacity on hover	No

Position

Under a sticky header, set --plf-sticky-offset on the root to the header’s height. sticky top-(--plf-sticky-offset) then stops an element below the header, z-(--plf-z-index-sticky) stacks a sticky header above the content, and scroll-mt-(--plf-scroll-offset) makes a link target stop 1rem below it; headings with an id inside prose stop right below it on their own. Sticky and skip links shows a page layout.

An element sticks inside its nearest scroll container. An ancestor with overflow other than visible becomes that container.

Class	Effect	Breakpoints
`{static,relative,absolute,fixed,sticky}`	`position`	Yes
`top-(--plf-sticky-offset)`	`top: var(--plf-sticky-offset)`, below a sticky header	Yes
`z-(--plf-z-index-sticky)`	`z-index: var(--plf-z-index-sticky)`, above the content	Yes
`{inset,inset-x,inset-y,top,right,bottom,left,start,end}-{0,px,0.5,1,2,4,auto,full,1/2}`	Offsets of a positioned element; `start` and `end` follow the reading direction	No
`z-{0,10,20,30,40,50,auto}`	`z-index`	No
`scroll-mt-(--plf-scroll-offset)`	A link target stops below a sticky header	No

Overflow

Clip or scroll content that does not fit.

Class	Effect	Breakpoints
`overflow-{auto,hidden,clip,visible,scroll}`	`overflow`	No
`overflow-{x,y}-{auto,hidden,clip,visible,scroll}`	`overflow-x` or `overflow-y`	No

Media and interaction

Fit images and video, set an aspect ratio, and set the cursor, pointer events and text selection.

Class	Effect	Breakpoints
`object-{contain,cover,fill,none,scale-down}`	`object-fit` of an image or video	No
`aspect-{auto,square,video}`	`aspect-ratio`: auto, 1 / 1 or 16 / 9	No
`cursor-{pointer,default,not-allowed}`	`cursor`	No
`pointer-events-{none,auto}`	`pointer-events`	No
`select-{none,text,all,auto}`	`user-select`	No

Hide content from the screen while screen readers still read it, such as extra context for a link. not-focus-within:sr-only shows the element in place while it or a descendant has focus, as a skip link to the main content needs; unlike focus:not-sr-only, it keeps the element’s own padding and position.

Class	Effect	Breakpoints
`sr-only`	Hidden on screen, read by screen readers	No
`not-sr-only`	Undoes `sr-only`	No
`not-focus-within:sr-only`	Like `sr-only` until it or a descendant has focus	No