¿Cuál es la forma más rápida de probar Tailwind en una demo sin build tool?

El Play CDN permite probar Tailwind al instante y validar diseño antes de pasar a un setup de producción.

Tailwind desde cero: setup con CDN y enfoque utility-first

Aprende a arrancar con Tailwind de forma práctica, entendiendo su filosofía utility-first y montando una demo funcional con CDN.

¿Cuánto sabes de Tailwind CSS?

📘 Teoría

Qué significa utility-first en la práctica

En Tailwind, cada clase hace una sola cosa y eso reduce ambigüedad al mantener estilos.

Clases como p-6, rounded-xl o text-slate-100 describen comportamiento visual directo sin depender de hojas CSS gigantes.

Esto facilita revisar código en equipo porque el estilo vive junto al markup que afecta.

Cuando el sistema de diseño está bien definido, componer nuevas pantallas es más rápido y consistente.

Menos salto mental entre HTML y CSS.
Mayor velocidad para prototipado y refinado.
Consistencia visual más fácil de mantener.
Buen encaje con diseño responsive.

Setup inmediato con CDN

Este setup te permite practicar ya mismo con preview funcional en el editor.

Plantilla base con Tailwind CDN

<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <title>Tailwind Demo</title>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100 grid place-items-center p-6">
  <article class="w-full max-w-md rounded-2xl border border-slate-800 bg-slate-900/70 p-6 shadow-xl">
    <h1 class="text-2xl font-bold tracking-tight">Hola Tailwind</h1>
    <p class="mt-2 text-slate-300">Tu primer bloque utility-first está funcionando.</p>
    <button class="mt-5 rounded-lg bg-indigo-500 px-4 py-2 font-medium text-white hover:bg-indigo-400">Probar</button>
  </article>
</body>
</html>

Primer vistazo responsive

Tailwind aplica variantes por breakpoint con prefijos simples como sm:, md: o lg:.

Puedes cambiar tipografía, layout o spacing según ancho sin salir del HTML.

Por ejemplo, text-xl md:text-3xl escala tamaño en escritorio manteniendo lectura en móvil.

Esta forma de trabajar reduce CSS condicional disperso y hace más predecible el mantenimiento.

1 Qué significa utility-first en la práctica 2 Setup inmediato con CDN 3 Primer vistazo responsive

🧪 Aprende probando

Ejemplo Demo: tarjeta de presentación con Tailwind CDN Ejemplo completo con CDN incluido para que el preview renderice utilidades Tailwind en tiempo real.

⌄

Ejemplo Demo interactiva: utility-first y escalas base Explora la filosofía utility-first con spacing y color en una demo visual de referencia.

⌄

🏁 Retos

Reto Reto: completar una hero mínima Añade clases Tailwind para fondo oscuro y botón visible usando el CDN ya incluido.

⌄

🧰 Recursos

Enlaces útiles

Tailwind CSS Installation (Play CDN) Core Concepts

Test

Comprueba tus conocimientos con un test sobre Tailwind CSS.

Test de Tailwind CSS

Recursos del curso 16

🎬 Vídeos 🔗 Enlaces 🧩 Snippets

Lección 02

Colores, tipografía y espaciado: los cimientos visuales

›