Conditional Styling

Conditional Variants

CSS VARIANTS

Hover me

Pure CSS variant — no JS

hover:bg-sky-50 dark:hover:bg-slate-700

No JavaScript — pure CSS with hover:

GROUP VARIANTS

Hover the card

group group-hover:scale-120 group-hover:text-sky-700

Parent group drives all children simultaneously

PEER VARIANTS

peer invisible peer-invalid:visible

Sibling peer drives styling — pure CSS, no JS

More on Tailwind States

Reactive Styles

CN() MERGE

cn('bg-red-500', 'bg-blue-500') → 'bg-blue-500'

tailwind-merge resolves conflicting utility classes — the last applicable class wins.

REACT STATE

Status: Inactive

cn('rounded-xl p-6 transition-colors', isActive && 'bg-blue-500 text-white')

Explicit React state — full programmatic control

More on Tailwind Merge

Style By Attributes

DATA ATTRIBUTE

Status: Inactive

CLASSES

data-active:bg-purple-600 data-active:text-white data-active:border-purple-600

Headless UI libraries (Radix, Headless UI) use data-* attributes to drive styles without class toggling.