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

Slot variant (data-slot targeting)

Use matchVariant to create a slot-* variant that targets children by their data-slot attribute. This gives you a clean, composable way to style slotted elements from a parent class — no need to write nested selectors or reach into child components.

import type { PluginAPI } from "tailwindcss/plugin"
 
export default function ({ matchVariant }: PluginAPI) {
  matchVariant("slot", (value: string) => `& [data-slot="${value}"]`)
}

Load it via @plugin in your CSS:

@plugin "./styles/slot-variant.ts";

Then use it to style slotted children from the parent:

<button class="slot-[icon]:size-4 slot-[label]:font-medium">
  <svg data-slot="icon" />
  <span data-slot="label">Click me</span>
</button>

Because matchVariant supports arbitrary values via bracket syntax, you can target any data-slot value without registering it upfront.

Reference The Slot Approach