Tailwind CSS — Conceptos, Código, Videos y Cuestionario

¿Qué es Tailwind CSS?

Tailwind es un framework de utilidades CSS (clases pequeñas y composables) que te permite construir interfaces sin salir del HTML. Nada de componentes pre-hechos; tú compones.

Uso por CDN y concepto de utilidades

CDN (rápido para clase)

<script src="https://cdn.tailwindcss.com"></script>

Ideal para demos y prototipos.
En producción, lo normal es compilar (PostCSS) para eliminar CSS no usado (purge).

Utilidades (ejemplos)

Espaciado: p-4, m-2, gap-3
Tipografía: text-xl, font-bold, text-slate-600
Estilo: bg-blue-600, text-white, rounded-xl, shadow
Layout: flex, grid, items-center, justify-between

Responsive, estados y modo oscuro

Responsive

Prefijos: sm: md: lg: xl: 2xl:
Ej: text-base md:text-xl, grid-cols-1 md:grid-cols-3

Estados/variantes

Hover/focus/active: hover:bg-slate-200, focus:ring
Oscuro por clase: dark: (añadir class="dark" en html/body)

Arbitrary values y composición

Valores arbitrarios

p-[18px], bg-[rgb(10,20,30)], shadow-[0_2px_10px_rgba(0,0,0,.2)]
Útiles cuando la escala predefinida no alcanza.

Buenas prácticas

Componentizar con partials o con clases “@apply” (cuando compilas).
Evita CSS personalizado si ya existe utilidad equivalente.

Tip Diseña en bloques: contenedor → layout → espaciado → color → tipografía → estados.

Ejemplos de Código + Demos

Card responsiva con Tailwind

HTML (utilidades)

<div class="max-w-xl mx-auto p-4 bg-white rounded-xl shadow grid gap-3

            md:grid-cols-2">

  <div class="aspect-video bg-slate-200 rounded-lg"></div>

  <div>

    <h3 class="text-xl font-bold text-slate-800">Título</h3>

    <p class="text-slate-600">Descripción breve con buena legibilidad.</p>

    <button class="mt-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">

      Acción

    </button>

  </div>

</div>

Demo

Título

Descripción breve con buena legibilidad.

Grid 3 columnas en md

HTML

<div class="grid grid-cols-1 md:grid-cols-3 gap-3">

  <div class="p-4 bg-white rounded-lg shadow">A</div>

  <div class="p-4 bg-white rounded-lg shadow">B</div>

  <div class="p-4 bg-white rounded-lg shadow">C</div>

</div>

Demo

A

B

C

Estados, variantes y dark mode

HTML

<div class="flex items-center gap-3">

  <button class="px-4 py-2 bg-slate-800 text-white rounded hover:bg-slate-700 focus:ring">Hover/Focus</button>

  <span class="px-3 py-1 rounded bg-amber-100 text-amber-800 dark:bg-amber-300 dark:text-amber-900">Etiqueta</span>

</div>

Para probar dark: añade class="dark" al elemento <html> o <body>.

Demo

Etiqueta

Videos Recomendados

Intro a Tailwind, mentalidad de utilidades, responsive y dark mode.

Introducción a Tailwind CSS

Layout con Grid/Flex + Responsive

Cuestionario (5 preguntas al azar)

Pulsa “Nuevo cuestionario” para generar 5 preguntas del banco de 25. Responde y “Calificar”.

Banco: 25