Stylewind docs

Configuración y componentes

Utilidades tipo Tailwind + componentes sw-* + IconAwesome.

Tipografía

Escala de texto, pesos, tracking y familias del theme.

text-xs

text-sm — cuerpo pequeño

text-base — cuerpo base

text-lg

text-xl font-semibold

text-2xl font-bold

text-3xl tracking-tight

text-4xl tracking-tighter

font-thin

font-light

font-normal

font-medium

font-semibold

font-bold

font-extrabold

font-sans — The quick brown fox

font-serif — The quick brown fox

font-mono — const x = 1;

leading-tight — línea apretada

leading-relaxed — más aire entre líneas para lectura larga.

uppercase tracking-widest

truncate: este texto largo se corta con puntos suspensivos al final

line-clamp-2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Espaciado (spacing scale)

Escala 0–96: p-*, m-*, gap-*, space-y-*.

1
2
3
4
5
6
8
10
12
16
p-2
p-4
p-6
p-8
space-y-3 · item A
space-y-3 · item B
space-y-3 · item C

-space-x-3 avatars · también: mx-auto, mt-4, px-6, py-2, gap-x-4, gap-y-2

Colores y fondos

primary
secondary
success
warning
danger
info
neutral
primary-100
text-primary-600 text-secondary-600 gradient opacity-50 bg opacity

Layout · Flex · Grid

Flex

flex-1
flex-1
flex-1
justify-between items-center

Grid

1
2
3
4

Width / Height / Aspect

w-24 h-24
w-48
aspect-video
w-full max-w-xs

Position / Z-index

absolute
bottom-right

Display / Overflow

inline-block
overflow-hidden: contenido que no cabe se recorta aquí mismo sin scroll.
overflow-auto: puedes hacer scroll en este bloque cuando el texto es más largo que el alto.

Bordes, radios y sombras

shadow + border
rounded-xl shadow-lg
rounded-full
border-l-4
ring-2
divide-y · A
divide-y · B

Botones

Formularios

IconAwesome + Stylewind

Mezcla clases de utilidades con iconos .ia-*.

Upload 
<i class="ia-solid ia-heart text-danger-500 text-3xl"></i>
<button class="sw-btn-primary">
  <i class="ia-solid ia-download"></i> Download
</button>

Cards

Alpha

Tarjeta con icono y utilidades del tema.

Ver más

Beta

Tarjeta con icono y utilidades del tema.

Ver más

Gamma

Tarjeta con icono y utilidades del tema.

Ver más

Alertas, badges, navbar

Operación correcta.
Revisa esta configuración.
Algo falló.
Nuevo Beta Draft

Tablas

Producto Stock Precio
Stylewind Pro 12 $49
IconAwesome Pack 8 $19

Listas

  • list-disc · item uno
  • item dos
  • item tres
  1. list-decimal · paso 1
  2. paso 2
  3. paso 3

Efectos · Transitions · Transforms

hover:shadow-lg transition

hover:scale-105

hover:bg transition-colors

rotate-12 · -rotate-6 · skew-y-6 · blur-sm

Responsive prefixes

Usa sm: md: lg: xl: 2xl: delante de cualquier utilidad.

1 col → md:2 → lg:3
md:grid-cols-2
lg:grid-cols-3
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">…</div>
<p class="text-sm md:text-base lg:text-lg">…</p>
<div class="hidden md:block">Solo desktop</div>