utilities/arbitrary-values

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

Arbitrary value syntax with square brackets

Tailwind v4 (and v3) supports generating utility classes on the fly using square bracket notation for arbitrary values, e.g. class="top-[117px]" generates top: 117px. This can be combined with variants like hover: and responsive prefixes like lg: e.g. class="top-[117px] lg:top-[344px]". Works for colors, font sizes, pseudo-element content, etc., e.g. class="bg-[#bada55] text-[22px] before:content-['Festivus']".

Arbitrary value shorthand for CSS variables

When referencing a CSS variable as an arbitrary value in Tailwind v4, you can use the custom property shorthand syntax: class="fill-(--my-brand-color)" is shorthand for fill-[var(--my-brand-color)] — Tailwind automatically wraps it in var() for you.

Arbitrary properties with square brackets

If Tailwind doesn't provide a utility for a CSS property out of the box, you can write completely arbitrary CSS using square bracket notation directly as a class, e.g. class="[mask-type:luminance]". This supports modifiers too, e.g. class="[mask-type:luminance] hover:[mask-type:alpha]". It also works for setting CSS custom properties conditionally, e.g. class="[--scroll-offset:56px] lg:[--scroll-offset:44px]".

Arbitrary variants using square brackets

Arbitrary variants let you do on-the-fly selector modification directly in HTML using square bracket notation, similar to built-in variants like hover: or md:. Example: class="lg:[&:nth-child(-n+3)]:hover:underline" applies underline on hover to elements matching :nth-child(-n+3) at the lg breakpoint.

Whitespace handling in arbitrary values

When an arbitrary value needs to contain a space, use an underscore (_) instead; Tailwind converts it to a space at build time, e.g. class="grid grid-cols-[1fr_500px_2fr]". In contexts where underscores are valid but spaces aren't (like URLs), Tailwind preserves the underscore instead of converting it, e.g. class="bg-[url('/what_a_rush.png')]". If you need a literal underscore where a space would also be valid, escape it with a backslash, e.g. class="before:content-['hello\_world']". In JSX where backslashes get stripped, use String.raw`before:content-['hello\_world']` to prevent JS from treating it as an escape character.

Resolving ambiguous arbitrary value types with data type hints

Some utilities share a namespace but map to different CSS properties (e.g. text-lg is font-size, text-black is color). Tailwind usually infers the correct property automatically from the arbitrary value (text-[22px] → font-size; text-[#bada55] → color). When using a CSS variable it can be ambiguous (text-(--my-var)); you can hint the type by prefixing with a CSS data type inside the parens: text-(length:--my-var) forces font-size, text-(color:--my-var) forces color.

Custom animation value with animate-(<custom-property>) and arbitrary value

You can use a custom animation value with the `animate` utility either via a CSS variable using the syntax `animate-(<custom-property>)`, e.g. referencing a variable named `--animation`, or via an arbitrary value using square brackets, e.g. `animate-[wiggle_1s_ease-in-out_infinite]` (spaces in the value replaced with underscores).

border width supports arbitrary values with square brackets

The border-width utilities support arbitrary values using square bracket syntax: border-[<value>] applies border-width: <value>. Similarly, border-x-[<value>], border-y-[<value>], border-t-[<value>], border-r-[<value>], border-b-[<value>], and border-l-[<value>] support arbitrary values. This syntax allows any CSS value to be used for border width.

shrink supports custom values with arbitrary syntax

The shrink utility supports arbitrary values using bracket notation like shrink-[<value>] and custom properties using functional notation like shrink-(<custom-property>).

font-[<value>] arbitrary values

Font family utilities support arbitrary values with the syntax font-[<value>] which applies font-family: <value>.

grid-cols arbitrary value syntax

The grid-cols-[<value>] syntax allows arbitrary values and generates grid-template-columns: <value>; for custom grid column definitions.

grid-cols custom property syntax

The grid-cols-(<custom-property>) syntax allows using CSS custom properties and generates grid-template-columns: var(<custom-property>);

grid-rows-[<value>] arbitrary value syntax

Use grid-rows-[<value>] syntax to apply arbitrary grid-template-rows values. For example, grid-rows-[200px_minmax(900px,1fr)_100px] sets custom row definitions.

max-w custom property syntax

max-w-(<custom-property>) applies max-width: var(<custom-property>), allowing reference to custom CSS properties.

max-w arbitrary value syntax

max-w-[<value>] applies max-width: <value>, allowing arbitrary CSS values.

min-h-[<value>] arbitrary value syntax

The min-h-[<value>] syntax allows arbitrary values for min-height, setting min-height: <value>. For example, min-h-[220px] sets min-height: 220px.

opacity arbitrary values

The opacity utility supports arbitrary values using the opacity-[<value>] syntax, allowing custom opacity values to be specified directly.

Arbitrary breakpoint values with min and max variants

If you need a one-off breakpoint not in your theme, use min or max variants to generate a custom breakpoint on the fly using arbitrary values. Examples: min-[320px]:text-center and max-[600px]:bg-sky-300.

Arbitrary container query values

Use variants like @min-[475px] and @max-[960px] for one-off container query sizes you don't want to add to your theme.

skew utilities support custom properties and arbitrary values

Skew utilities can use custom CSS properties with the skew-(<custom-property>), skew-x-(<custom-property>), and skew-y-(<custom-property>) syntax. They also support arbitrary values with the bracket notation like skew-[3.142rad], skew-x-[<value>], and skew-y-[<value>].

Arbitrary values use square bracket syntax

When you need a one-off value outside of theme variables, use square brackets to specify arbitrary values. Examples: bg-[#316ff6] for a custom color, grid-cols-[24rem_2.5rem_minmax(0,1fr)] for a complex grid, max-h-[calc(100dvh-(--spacing(6)))] for calc() expressions, and [--gutter-width:1rem] for arbitrary CSS variables. Arbitrary values let you use any CSS feature even when the exact value isn't in your theme.

translate utility supports arbitrary values

The translate utility supports arbitrary values using square bracket syntax, allowing values not defined in the spacing scale to be used directly.

CSS variable syntax for arbitrary values

In v4, use parentheses instead of square brackets for CSS variables in arbitrary values. Change bg-[--brand-color] to bg-(--brand-color). This change was made because recent CSS updates made square bracket syntax ambiguous.

Comma handling in grid and object-position arbitrary values

In v4, commas in arbitrary values for grid-cols-*, grid-rows-*, and object-* utilities are no longer replaced with spaces. Use underscores to represent spaces instead. Change grid-cols-[max-content,auto] to grid-cols-[max-content_auto].

vertical-align arbitrary values

The align-[<value>] syntax allows arbitrary vertical-align values to be applied using the format align-[<value>], which generates vertical-align: <value>. Additionally, align-(<custom-property>) generates vertical-align: var(<custom-property>).

v3.1 Arbitrary variants in HTML

Tailwind CSS v3.1 introduces arbitrary variants, allowing you to create ad hoc variants directly in HTML using square bracket syntax. Syntax: [selector]:utility-class. Examples: [&:nth-child(3)]:py-0, [@supports(backdrop-filter:blur(0))]:bg-white/50, [&>*]:p-4, hover:[&>li:nth-child(2)>div>p:first-child]:text-indigo-500.

CSS variables without var() syntax in v3.3

Tailwind CSS v3.3 allows using CSS variables in arbitrary values without the var() wrapper. Instead of bg-[var(--brand-color)], you can use bg-[--brand-color]. This works with all states like hover:bg-[--brand-hover-color].

CSS variable shorthand example in v3.3

```javascript export function MyComponent({ company }) { return ( <div style={{ "--brand-color": company.brandColor, "--brand-hover-color": company.brandHoverColor, }} className="bg-[--brand-color] hover:bg-[--brand-hover-color]" /> ); } ```

Arbitrary properties in v3.0

Tailwind CSS v3.0 supports arbitrary CSS properties that can be combined with modifiers using square bracket syntax. Example: [mask-type:luminance] hover:[mask-type:alpha] allows setting any CSS property with full modifier support.

Arbitrary values for flex-basis

The basis-[<value>] syntax allows arbitrary custom values for flex-basis, generating flex-basis: <value>. The basis-(<custom-property>) syntax allows referencing custom CSS properties with flex-basis: var(<custom-property>).

gap utility with arbitrary values

Gap utilities support arbitrary values using square bracket syntax: gap-[<value>], gap-x-[<value>], and gap-y-[<value>] allow any CSS value to be applied directly to the gap property.

Custom scroll-padding values in v4

Custom scroll-padding values can be applied using arbitrary value syntax. For example, scroll-pl-[24rem] or scroll-pe-[24rem] apply custom scroll-padding values using the bracket notation.

Give your agent this brain