Integração com Tailwind

Duas peças: um preset gerado a partir de tokens (zephoraPreset) e um modo headless (unstyled) em cada componente.

Preset

// tailwind.config.js
import { zephoraPreset } from "@zephora/tailwind-preset";

export default {
  presets: [zephoraPreset],
  content: ["./src/**/*.{ts,tsx}"],
};

O preset mapeia os tokens do Zephora para o Tailwind: escalas de cor (primary-500…), espaçamento, radius, tamanhos de fonte com alturas de linha, sombras de elevação, durações/easings de movimento e z-index. Também expõe cores semânticas reativas ao tema, suportadas pelas mesmas variáveis CSS que os componentes estilizados usam — bg-background, text-foreground, bg-accent, border-border, ring-ring — para que os utilitários do Tailwind sigam o tema ativo automaticamente.

Modo headless

Passe unstyled para remover os estilos do Zephora mantendo o comportamento e a acessibilidade. Depois estilize com o Tailwind:

<Button
  unstyled
  className="rounded-lg bg-accent px-4 py-2 text-accent-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
>
  Tailwind button
</Button>

Tailwind v4

Com a configuração CSS-first do Tailwind v4, carregue o preset através de @config, ou importe @zephora/tokens/css e referencie diretamente as variáveis --z-* em bruto no @theme.