A Tour of the Prefixes

Learn how to customize Tailwind by using prefixes and group properties.

We'll cover the following

Tailwind prefixes

Here is a quick tour of Tailwind prefixes We have left out a couple that do not have full browser support:

  • active: Applies when the element is active.
  • checked: Applies if the checkbox or radio button has been checked.
  • dark: Applies if Tailwind thinks it’s in dark mode.
  • disabled: Applies when the element is disabled.
  • focus: Applies when the element has focus, as in a text field.
  • focus-within: Applies to a parent class when any child inside that parent has focus. It’s enabled by default wherever hover is enabled.
  • hover: Applies when the user is hovering the pointer over the element.
  • motion-reduce: Applies if the user has enabled reduced motion on the system. It’s often applied with hover, and we would often have a motion-reduce and a motion-safe variant.
  • motion-safe: Applies if the user has not enabled reduced motion on the system. It’s often applied with hover, and we would often have a motion-reduce and a motion-safe variant.
  • visited: Applies if a link has been visited.

Group properties

Two group properties work by declaring a parent element with the .group class. These variant properties apply when any element in the parent is targeted, not only the element in question:

  • group-focus: Applies to any child when any child under the parent gets the focus.
  • group-hover: Applies to any child when the parent has hovered over. It’s enabled by default wherever hover is enabled.

A few properties are applied based on the order of the elements within their parent. These variants would go on the child element, not the parent element, and are particularly helpful if our template language is generating an entire loop:

  • even: Applies if the element is an even-number child (second, fourth, sixth, and so on).
  • first-child: Applies if the element is the first (top-most) child of its parent element.
  • last-child: Applies if the element is the last (bottom-most) child of its parent element.
  • odd: Applies if the element is an odd-numbered child (first, third, fifth, and so on).

Get hands-on with 1200+ tech skills courses.