utilities

45 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

overscroll-behavior utilities in v1.6

Tailwind CSS v1.6 added utilities for the overscroll-behavior property. These utilities control scroll chaining behavior and can prevent scrolling the whole page when reaching the top or bottom of an embedded scrollable area.

supports-* variant for @supports rules

The supports-[...] variant generates @supports CSS rules to conditionally style based on browser feature support. You can pass any @supports condition between square brackets, like supports-[display:grid]:grid or supports-[backdrop-filter]:backdrop-blur. If only checking property support, you can pass just the property name and Tailwind fills in the rest, such as supports-[backdrop-filter].

data-* variants for data attributes

The data-* variants allow conditional styling based on data attributes using arbitrary values like data-[size=large]:p-8. You can configure shortcuts for common data attributes under the data key in the theme section of tailwind.config.js, for example: data: { checked: 'ui~="checked"' }. These variants also work with group-data-* and peer-data-* modifiers for targeting parent and sibling elements.

max-* and min-* breakpoint variants

Tailwind v3.2 adds max-* variants for max-width media queries based on configured breakpoints, such as max-lg:p-8 which applies p-8 until the lg breakpoint. The min-* variant only accepts arbitrary values like min-[712px]:right-16. These features only work with simple screens configurations containing only string values (e.g., sm: "640px"). Complex configurations with max-width breakpoints, range-based queries, or other variations will not support these features.

Container queries via @tailwindcss/container-queries plugin

Tailwind v3.2 includes the @tailwindcss/container-queries first-party plugin for container query support using @container and @ syntax. Default container sizes match max-width scale: xs (20rem), sm (24rem), md (28rem), lg (32rem), xl (36rem), 2xl (42rem), 3xl (48rem), 4xl (56rem), 5xl (64rem), 6xl (72rem), 7xl (80rem). Configure via theme.extend.containers in tailwind.config.js. Supports arbitrary values with @[618px]:flex syntax and named containers with @container/main and @lg/main:flex syntax.

Scroll snap utilities in v3.0

Tailwind CSS v3.0 includes a comprehensive set of utilities for CSS Scroll Snap, including snap-x, snap-mandatory, snap-center, and snap-margin utilities for building scroll snapping experiences directly in HTML.

Multi-column layout utilities in v3.0

Tailwind CSS v3.0 added support for CSS columns property with utilities like columns-1 and sm:columns-3 for newspaper-style layouts. Additional utilities include break-after, break-inside, and break-before.

Print modifier in v3.0

Tailwind CSS v3.0 introduced the print modifier allowing styles to be conditionally applied for printing. Example usage: print:hidden to hide elements when printing, and hidden print:block to show elements only when printing.

Text decoration utilities in v3.0

Tailwind CSS v3.0 added utilities for underline styling including decoration-color (e.g., decoration-sky-500), decoration-style (e.g., decoration-dotted, decoration-wavy), decoration-thickness (e.g., decoration-2), and text-underline-offset.

RTL and LTR modifiers in v3.0

Tailwind CSS v3.0 added experimental support for multi-directional layouts with rtl and ltr modifiers. Example: ml-3 rtl:mr-3 rtl:ml-0 applies left margin in LTR mode but right margin in RTL mode.

Portrait and landscape modifiers in v3.0

Tailwind CSS v3.0 includes portrait and landscape modifiers to conditionally add styles based on viewport orientation. Example: portrait:hidden hides an element in portrait orientation, landscape:hidden hides it in landscape.

Additional v3.0 utilities

Tailwind CSS v3.0 added utilities for touch-action, will-change, flex-basis, text-indent, and scroll-behavior properties.

Scrollbar utilities in v4.3

Tailwind CSS v4.3 adds first-party scrollbar utilities: scrollbar-auto, scrollbar-thin, and scrollbar-none for controlling scrollbar-width; scrollbar-thumb-* and scrollbar-track-* utilities for controlling scrollbar colors with color opacity modifiers support; scrollbar-gutter-auto, scrollbar-gutter-stable, and scrollbar-gutter-both for controlling scrollbar-gutter to prevent layout shift.

New zoom-* utilities in v4.3

Tailwind CSS v4.3 adds zoom-* utilities for the CSS zoom property. Available utilities include zoom-75, zoom-100, and zoom-125. Arbitrary values and CSS variables are supported using syntax like zoom-[1.1] and zoom-(--preview-zoom).

New tab-* utilities in v4.3

Tailwind CSS v4.3 adds tab-* utilities for controlling the rendered width of tab characters using the tab-size CSS property. These are useful for code examples, editors, and preformatted text. Utilities like tab-2 and tab-8 are available, along with support for arbitrary values like tab-[12px] and CSS variables like tab-(--tab-size).

Logical property utilities added in v4.2

Tailwind CSS v4.2 added logical property utilities for better support of different writing modes and directions. These include: block-start/block-end utilities for padding (pbs-*, pbe-*), margin (mbs-*, mbe-*), scroll padding (scroll-pbs-*, scroll-pbe-*, scroll-mbs-*, scroll-mbe-*), and borders (border-bs, border-be-*); inline-size and block-size utilities with min and max variants (inline-full, min-inline-0, max-inline-lg, block-64, min-block-24, max-block-screen); logical inset utilities (inset-s-*, inset-e-*, inset-bs-*, inset-be-*).

New font-features-* utility in v4.2

Tailwind CSS v4.2 added font-features-* utilities for controlling the font-feature-settings CSS property. This allows enabling OpenType features like tabular numbers using syntax like font-features-["tnum"]. For common cases, higher-level utilities like tabular-nums should be preferred.

Scrollbar color example with opacity modifiers

Scrollbar color utilities support opacity modifiers. Example: scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 applies a 60% opacity thumb color and 10% opacity track color.

Scrollbar utilities example with CSS

Example of scrollbar utilities in HTML: <div class="scrollbar-thin scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">. This creates a thin scrollbar with sky-700 thumb color and sky-100 track color.

Logical property utilities examples in v4.2

Examples of new logical property utilities: <div class="mbs-6 mbe-2 pbs-4 pbe-8 ..."> for margin/padding block-start/block-end; <div class="block-64 inline-full max-block-screen max-inline-lg min-block-24 min-inline-0 ..."> for sizing; <div class="absolute inset-s-0 inset-e-4 inset-bs-2 inset-be-8 ..."> for positioning.

Font features utility example

Example of font-features-* utility: <div class='font-features-["tnum"] ...'> enables tabular number formatting. The font-features-["tnum"] syntax accepts any OpenType feature name in square brackets.

Zoom utilities examples

Examples of zoom-* utilities: <div class="zoom-75 ...">Zoomed out</div>, <div class="zoom-100 ...">Normal</div>, <div class="zoom-125 ...">Zoomed in</div>. Arbitrary values: <div class="zoom-[1.1] ...">Zoomed in a little</div>. CSS variables: <div class="zoom-(--preview-zoom) ...">Zoomed using a variable</div>.

Tab size utilities examples

Examples of tab-* utilities for preformatted text: <pre class="tab-2 ...">function indent() { \t return 'tabbed' }</pre> and <pre class="tab-8 ...">...</pre>. Arbitrary values: <pre class="tab-[12px] ...">...</pre>. CSS variables: <pre class="tab-(--tab-size) ...">...</pre>.

Scrollbar gutter utilities example

Example of scrollbar-gutter-stable: <div class="scrollbar-gutter-stable overflow-auto ...">. This reserves space for scrollbars even when not needed, preventing layout shift when scrollbars appear or disappear.

border-spacing utilities with numbers

The border-spacing-<number> utility sets border-spacing to calc(var(--spacing) * <number>). Example: border-spacing-2 applies calc(var(--spacing) * 2).

border-spacing-px utility

The border-spacing-px utility sets border-spacing to 1px.

border-spacing with custom properties

The border-spacing-(<custom-property>) utility sets border-spacing to var(<custom-property>), allowing theme variables to be referenced.

border-spacing with arbitrary values

The border-spacing-[<value>] utility syntax allows arbitrary values to be passed directly, setting border-spacing to the provided value.

border-spacing-y utilities for vertical spacing

The border-spacing-y-<number> utility sets border-spacing to var(--tw-border-spacing-x) calc(var(--spacing) * <number>), controlling only vertical spacing while preserving the horizontal value. Variants include border-spacing-y-px, border-spacing-y-(<custom-property>), and border-spacing-y-[<value>].

border-spacing for separated table borders

The border-spacing utilities control the space between borders of table cells when using the border-separate class for separated borders. Example: border-spacing-2 with border-separate creates visible gaps between table cell borders.

border-spacing example with border-spacing-2

Example: <table class="border-separate border-spacing-2 border border-gray-400"><thead><tr><th class="border border-gray-300">State</th><th class="border border-gray-300">City</th></tr></thead><tbody><tr><td class="border border-gray-300">Indiana</td><td class="border border-gray-300">Indianapolis</td></tr></tbody></table>

gap utility classes syntax

The gap utilities in Tailwind CSS v4 include: gap-<number> (applies gap: calc(var(--spacing) * <value>)), gap-px (applies gap: 1px), gap-(<custom-property>) (applies gap: var(<custom-property>)), and gap-[<value>] (applies gap: <value>). The same syntax patterns apply to gap-x-<number>, gap-x-px, gap-x-(<custom-property>), and gap-x-[<value>] for column gaps, and gap-y-<number>, gap-y-px, gap-y-(<custom-property>), and gap-y-[<value>] for row gaps.

gap-x and gap-y utilities for independent row/column gaps

Use gap-x-<number> utilities to control column gap independently, and gap-y-<number> utilities to control row gap independently. For example, gap-x-8 and gap-y-4 can be combined on the same element to set different gap values for columns and rows.

gap utility with custom property syntax

Gap utilities support custom property syntax using the pattern gap-(<custom-property>), gap-x-(<custom-property>), and gap-y-(<custom-property>) to apply custom CSS properties as gap values.

Basic gap example with gap-4

Use gap-4 on a grid with grid-cols-2 to create a 4-unit gap between both rows and columns. Example: <div class="grid grid-cols-2 gap-4"><div>01</div><div>02</div><div>03</div><div>04</div></div>

Independent row and column gaps example

Use gap-x-8 and gap-y-4 together on a grid with grid-cols-3 to set different gaps for columns and rows independently. Example: <div class="grid grid-cols-3 gap-x-8 gap-y-4"><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div><div>06</div></div>

scroll-margin utilities class mapping

Tailwind CSS provides the following scroll-margin utility classes: scroll-m maps to scroll-margin, scroll-mx maps to scroll-margin-inline, scroll-my maps to scroll-margin-block, scroll-ms maps to scroll-margin-inline-start, scroll-me maps to scroll-margin-inline-end, scroll-mbs maps to scroll-margin-block-start, scroll-mbe maps to scroll-margin-block-end, scroll-mt maps to scroll-margin-top, scroll-mr maps to scroll-margin-right, scroll-mb maps to scroll-margin-bottom, and scroll-ml maps to scroll-margin-left.

scroll-margin utility class variants

Each scroll-margin utility prefix supports multiple variants: scroll-{prefix}-<number> applies calc(var(--spacing) * <number>), -{prefix}-<number> applies a negative value, {prefix}-px applies 1px, -{prefix}-px applies -1px, {prefix}-(<custom-property>) applies a CSS custom property, and {prefix}-[<value>] applies an arbitrary value.

scroll-margin with spacing scale

Scroll-margin utilities use the spacing scale from the theme and multiply it by the numeric modifier. For example, scroll-ml-6 applies scroll-margin-left: calc(var(--spacing) * 6). Negative values can be applied by prefixing the class with a dash, such as -scroll-ml-6.

scroll-margin logical properties support

Tailwind CSS v4 supports logical properties for scroll-margin. The scroll-ms-<number> and scroll-me-<number> utilities set scroll-margin-inline-start and scroll-margin-inline-end, which adapt to text direction (LTR/RTL). The scroll-mbs-<number> and scroll-mbe-<number> utilities set scroll-margin-block-start and scroll-margin-block-end, which adapt to writing mode.

scroll-margin basic example

The scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number>, and scroll-ml-<number> utilities set the scroll offset around items within a snap container. Example HTML: <div class="snap-x ..."><div class="snap-start scroll-ml-6 ..."><img src="/img/vacation-01.jpg"/></div></div>

scroll-margin negative values example

To use a negative scroll margin value, prefix the class name with a dash. Example: <div class="snap-start -scroll-ml-6 ..."></div>

scroll-margin with arbitrary values

Scroll-margin utilities support arbitrary values using bracket notation: scroll-ml-[24rem] applies scroll-margin-left: 24rem. They also support custom CSS properties using parentheses notation: scroll-me-(<custom-property>) applies the value of a CSS custom property.

scroll-margin customization via spacing scale

The scroll-margin utilities (scroll-m, scroll-mx, scroll-my, scroll-ms, scroll-me, scroll-mbs, scroll-mbe, scroll-mt, scroll-mr, scroll-mb, scroll-ml) can be customized by extending the spacing scale in the theme configuration.

scroll-margin responsive design support

Scroll-margin utilities support responsive design with breakpoint prefixes, allowing you to apply different scroll-margin values at different screen sizes.

Give your agent this brain