box-shadow

shadow

Sets box-shadow via --shadow. Full shadow definition string.

CSS Rules

.shadow {
  --tw-shadow-color: var(--shadow, rgb(0 0 0 / 0.1));
  --tw-shadow: var(--shadow, rgb(0 0 0 / 0.1));
  box-shadow: var(--shadow, rgb(0 0 0 / 0.1));
}

Usage

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

Responsive & Dark Mode

Prefix .shadow 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:shadow" style="--md-shadow: /* value */;" />

<element class="dark:sm:shadow" style="--dark-sm-shadow: /* 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="shadow:hover" style="--shadow-hover: /* value */;" />

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

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

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

shadow/o

Sets shadow color + opacity via --shadow and --shadow-o.

CSS Rules

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

Usage

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

Responsive & Dark Mode

Prefix .shadow/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:shadow/o"
  style="
    --md-shadow: /* value */;
    --md-shadow-o: /* value */;
  "
></element>

<element
  class="dark:sm:shadow/o"
  style="
    --dark-sm-shadow: /* value */;
    --dark-sm-shadow-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="shadow/o:hover"
  style="
    --shadow-hover: /* value */;
    --shadow-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:shadow/o:hover"
  style="
    --dark-sm-shadow-hover: /* value */;
    --dark-sm-shadow-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="shadow/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 shadow/o::before"
  style="
    --shadow-before: /* value */;
    --shadow-o-before: /* value */;
  "
></element>

<element
  class="content-after shadow/o::after"
  style="
    --shadow-after: /* value */;
    --shadow-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="shadow/o=value" />

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

[shadow]

Applies raw --shadow directly to box-shadow. Supports dark mode.

CSS Rules

.\[shadow\] {
  box-shadow: var(--shadow);
}

Usage

<element class="[shadow]" style="--shadow: /* value */;" />

Responsive & Dark Mode

Prefix .[shadow] 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:[shadow]" style="--md-shadow: /* value */;" />

<element class="dark:sm:[shadow]" style="--dark-sm-shadow: /* 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="[shadow]:hover" style="--shadow-hover: /* value */;" />

<element class="dark:sm:[shadow]:hover" style="--dark-sm-shadow-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="[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 [shadow]::before" style="--shadow-before: /* value */;" />

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

<!-- Output -->
<element class="[shadow]" style="--shadow: value;" />

shadow-2xs

Defines an ultra-subtle shadow token via --tw-shadow for very low elevation.

CSS Rules

.shadow-2xs {
  --tw-shadow: 0 1px var(--tw-shadow-color);
}

Usage

<element class="shadow-2xs" />

Responsive

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

<element class="md:shadow-2xs" />

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

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

shadow-xs

Defines an extra-small shadow token via --tw-shadow for low elevation.

CSS Rules

.shadow-xs {
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color);
}

Usage

<element class="shadow-xs" />

Responsive

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

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

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

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

shadow-sm

Applies a small box-shadow preset.

CSS Rules

.shadow-sm {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
}

Usage

<element class="shadow-sm" />

Responsive

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

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

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

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

shadow-md

Applies a medium box-shadow preset.

CSS Rules

.shadow-md {
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
}

Usage

<element class="shadow-md" />

Responsive

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

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

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

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

shadow-lg

Applies a large box-shadow preset.

CSS Rules

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
}

Usage

<element class="shadow-lg" />

Responsive

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

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

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

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

shadow-xl

Applies an extra-large box-shadow preset.

CSS Rules

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
}

Usage

<element class="shadow-xl" />

Responsive

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

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

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

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

shadow-none

Removes box-shadow.

CSS Rules

.shadow-none {
  box-shadow: 0 0 #0000;
}

Usage

<element class="shadow-none" />

Responsive

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

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

ring

Sets focus ring color via --ring. Width defaults to 1px.

CSS Rules

.ring {
  --tw-ring-color: var(--ring, currentColor);
  --tw-ring-shadow: var(--ring, currentColor);
  box-shadow: var(--ring, currentColor);
}

Usage

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

Responsive & Dark Mode

Prefix .ring 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:ring" style="--md-ring: /* value */;" />

<element class="dark:sm:ring" style="--dark-sm-ring: /* 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="ring:hover" style="--ring-hover: /* value */;" />

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

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

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

ring/o

Sets ring color + opacity via --ring and --ring-o.

CSS Rules

.ring\/o {
  --tw-ring-color: color-mix(in oklab, var(--ring) var(--ring-o, 100%), transparent);
  --tw-ring-shadow: color-mix(in oklab, var(--ring) var(--ring-o, 100%), transparent);
  box-shadow: color-mix(in oklab, var(--ring) var(--ring-o, 100%), transparent);
}

Usage

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

Responsive & Dark Mode

Prefix .ring/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:ring/o"
  style="
    --md-ring: /* value */;
    --md-ring-o: /* value */;
  "
></element>

<element
  class="dark:sm:ring/o"
  style="
    --dark-sm-ring: /* value */;
    --dark-sm-ring-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="ring/o:hover"
  style="
    --ring-hover: /* value */;
    --ring-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:ring/o:hover"
  style="
    --dark-sm-ring-hover: /* value */;
    --dark-sm-ring-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="ring/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 ring/o::before"
  style="
    --ring-before: /* value */;
    --ring-o-before: /* value */;
  "
></element>

<element
  class="content-after ring/o::after"
  style="
    --ring-after: /* value */;
    --ring-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="ring/o=value" />

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

ring-w

Sets ring width via --ring-w. Raw value (e.g. 2px).

CSS Rules

.ring-w {
  --tw-ring-width: var(--ring-w);
}

Usage

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

Responsive

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

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

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

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

inset-ring

Sets an inset ring color via --inset-ring.

CSS Rules

.inset-ring {
  --tw-inset-ring-width: 1px;
  --tw-inset-ring-color: 1px;
  --tw-inset-ring-shadow: 1px;
  box-shadow: 1px;
}

Usage

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

Responsive & Dark Mode

Prefix .inset-ring 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:inset-ring" style="--md-inset-ring: /* value */;" />

<element class="dark:sm:inset-ring" style="--dark-sm-inset-ring: /* 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="inset-ring:hover" style="--inset-ring-hover: /* value */;" />

<element class="dark:sm:inset-ring:hover" style="--dark-sm-inset-ring-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="inset-ring: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 inset-ring::before" style="--inset-ring-before: /* value */;" />

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

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

inset-ring/o

Adds a 1px inset ring and sets its color + opacity via --inset-ring and --inset-ring-o.

CSS Rules

.inset-ring\/o {
  --tw-inset-ring-width: 1px;
  --tw-inset-ring-color: 1px;
  --tw-inset-ring-shadow: 1px;
  box-shadow: 1px;
}

Usage

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

Responsive & Dark Mode

Prefix .inset-ring/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:inset-ring/o"
  style="
    --md-inset-ring: /* value */;
    --md-inset-ring-o: /* value */;
  "
></element>

<element
  class="dark:sm:inset-ring/o"
  style="
    --dark-sm-inset-ring: /* value */;
    --dark-sm-inset-ring-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="inset-ring/o:hover"
  style="
    --inset-ring-hover: /* value */;
    --inset-ring-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:inset-ring/o:hover"
  style="
    --dark-sm-inset-ring-hover: /* value */;
    --dark-sm-inset-ring-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="inset-ring/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 inset-ring/o::before"
  style="
    --inset-ring-before: /* value */;
    --inset-ring-o-before: /* value */;
  "
></element>

<element
  class="content-after inset-ring/o::after"
  style="
    --inset-ring-after: /* value */;
    --inset-ring-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="inset-ring/o=value" />

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

inset-ring-w

Sets inset ring width via --inset-ring-w. Raw value.

CSS Rules

.inset-ring-w {
  --tw-inset-ring-width: var(--inset-ring-w);
}

Usage

<element class="inset-ring-w" style="--inset-ring-w: /* value */;" />

Responsive

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

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

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

<!-- Output -->
<element class="inset-ring-w" style="--inset-ring-w: value;" />