transition-property

transition

Sets which CSS properties to transition via --transition. E.g. opacity.

CSS Rules

.transition {
  transition-property: var(--transition, var(--default-transition-property));
  transition-timing-function: var(--transition, var(--default-transition-property));
  transition-duration: var(--transition, var(--default-transition-property));
}

Usage

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

Responsive

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

<element class="md:transition" style="--md-transition: /* 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="transition:hover" style="--transition-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="transition: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 transition::before" style="--transition-before: /* value */;" />

<element class="content-after transition::after" style="--transition-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="transition=value" />

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

transition-all

Transitions all CSS properties.

CSS Rules

.transition-all {
  --default-transition-property: all;
}

Usage

<element class="transition-all" />

Responsive

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

<element class="md:transition-all" />

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="transition-all: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="transition-all: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 transition-all::before" />

<element class="content-after transition-all::after" />

transition-colors

Transitions color-related properties: color, background, border, fill, stroke, etc.

CSS Rules

.transition-colors {
  --default-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

Usage

<element class="transition-colors" />

Responsive

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

<element class="md:transition-colors" />

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="transition-colors: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="transition-colors: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 transition-colors::before" />

<element class="content-after transition-colors::after" />

transition-opacity

Transitions opacity only.

CSS Rules

.transition-opacity {
  --default-transition-property: opacity;
}

Usage

<element class="transition-opacity" />

Responsive

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

<element class="md:transition-opacity" />

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="transition-opacity: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="transition-opacity: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 transition-opacity::before" />

<element class="content-after transition-opacity::after" />

transition-shadow

Transitions box-shadow.

CSS Rules

.transition-shadow {
  --default-transition-property: box-shadow;
}

Usage

<element class="transition-shadow" />

Responsive

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

<element class="md:transition-shadow" />

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="transition-shadow: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="transition-shadow: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 transition-shadow::before" />

<element class="content-after transition-shadow::after" />

transition-transform

Transitions transform properties: translate, scale, rotate.

CSS Rules

.transition-transform {
  --default-transition-property: transform, translate, scale, rotate;
}

Usage

<element class="transition-transform" />

Responsive

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

<element class="md:transition-transform" />

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="transition-transform: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="transition-transform: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 transition-transform::before" />

<element class="content-after transition-transform::after" />

transition-none

Removes transitions.

CSS Rules

.transition-none {
  transition-property: none;
}

Usage

<element class="transition-none" />

Responsive

Prefix .transition-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:transition-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="transition-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="transition-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 transition-none::before" />

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