background-image

bg-image

Sets background-image via --bg-image. Accepts url() or a gradient string.

CSS Rules

.bg-image {
  background-image: var(--bg-image);
}

Usage

<element class="bg-image" style="--bg-image: /* value */;" />

Responsive

Prefix .bg-image utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:bg-image" style="--md-bg-image: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="bg-image:hover" style="--bg-image-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="bg-image:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before bg-image::before" style="--bg-image-before: /* value */;" />

<element class="content-after bg-image::after" style="--bg-image-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="bg-image=value" />

<!-- Output -->
<element class="bg-image" style="--bg-image: value;" />

bg-image-none

Removes the background image.

CSS Rules

.bg-image-none {
  background-image: none;
}

Usage

<element class="bg-image-none" />

Responsive

Prefix .bg-image-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:bg-image-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="bg-image-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="bg-image-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before bg-image-none::before" />

<element class="content-after bg-image-none::after" />

bg-gradient-to-t

Sets a linear gradient background direction towards the top.

CSS Rules

.bg-gradient-to-t {
  --tw-gradient-position: to top in oklab;
  background-image: to top in oklab;
}

Usage

<element class="bg-gradient-to-t" />

Responsive

Prefix .bg-gradient-to-t utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:bg-gradient-to-t" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="bg-gradient-to-t:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="bg-gradient-to-t:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before bg-gradient-to-t::before" />

<element class="content-after bg-gradient-to-t::after" />

bg-gradient-to-tr

Sets a linear gradient background direction towards the top right.

CSS Rules

.bg-gradient-to-tr {
  --tw-gradient-position: to top right in oklab;
  background-image: to top right in oklab;
}

Usage

<element class="bg-gradient-to-tr" />

Responsive

Prefix .bg-gradient-to-tr utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:bg-gradient-to-tr" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="bg-gradient-to-tr:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="bg-gradient-to-tr:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before bg-gradient-to-tr::before" />

<element class="content-after bg-gradient-to-tr::after" />

bg-gradient-to-r

Sets a linear gradient background direction towards the right.

CSS Rules

.bg-gradient-to-r {
  --tw-gradient-position: to right in oklab;
  background-image: to right in oklab;
}

Usage

<element class="bg-gradient-to-r" />

Responsive

Prefix .bg-gradient-to-r utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:bg-gradient-to-r" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="bg-gradient-to-r:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="bg-gradient-to-r:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before bg-gradient-to-r::before" />

<element class="content-after bg-gradient-to-r::after" />

bg-gradient-to-br

Sets a linear gradient background direction towards the bottom right.

CSS Rules

.bg-gradient-to-br {
  --tw-gradient-position: to bottom right in oklab;
  background-image: to bottom right in oklab;
}

Usage

<element class="bg-gradient-to-br" />

Responsive

Prefix .bg-gradient-to-br utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:bg-gradient-to-br" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="bg-gradient-to-br:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="bg-gradient-to-br:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before bg-gradient-to-br::before" />

<element class="content-after bg-gradient-to-br::after" />

bg-gradient-to-b

Sets a linear gradient background direction towards the bottom.

CSS Rules

.bg-gradient-to-b {
  --tw-gradient-position: to bottom in oklab;
  background-image: to bottom in oklab;
}

Usage

<element class="bg-gradient-to-b" />

Responsive

Prefix .bg-gradient-to-b utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:bg-gradient-to-b" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="bg-gradient-to-b:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="bg-gradient-to-b:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before bg-gradient-to-b::before" />

<element class="content-after bg-gradient-to-b::after" />

bg-gradient-to-bl

Sets a linear gradient background direction towards the bottom left.

CSS Rules

.bg-gradient-to-bl {
  --tw-gradient-position: to bottom left in oklab;
  background-image: to bottom left in oklab;
}

Usage

<element class="bg-gradient-to-bl" />

Responsive

Prefix .bg-gradient-to-bl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:bg-gradient-to-bl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="bg-gradient-to-bl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="bg-gradient-to-bl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before bg-gradient-to-bl::before" />

<element class="content-after bg-gradient-to-bl::after" />

bg-gradient-to-l

Sets a linear gradient background direction towards the left.

CSS Rules

.bg-gradient-to-l {
  --tw-gradient-position: to left in oklab;
  background-image: to left in oklab;
}

Usage

<element class="bg-gradient-to-l" />

Responsive

Prefix .bg-gradient-to-l utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:bg-gradient-to-l" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="bg-gradient-to-l:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="bg-gradient-to-l:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before bg-gradient-to-l::before" />

<element class="content-after bg-gradient-to-l::after" />

bg-gradient-to-tl

Sets a linear gradient background direction towards the top left.

CSS Rules

.bg-gradient-to-tl {
  --tw-gradient-position: to top left in oklab;
  background-image: to top left in oklab;
}

Usage

<element class="bg-gradient-to-tl" />

Responsive

Prefix .bg-gradient-to-tl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:bg-gradient-to-tl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="bg-gradient-to-tl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="bg-gradient-to-tl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before bg-gradient-to-tl::before" />

<element class="content-after bg-gradient-to-tl::after" />

radial

Creates a radial gradient background using configured gradient stops.

CSS Rules

.radial {
  background-image: radial-gradient(var(--tw-gradient-stops));
}

Usage

<element class="radial" />

Responsive

Prefix .radial utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:radial" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="radial:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="radial:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before radial::before" />

<element class="content-after radial::after" />

conic

Creates a conic gradient background using configured gradient stops.

CSS Rules

.conic {
  background-image: conic-gradient(var(--tw-gradient-stops));
}

Usage

<element class="conic" />

Responsive

Prefix .conic utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:conic" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="conic:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="conic:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before conic::before" />

<element class="content-after conic::after" />

from

Sets the gradient start color via --from.

CSS Rules

.from {
  --tw-gradient-from: var(--from);
  --tw-gradient-stops: var(--from);
}

Usage

<element class="from" style="--from: /* value */;" />

Responsive & Dark Mode

Prefix .from utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first.

<element class="md:from" style="--md-from: /* value */;" />

<element class="dark:sm:from" style="--dark-sm-from: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="from:hover" style="--from-hover: /* value */;" />

<element class="dark:sm:from:hover" style="--dark-sm-from-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="from:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before from::before" style="--from-before: /* value */;" />

<element class="content-after from::after" style="--from-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="from=value" />

<!-- Output -->
<element class="from" style="--from: value;" />

from/o

Sets gradient start color + opacity via --from and --from-o.

CSS Rules

.from\/o {
  --tw-gradient-from: color-mix(in oklab, var(--from) var(--from-o, 100%), transparent);
  --tw-gradient-stops: color-mix(in oklab, var(--from) var(--from-o, 100%), transparent);
}

Usage

<element
  class="from/o"
  style="
    --from: /* value */;
    --from-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .from/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first.

<element
  class="md:from/o"
  style="
    --md-from: /* value */;
    --md-from-o: /* value */;
  "
></element>

<element
  class="dark:sm:from/o"
  style="
    --dark-sm-from: /* value */;
    --dark-sm-from-o: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element
  class="from/o:hover"
  style="
    --from-hover: /* value */;
    --from-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:from/o:hover"
  style="
    --dark-sm-from-hover: /* value */;
    --dark-sm-from-o-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="from/o:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element
  class="content-before from/o::before"
  style="
    --from-before: /* value */;
    --from-o-before: /* value */;
  "
></element>

<element
  class="content-after from/o::after"
  style="
    --from-after: /* value */;
    --from-o-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="from/o=value" />

<!-- Output -->
<element class="from/o" style="--from: value;" />

from-position

Sets the gradient from-stop position via --from-position. E.g. 10%.

CSS Rules

.from-position {
  --tw-gradient-from-position: var(--from-position);
}

Usage

<element class="from-position" style="--from-position: /* value */;" />

Responsive

Prefix .from-position utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:from-position" style="--md-from-position: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="from-position:hover" style="--from-position-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="from-position:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before from-position::before" style="--from-position-before: /* value */;" />

<element class="content-after from-position::after" style="--from-position-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="from-position=value" />

<!-- Output -->
<element class="from-position" style="--from-position: value;" />

via

Sets the gradient midpoint color via --via.

CSS Rules

.via {
  --tw-gradient-via: var(--via);
  --tw-gradient-via-stops: var(--via);
  --tw-gradient-stops: var(--via);
}

Usage

<element
  class="via"
  style="
    --via: /* value */;
    --via-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .via utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first.

<element
  class="md:via"
  style="
    --md-via: /* value */;
    --md-via-o: /* value */;
  "
></element>

<element
  class="dark:sm:via"
  style="
    --dark-sm-via: /* value */;
    --dark-sm-via-o: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element
  class="via:hover"
  style="
    --via-hover: /* value */;
    --via-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:via:hover"
  style="
    --dark-sm-via-hover: /* value */;
    --dark-sm-via-o-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="via:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element
  class="content-before via::before"
  style="
    --via-before: /* value */;
    --via-o-before: /* value */;
  "
></element>

<element
  class="content-after via::after"
  style="
    --via-after: /* value */;
    --via-o-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="via=value" />

<!-- Output -->
<element class="via" style="--via: value;" />

via/o

Sets gradient via color + opacity independently via --via and --via-o.

CSS Rules

.via\/o {
  --tw-gradient-via: color-mix(in oklab, var(--via) var(--via-o, 100%), transparent);
  --tw-gradient-via-stops: color-mix(in oklab, var(--via) var(--via-o, 100%), transparent);
  --tw-gradient-stops: color-mix(in oklab, var(--via) var(--via-o, 100%), transparent);
}

Usage

<element
  class="via/o"
  style="
    --via: /* value */;
    --via-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .via/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first.

<element
  class="md:via/o"
  style="
    --md-via: /* value */;
    --md-via-o: /* value */;
  "
></element>

<element
  class="dark:sm:via/o"
  style="
    --dark-sm-via: /* value */;
    --dark-sm-via-o: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element
  class="via/o:hover"
  style="
    --via-hover: /* value */;
    --via-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:via/o:hover"
  style="
    --dark-sm-via-hover: /* value */;
    --dark-sm-via-o-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="via/o:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element
  class="content-before via/o::before"
  style="
    --via-before: /* value */;
    --via-o-before: /* value */;
  "
></element>

<element
  class="content-after via/o::after"
  style="
    --via-after: /* value */;
    --via-o-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="via/o=value" />

<!-- Output -->
<element class="via/o" style="--via: value;" />

via-position

Sets the gradient via-stop position via --via-position. E.g. 50%.

CSS Rules

.via-position {
  --tw-gradient-via-position: var(--via-position);
}

Usage

<element class="via-position" style="--via-position: /* value */;" />

Responsive

Prefix .via-position utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:via-position" style="--md-via-position: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="via-position:hover" style="--via-position-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="via-position:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before via-position::before" style="--via-position-before: /* value */;" />

<element class="content-after via-position::after" style="--via-position-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="via-position=value" />

<!-- Output -->
<element class="via-position" style="--via-position: value;" />

to

Sets the gradient end color via --to.

CSS Rules

.to {
  --tw-gradient-to: var(--to);
  --tw-gradient-stops: var(--to);
}

Usage

<element class="to" style="--to: /* value */;" />

Responsive & Dark Mode

Prefix .to utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first.

<element class="md:to" style="--md-to: /* value */;" />

<element class="dark:sm:to" style="--dark-sm-to: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="to:hover" style="--to-hover: /* value */;" />

<element class="dark:sm:to:hover" style="--dark-sm-to-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="to:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before to::before" style="--to-before: /* value */;" />

<element class="content-after to::after" style="--to-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="to=value" />

<!-- Output -->
<element class="to" style="--to: value;" />

to/o

Sets gradient end color + opacity independently via --to and --to-o.

CSS Rules

.to\/o {
  --tw-gradient-to: color-mix(in oklab, var(--to) var(--to-o, 100%), transparent);
  --tw-gradient-stops: color-mix(in oklab, var(--to) var(--to-o, 100%), transparent);
}

Usage

<element
  class="to/o"
  style="
    --to: /* value */;
    --to-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .to/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first.

<element
  class="md:to/o"
  style="
    --md-to: /* value */;
    --md-to-o: /* value */;
  "
></element>

<element
  class="dark:sm:to/o"
  style="
    --dark-sm-to: /* value */;
    --dark-sm-to-o: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element
  class="to/o:hover"
  style="
    --to-hover: /* value */;
    --to-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:to/o:hover"
  style="
    --dark-sm-to-hover: /* value */;
    --dark-sm-to-o-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="to/o:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element
  class="content-before to/o::before"
  style="
    --to-before: /* value */;
    --to-o-before: /* value */;
  "
></element>

<element
  class="content-after to/o::after"
  style="
    --to-after: /* value */;
    --to-o-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="to/o=value" />

<!-- Output -->
<element class="to/o" style="--to: value;" />

to-position

Sets the gradient to-stop position via --to-position. E.g. 90%.

CSS Rules

.to-position {
  --tw-gradient-to-position: var(--to-position);
}

Usage

<element class="to-position" style="--to-position: /* value */;" />

Responsive

Prefix .to-position utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:to-position" style="--md-to-position: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="to-position:hover" style="--to-position-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="to-position:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before to-position::before" style="--to-position-before: /* value */;" />

<element class="content-after to-position::after" style="--to-position-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="to-position=value" />

<!-- Output -->
<element class="to-position" style="--to-position: value;" />

gradient-position

Sets gradient position/interpolation via --gradient-position, falling back to oklab.

CSS Rules

.gradient-position {
  --tw-gradient-position: var(--gradient-position, in oklab);
}

Usage

<element class="gradient-position" style="--gradient-position: /* value */;" />

Responsive

Prefix .gradient-position utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:gradient-position" style="--md-gradient-position: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="gradient-position:hover" style="--gradient-position-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="gradient-position:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before gradient-position::before" style="--gradient-position-before: /* value */;" />

<element class="content-after gradient-position::after" style="--gradient-position-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="gradient-position=value" />

<!-- Output -->
<element class="gradient-position" style="--gradient-position: value;" />

linear

Creates a linear gradient background using configured gradient stops.

CSS Rules

.linear {
  background-image: linear-gradient(var(--tw-gradient-stops));
}

Usage

<element class="linear" />

Responsive

Prefix .linear utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:linear" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="linear:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="linear:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before linear::before" />

<element class="content-after linear::after" />

linear-to-b

Sets gradient direction to the bottom. Combine with from, via, and to.

CSS Rules

.linear-to-b {
  --tw-gradient-position: to bottom in oklab;
}

Usage

<element class="linear-to-b" />

Responsive

Prefix .linear-to-b utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:linear-to-b" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="linear-to-b:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="linear-to-b:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before linear-to-b::before" />

<element class="content-after linear-to-b::after" />

linear-to-bl

Points a linear gradient toward the bottom left and uses oklab interpolation.

CSS Rules

.linear-to-bl {
  --tw-gradient-position: to bottom left in oklab;
}

Usage

<element class="linear-to-bl" />

Responsive

Prefix .linear-to-bl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:linear-to-bl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="linear-to-bl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="linear-to-bl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before linear-to-bl::before" />

<element class="content-after linear-to-bl::after" />

linear-to-br

Sets gradient direction to bottom-right. Combine with from, via, and to.

CSS Rules

.linear-to-br {
  --tw-gradient-position: to bottom right in oklab;
}

Usage

<element class="linear-to-br" />

Responsive

Prefix .linear-to-br utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:linear-to-br" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="linear-to-br:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="linear-to-br:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before linear-to-br::before" />

<element class="content-after linear-to-br::after" />

linear-to-l

Points a linear gradient toward the left and uses oklab interpolation.

CSS Rules

.linear-to-l {
  --tw-gradient-position: to left in oklab;
}

Usage

<element class="linear-to-l" />

Responsive

Prefix .linear-to-l utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:linear-to-l" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="linear-to-l:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="linear-to-l:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before linear-to-l::before" />

<element class="content-after linear-to-l::after" />

linear-to-r

Sets gradient direction to the right. Combine with from, via, and to.

CSS Rules

.linear-to-r {
  --tw-gradient-position: to right in oklab;
}

Usage

<element class="linear-to-r" />

Responsive

Prefix .linear-to-r utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:linear-to-r" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="linear-to-r:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="linear-to-r:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before linear-to-r::before" />

<element class="content-after linear-to-r::after" />

linear-to-t

Points a linear gradient toward the top and uses oklab interpolation.

CSS Rules

.linear-to-t {
  --tw-gradient-position: to top in oklab;
}

Usage

<element class="linear-to-t" />

Responsive

Prefix .linear-to-t utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:linear-to-t" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="linear-to-t:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="linear-to-t:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before linear-to-t::before" />

<element class="content-after linear-to-t::after" />

linear-to-tl

Points a linear gradient toward the top left and uses oklab interpolation.

CSS Rules

.linear-to-tl {
  --tw-gradient-position: to top left in oklab;
}

Usage

<element class="linear-to-tl" />

Responsive

Prefix .linear-to-tl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:linear-to-tl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="linear-to-tl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="linear-to-tl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before linear-to-tl::before" />

<element class="content-after linear-to-tl::after" />

linear-to-tr

Points a linear gradient toward the top right and uses oklab interpolation.

CSS Rules

.linear-to-tr {
  --tw-gradient-position: to top right in oklab;
}

Usage

<element class="linear-to-tr" />

Responsive

Prefix .linear-to-tr utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:linear-to-tr" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="linear-to-tr:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="linear-to-tr:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before linear-to-tr::before" />

<element class="content-after linear-to-tr::after" />