SDK · Clases tei-*

Catálogo de `tei-*`

Una clase agrupa varias utilidades Tailwind. HTML limpio en cualquier framework — Astro, React, Vue, Blade, HTML puro — con la misma API. Las utilidades Tailwind crudas siguen disponibles para casos puntuales.

Estable ~50 clases Tailwind v4 obligatorio

Importación

Una línea para tener preset + capa tei-*. Sin instalar nada.

css

@import "tailwindcss";
@import url("https://estilo.dimensiontei.com/sdk/latest/tailwind-full.css");
@custom-variant dark (&:where(.dark, .dark *));

Si ya importa tailwind.css por separado:

css

/* Si ya importa el preset y solo quiere la capa tei-* */
@import "tailwindcss";
@import url("https://estilo.dimensiontei.com/sdk/latest/tailwind.css");
@import url("https://estilo.dimensiontei.com/sdk/latest/components.css");
@custom-variant dark (&:where(.dark, .dark *));

Botones · tei-btn

html

<button class="tei-btn tei-btn-primary tei-btn-md">Aceptar</button>
<button class="tei-btn tei-btn-secondary tei-btn-md">Cancelar</button>
<button class="tei-btn tei-btn-ghost tei-btn-sm">Ver más</button>
<button class="tei-btn tei-btn-danger tei-btn-md">Eliminar</button>

Cards · tei-card + tei-stripe-*

Marca

Logo, símbolo y mascota.

Color

Paleta y tokens semánticos.

Voz y tono

Canario y tratamiento de usted.

html

<a class="tei-card tei-card-link tei-stripe-cyan" href="/marca">
  <h3 class="font-extrabold [color:var(--color-text-primary)]">Marca</h3>
  <p class="text-sm [color:var(--color-text-secondary)]">Logo, símbolo y mascota.</p>
</a>

Inputs · tei-field + tei-label + tei-input

Correo

Use su correo corporativo.

html

<div class="tei-field">
  <label class="tei-label tei-label-required" for="email">Correo</label>
  <input id="email" class="tei-input" type="email" placeholder="usuario@dimensiontei.com" />
  <p class="tei-hint">Use su correo corporativo.</p>
</div>

Header de página · tei-page-header

html

<header class="tei-page-header">
  <p class="tei-kicker tei-kicker-cyan">Marca · Logo</p>
  <h1 class="tei-h1">
    Logo y <span class="text-gradient-cyan">símbolo</span>
  </h1>
  <p class="tei-lead">Reglas de uso del logo en piezas institucionales.</p>
</header>

Layout · tei-stack, tei-cluster, tei-grid-{2,3,4}

html

<!-- Stack vertical con gap consistente -->
<div class="tei-stack">
  <div class="tei-card">Card 1</div>
  <div class="tei-card">Card 2</div>
</div>

<!-- Cluster horizontal de chips/buttons -->
<div class="tei-cluster">
  <button class="tei-btn tei-btn-secondary tei-btn-sm">Filtro</button>
  <button class="tei-btn tei-btn-secondary tei-btn-sm">Otro</button>
</div>

<!-- Grid responsive 1→3 columnas -->
<div class="tei-grid-3">
  <div class="tei-card">A</div>
  <div class="tei-card">B</div>
  <div class="tei-card">C</div>
</div>

Las utilidades de layout cubren el 90 % de los casos. Para necesidades fuera de patrón, use flex / grid de Tailwind directamente.

Listado completo de clases

Tipografía

tei-h1, tei-h2, tei-h3
tei-lead
tei-kicker, tei-kicker-{cyan,blue,yellow,coral,ink}
tei-mono
tei-page-header
tei-prose

Layout

tei-stack, tei-stack-{sm,lg,xl}
tei-cluster, tei-cluster-{sm,lg}
tei-grid-2, tei-grid-3, tei-grid-4

Botón

tei-btn
tei-btn-{primary,secondary,ghost,danger}
tei-btn-{sm,md,lg}
tei-btn-full

Inputs

tei-field, tei-label, tei-label-required
tei-input, tei-input-error
tei-textarea, tei-select
tei-input-wrap, tei-input-icon-{leading,trailing}
tei-hint, tei-error-message
tei-switch

Cards y badges

tei-card, tei-card-elevated, tei-card-soft, tei-card-link
tei-stripe-{cyan,blue,yellow,coral,ink}
tei-badge, tei-badge-md, tei-badge-uppercase
tei-badge-{neutral,cyan,blue,yellow,coral,success,danger}
tei-tag

Iconos y utilidades

tei-icon-{cyan,blue,yellow,coral,ink}
tei-divider
tei-skeleton
tei-focus-ring

¿Cuándo usar tei-* y cuándo Tailwind raw?

Use clases tei-* para los patrones canónicos del sistema — botones, cards, inputs, badges, layout. Reserve las utilidades Tailwind crudas (flex, [background:var(...)]) para los casos puntuales que no encajen en ningún patrón. La capa tei-* no obliga, agrega.