Styling

Yöte ships plain CSS inside a cascade layer. There is no Tailwind in the package and no config to inherit.

Layer order

Everything lives in @layer yote. On Tailwind v4 that is not enough on its own: v4 emits real cascade layers, so what decides the winner is layer order, not specificity, and order is set the first time a layer name appears.

Declare it before importing anything. yote has to sit after base, because Tailwind's preflight resets form controls with color: inherit; opacity: 1. Put yote first and preflight wins, which un-hides the invisible input inside the digit input and paints the raw value over the cells. It has to sit before utilities, so your own classes still override ours.

@layer theme, base, yote, components, utilities;

@import 'tailwindcss';

@theme {
  --color-yote-accent: var(--yote-feature-base);
}

Import order matters for the same reason: the file holding that statement has to be read first.

import './globals.css'
import 'yote-ui/styles.css'

Per-part classes

A single className stops being useful the moment you want the cells a different size, so every component takes a classNames object instead. The parts differ per component; the prop name does not.

<PinInput
  classNames={{
    cell: 'data-[active]:ring-4 data-[filled]:bg-neutral-50',
  }}
/>

Tokens

Every colour, radius, shadow and duration is a custom property on :root. Override one and every component follows.

:root {
  --yote-feature-base: #0f6dff;
  --yote-radius-md: 4px;
  --yote-duration: 120ms;
}

Dark values are declared under both prefers-color-scheme and [data-theme="dark"], so a system preference and an explicit toggle both work. Those values are provisional until the dark frames are designed.