Search⌘ K
AI Features

A Tour of the Prefixes

Explore how to use Tailwind CSS prefixes to apply conditional styling based on user interaction and element states. Understand prefix variants like hover, focus, dark mode, and group-based selectors to customize your designs effectively.

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
...