outline-style

outline-none

Sets outline: none. Removes the outline.

CSS Rules

.outline-none {
  outline: none;
}

Usage

<element class="outline-none" />

Responsive

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

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

outline-hidden

Hides the outline and replaces it with a transparent 2px solid border, useful for accessibility focus rings.

CSS Rules

.outline-hidden {
  outline: 2px solid transparent;
  outline-offset: 2px solid transparent;
}

Usage

<element class="outline-hidden" />

Responsive

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

<element class="md:outline-hidden" />

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="outline-hidden: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="outline-hidden: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 outline-hidden::before" />

<element class="content-after outline-hidden::after" />

outline

Sets outline-color via --outline.

CSS Rules

.outline {
  outline-color: var(--outline);
}

Usage

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

Responsive & Dark Mode

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

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

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

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

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

outline-dashed

Sets outline-style: dashed.

CSS Rules

.outline-dashed {
  outline-style: dashed;
}

Usage

<element class="outline-dashed" />

Responsive

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

<element class="md:outline-dashed" />

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="outline-dashed: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="outline-dashed: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 outline-dashed::before" />

<element class="content-after outline-dashed::after" />

outline-dotted

Sets the outline style to dotted.

CSS Rules

.outline-dotted {
  outline-style: dotted;
}

Usage

<element class="outline-dotted" />

Responsive

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

<element class="md:outline-dotted" />

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="outline-dotted: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="outline-dotted: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 outline-dotted::before" />

<element class="content-after outline-dotted::after" />

outline-double

Sets the outline style to double.

CSS Rules

.outline-double {
  outline-style: double;
}

Usage

<element class="outline-double" />

Responsive

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

<element class="md:outline-double" />

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="outline-double: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="outline-double: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 outline-double::before" />

<element class="content-after outline-double::after" />