Tailwind

Hover + focus variant

We call this hocus, it combines the hover and focus-visible variants. Use this to style elements that should be styled when hovered or focused.

@custom-variant hocus (&:is(:hover, :focus-visible));

Set line-height per font size

Configure the line-height for each font size.

@theme {
  --text-tiny: 0.625rem;
  --text-tiny--line-height: 1.5rem;
  --text-tiny--letter-spacing: 0.125rem;
  --text-tiny--font-weight: 500;
}

Reference font-size docs

Ancestor state styling

Use the in-* variant to style an element based on an ancestor's state or class. This is useful for things like drawer overlays or conditional layouts.

<div class="in-[.notifs-drawer-open]:opacity-100">

This targets the element when it's inside an ancestor with the .notifs-drawer-open class.

Reference in-* variant docs

Detect pointer type (mouse vs touch)

Use the pointer media feature to style elements based on whether the user has a fine pointer (mouse) or coarse pointer (touch screen).

@variant has-mouse {
  @media (pointer: fine) {
    @slot;
  }
}
 
@variant has-touch-screen {
  @media (pointer: coarse) {
    @slot;
  }
}

<input
  type="checkbox"
  class="has-mouse:size-4 has-touch-screen:size-8"
/>

Reference pointer media feature docs