Toolbox

Tailwind

A collection of Tailwind CSS classes and utilities.

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.

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

Set line-height per font size

Configure the line-height for each font size.

globals.css
@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