Curso gratuito de Tailwind CSS

Tailwind Demos

// utility-first · el concepto base

Utility-First

En lugar de escribir CSS, aplicas clases de utilidad directamente al HTML. Cada clase hace una sola cosa. Sin CSS personalizado, sin nombres de clase inventados.

bg-* text-* p-* m-* rounded-* border shadow-*

Demo en vivo

❶ CSS tradicional

.card {
  background: #1e293b;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
}

❷ Con Tailwind

<div class="bg-slate-800 p-6 rounded-lg border border-slate-700">

❸ Resultado visual

bg-slate-800 p-6 rounded-lg border border-slate-700

bg-lime-950 p-4 rounded border-l-4 border-lime-400

px-5 py-3 rounded-full

Escala de spacing (1 = 4px)

h-1=4px h-4=16px h-8=32px h-20=80px

Escala de color (bg-sky-*)

100→950

Código importante

<!-- Colores: bg-{color}-{shade} -->
<div class="bg-slate-800"></div>
<div class="bg-lime-400"></div>
<div class="text-neutral-100"></div>

<!-- Spacing: p m (1 unidad = 4px) -->
<div class="p-4"></div>   <!-- padding: 16px -->
<div class="px-6 py-3"></div> <!-- x=24px y=12px -->
<div class="mt-8 mb-4"></div> <!-- margin top/bottom -->

<!-- Bordes y redondeo -->
<div class="border border-slate-700"></div>
<div class="border-l-4 border-lime-400"></div>
<div class="rounded"></div>    <!-- 4px -->
<div class="rounded-lg"></div> <!-- 8px -->
<div class="rounded-full"></div><!-- 9999px -->

<!-- Sombras -->
<div class="shadow"></div>
<div class="shadow-lg"></div>
<div class="shadow-xl"></div>

<!-- Width / Height -->
<div class="w-full"></div>   <!-- 100% -->
<div class="w-1/2"></div>    <!-- 50% -->
<div class="w-64"></div>     <!-- 256px -->
<div class="min-h-screen"></div>

// Valores arbitrarios con []

<div class="w-[350px] bg-[#1a1a2e] text-[13px]">

Útil cuando el valor no existe en la escala.