Ligero y rápido
Solo 10KB minificado. Carga instantánea sin comprometer funcionalidad.
Tipografía
Jerarquía de títulos
<h1>Encabezado nivel 1</h1>
<h2>Encabezado nivel 2</h2>
<h3>Encabezado nivel 3</h3>
<h4>Encabezado nivel 4</h4>
<h5>Encabezado nivel 5</h5>
<h6>Encabezado nivel 6</h6>
Encabezado nivel 4
Encabezado nivel 5
Encabezado nivel 6
Párrafo con enlace interactivo y estilos de texto.
Texto pequeño en color gris para metadatos
Extra pequeño (xs): 0.75rem
Pequeño (sm): 0.875rem
Base: 1rem
Grande (lg): 1.125rem
Extra grande (xl): 1.25rem
2XL: 1.5rem
Pesos de fuente
<span class="font-normal">Normal (400)</span>
<span class="font-medium">Medium (500)</span>
<span class="font-semibold">Semibold (600)</span>
<span class="font-bold">Bold (700)</span>
Normal (400)
Medium (500)
Semibold (600)
Bold (700)
Formularios
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label for="name">Nombre completo</label>
<input type="text" id="name" placeholder="Juan Pérez">
</div>
<div>
<label for="email">Correo electrónico</label>
<input type="email" id="email" placeholder="correo@ejemplo.com">
</div>
</div>
<fieldset>
<legend>Preferencias de contacto</legend>
<div><input type="radio" id="r1" name="m"><label for="r1">Email</label></div>
<div><input type="radio" id="r2" name="m"><label for="r2">Teléfono</label></div>
</fieldset>
<button type="submit">Enviar</button>
Layouts
Flexbox — justify-between
<div class="flex justify-between items-center bg-gray-50 p-4 rounded-md border">
<span class="font-semibold">Título principal</span>
<small>Metadata</small>
</div>
Título principalMetadata
Flexbox — centrado
<div class="flex justify-center items-center bg-gray-50 p-6 rounded-md border">
<button type="button">Botón centrado</button>
</div>
Grid responsivo — 3 columnas
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="bg-primary-light p-4 rounded-md text-center border border-primary">
<h5 class="text-primary mb-2">Columna 1</h5>
<p class="text-sm mb-0">Contenido adaptable</p>
</div>
...
</div>
Columna 1
Contenido adaptable
Columna 2
Diseño responsivo
Columna 3
Mobile first
Grid — 4 columnas
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<div class="bg-gray-100 p-3 rounded-md text-center text-sm font-medium">1</div>
...
</div>
1
2
3
4
Tarjetas de contenido
<article class="border rounded-lg p-4">
<h4 class="text-primary">Título</h4>
<p class="text-sm text-gray-700 mb-4">Descripción del elemento.</p>
<button type="button" class="w-full">Acción</button>
</article>
Responsive nativo
Sistema de grid y flexbox con breakpoints sm y md incluidos.
Accesible
Soporta lectores de pantalla y cumple con estándares WCAG.
Accesibilidad
Screen Reader Only
<span class="sr-only">Solo lectores de pantalla</span>
<span>Contenido visible normal</span>
Contenido visible solo para lectores de pantalla:
Este texto solo es visible para lectores de pantalla
Contenido visible normal
Usa .sr-only para ocultar visualmente pero mantener accesible
Focus visible
Todos los elementos interactivos tienen indicadores de foco:
Los outlines mejoran la navegación por teclado
Listas
<ul>
<li>Variables CSS nativas</li>
<li>Componentes semánticos HTML5</li>
</ul>
<ol>
<li>Descarga el archivo CSS</li>
<li>Vincula en tu HTML</li>
</ol>
Lista desordenada
- Variables CSS nativas
- Componentes semánticos HTML5
- Reset CSS moderno incluido
- Tipografía escalable y legible
Lista ordenada
- Descarga el archivo CSS
- Vincúlalo en tu HTML
- Usa las clases utilitarias
- Personaliza las variables
Sistema de espaciado
<div class="bg-primary-light border border-primary p-1 rounded-md">p-1: 0.25rem</div>
<div class="bg-primary-light border border-primary p-2 rounded-md">p-2: 0.5rem</div>
<div class="bg-primary-light border border-primary p-4 rounded-md">p-4: 1rem</div>
Padding
p-1: 0.25rem
p-2: 0.5rem
p-3: 0.75rem
p-4: 1rem
Margin
mb-2
mb-3
mb-4
sin margin