Tailwind CSS

El framework CSS utility-first que revoluciona cómo construimos interfaces. Clases pequeñas, poder ilimitado.

Creado en 2017
80k+ GitHub stars
Filosofía Utility-First
JIT Compiler

🌬️ ¿Qué es Tailwind CSS?

Definición

Framework CSS utility-first. En lugar de componentes prediseñados, aplicas clases utilitarias directamente en el HTML.

"No necesitas escribir CSS personalizado, solo combinas clases."

Historia

Creado por Adam Wathan y Steve Schoger (2017). Nació de la frustración con metodologías como BEM y Bootstrap. v3 usa JIT (Just-In-Time) compiler.

Utility-First

Cada clase hace UNA sola cosa pequeña (flex, p-4, text-lg). Combinadas construyen interfaces complejas sin escribir CSS propio.

Ventajas Clave

  • 🔵 No naming de clases CSS
  • 🔵 Diseño directamente en HTML
  • 🔵 Purga CSS automática (solo genera lo que usas)
  • 🔵 Sistema de diseño consistente
  • 🔵 Dark mode con dark: prefix
  • 🔵 Responsive con sm: md: lg: xl:

⚖️ Tailwind vs CSS Tradicional

Aspecto CSS Tradicional Tailwind CSS
Dónde escribes estilos En archivos .css separados Directamente en el HTML
Naming de clases Debes inventar nombres (BEM, etc.) No necesitas nombrar nada
Reutilización Con componentes CSS Con componentes de framework (React/Vue)
Tamaño del bundle Todo el CSS que escribas Solo las clases que USAS (purga JIT)
Curva de aprendizaje Baja si ya sabes CSS Media (memorizar clases utilitarias)
Consistencia visual Depende del desarrollador Sistema de diseño integrado ✓

⬇️ Métodos de Instalación

CDN — Prueba rápida (sin configuración)

Ideal para prototipos y aprendizaje. Solo agrega un <script> en el <head>.
No recomendado para producción porque carga TODO Tailwind sin purgar.

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

NPM — Proyecto Real (Recomendado)

Instalación completa con JIT compiler. Genera solo el CSS que usas.

Terminal 
# Instalar Tailwind
npm install -D tailwindcss
npx tailwindcss init
tailwind.config.js 
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: { extend: {} },
  plugins: [],
}
Terminal — Compilar 
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Vite + Tailwind (Framework moderno)

Setup recomendado para proyectos con React, Vue o Astro.

Terminal 
npm create vite@latest mi-app -- --template vanilla
cd mi-app && npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Astro + Tailwind

Astro tiene integración oficial con Tailwind. Se instala en un solo comando con el CLI de Astro.

Terminal 
# Crear proyecto Astro
npm create astro@latest mi-app
cd mi-app

# Agregar integración oficial de Tailwind
npx astro add tailwind

Esto configura automáticamente tailwind.config.mjs y astro.config.mjs. ¡Sin pasos manuales!

Vue 3 + Tailwind

Con Vite como bundler, Vue y Tailwind se integran perfectamente en pocos pasos.

Terminal 
# Crear proyecto Vue con Vite
npm create vite@latest mi-app -- --template vue
cd mi-app && npm install

# Instalar Tailwind + dependencias
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js 
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts}"],
  theme: { extend: {} },
  plugins: [],
}

Agrega @tailwind base; @tailwind components; @tailwind utilities; en src/style.css e impórtalo en main.js.

Angular + Tailwind

Angular CLI permite agregar Tailwind usando ng add o con instalación manual desde Angular 11.2+.

Terminal 
# Crear proyecto Angular
npm install -g @angular/cli
ng new mi-app && cd mi-app

# Instalar Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
tailwind.config.js 
module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: { extend: {} },
  plugins: [],
}

Agrega las directivas @tailwind en src/styles.css (el archivo de estilos global de Angular).

📄 Estructura CSS Base

input.css 
@tailwind base;
@tailwind components;
@tailwind utilities;

🧰 Clases Utilitarias Esenciales

Layout (Diseño)
container
Max-width según breakpoint
block
display: block
inline-block
display: inline-block
hidden
display: none
absolute
position: absolute
relative
position: relative
fixed
position: fixed
sticky
position: sticky
top-0
top: 0px
inset-0
top, right, bottom, left: 0px
z-10
z-index: 10
overflow-hidden
overflow: hidden
overflow-y-auto
overflow-y: auto
Flexbox & Grid
flex
display: flex
flex-col
flex-direction: column
flex-row
flex-direction: row
flex-wrap
flex-wrap: wrap
items-center
align-items: center
items-start
align-items: flex-start
justify-center
justify-content: center
justify-between
justify-content: space-between
justify-end
justify-content: flex-end
flex-1
flex: 1 1 0%
grid
display: grid
grid-cols-2
repeat(2, 1fr)
grid-cols-3
repeat(3, 1fr)
col-span-2
grid-column: span 2
gap-4
gap: 1rem (16px)
Espaciado
p-0
padding: 0px
p-2
padding: 0.5rem (8px)
p-4
padding: 1rem (16px)
p-8
padding: 2rem (32px)
px-4
padding horizontal
py-2
padding vertical
pt-4
padding-top: 1rem
m-0
margin: 0px
m-4
margin: 1rem (16px)
mx-auto
margin: 0 auto (centrar)
my-8
margin vertical
mt-4
margin-top: 1rem
space-x-4
margin horizontal entre hijos
space-y-2
margin vertical entre hijos
Tamaños (Sizing)
w-full
width: 100%
w-screen
width: 100vw
w-1/2
width: 50%
w-64
width: 16rem (256px)
max-w-md
max-width: 28rem (448px)
h-full
height: 100%
h-screen
height: 100vh
h-auto
height: auto
h-32
height: 8rem (128px)
min-h-screen
min-height: 100vh
Tipografía
text-xs
font-size: 0.75rem
text-sm
font-size: 0.875rem
text-base
font-size: 1rem
text-lg
font-size: 1.125rem
text-xl
font-size: 1.25rem
text-2xl
font-size: 1.5rem
text-4xl
font-size: 2.25rem
font-thin
font-weight: 100
font-normal
font-weight: 400
font-semibold
font-weight: 600
font-bold
font-weight: 700
font-black
font-weight: 900
text-center
text-align: center
text-left
text-align: left
text-right
text-align: right
uppercase
text-transform: uppercase
capitalize
text-transform: capitalize
tracking-wide
letter-spacing: 0.025em
leading-relaxed
line-height: 1.625
leading-tight
line-height: 1.25
Colores
text-slate-500
color gris
text-sky-400
color azul cielo
text-purple-400
color morado
text-green-400
color verde
text-red-400
color rojo
text-yellow-400
color amarillo
text-transparent
color: transparent
bg-slate-900
background oscuro
bg-white
background blanco
bg-sky-500
background azul cielo
bg-gradient-to-r
gradiente →
from-sky-400
color inicial gradiente
via-blue-500
color medio gradiente
to-purple-500
color final gradiente
Bordes & Sombras
rounded
border-radius: 0.25rem
rounded-md
border-radius: 0.375rem
rounded-lg
border-radius: 0.5rem
rounded-xl
border-radius: 0.75rem
rounded-full
border-radius: 9999px
border
border-width: 1px
border-2
border-width: 2px
border-t
border-top-width: 1px
border-sky-400
border-color
shadow-sm
box-shadow suave
shadow
box-shadow normal
shadow-lg
box-shadow grande
shadow-xl
box-shadow extra grande
ring-2
outline ring 2px
ring-sky-400
color del ring
Efectos, Filtros & Transiciones
opacity-0
opacity: 0
opacity-50
opacity: 0.5
opacity-100
opacity: 1
blur-sm
filter: blur(4px)
blur
filter: blur(8px)
backdrop-blur-md
efecto glassmorphism
transition
transition: all 150ms
transition-colors
solo transiciona colores
duration-200
transition-duration: 200ms
duration-300
transition-duration: 300ms
ease-in-out
transition-timing-function
Transformaciones
scale-95
transform: scale(0.95)
scale-100
transform: scale(1)
scale-105
transform: scale(1.05)
scale-110
transform: scale(1.1)
rotate-90
transform: rotate(90deg)
rotate-180
transform: rotate(180deg)
-translate-y-1
transform: translateY(-0.25rem)
translate-x-4
transform: translateX(1rem)
Interacción & Estados
cursor-pointer
cursor: pointer
cursor-not-allowed
cursor: not-allowed
select-none
user-select: none
pointer-events-none
ignora clics
hover:bg-sky-600
bg en hover
hover:scale-105
scale en hover
hover:opacity-80
opacity al hover
focus:outline-none
quita outline en focus
focus:ring-2
añade ring en focus
active:scale-95
scale en clic activo
animate-spin
animación girar rotación
animate-pulse
animación pulso
animate-bounce
animación rebote
Vista Previa de Utilidades
text-sky-400
text-purple-400
text-green-400

📱 Diseño Responsive

Tailwind es mobile-first. Las clases sin prefijo aplican a TODOS los tamaños. Los prefijos sm: md: lg: xl: 2xl: aplican SOLO desde ese breakpoint hacia arriba.

(sin prefijo) Mobile primero < 640px
sm: Small screens ≥ 640px
md: Medium screens ≥ 768px
lg: Large screens ≥ 1024px
xl: Extra large ≥ 1280px
2xl: 2X Extra large ≥ 1536px

🧪 Ejemplos Responsive

Grid Responsive

HTML + Tailwind 
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-sky-500 p-4 rounded-lg">Columna 1</div>
  <div class="bg-sky-500 p-4 rounded-lg">Columna 2</div>
  <div class="bg-sky-500 p-4 rounded-lg">Columna 3</div>
</div>

Tipografía Responsive

HTML + Tailwind 
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Título que crece con la pantalla
</h1>
<p class="text-sm md:text-base lg:text-lg text-gray-400">
  Texto que también se adapta
</p>

Flex que cambia de dirección

HTML + Tailwind 
<div class="flex flex-col md:flex-row items-center gap-6">
  <img class="w-full md:w-48 rounded-xl" src="..." alt=""/>
  <div>
    <h2 class="text-xl font-bold">Título</h2>
    <p class="text-gray-400">En móvil imagen arriba, en desktop al lado.</p>
  </div>
</div>

🌙 Dark Mode en Tailwind

Tailwind soporta dark mode con el prefijo dark:. Configuras si se activa automáticamente (según preferencia del OS) o manualmente (con clase .dark en <html>).

Configurar Dark Mode en tailwind.config.js

tailwind.config.js 
module.exports = { darkMode: 'class', ... }

Con 'class': agregas la clase dark al <html> desde JS.
Con 'media': usa prefers-color-scheme del sistema automáticamente.

Usando el prefix dark: en clases

HTML + Tailwind 
<div class="bg-white dark:bg-slate-900 text-gray-900 dark:text-white p-6 rounded-xl">
  <h2 class="text-xl font-bold text-sky-600 dark:text-sky-400">Título</h2>
  <p class="text-gray-600 dark:text-gray-300">
    Este texto cambia de color según el tema.
  </p>
  <button class="bg-sky-500 hover:bg-sky-600 dark:bg-sky-600
           dark:hover:bg-sky-500 text-white px-4 py-2 rounded-lg">
    Botón adaptable
  </button>
</div>

🛠️ Proyecto Práctico — Card de Perfil

Construye una card de perfil completa usando solo Tailwind.

Card de Perfil Completa 
<div class="max-w-sm mx-auto bg-white dark:bg-slate-800
        rounded-2xl shadow-xl overflow-hidden">
  <!-- Banner superior -->
  <div class="h-24 bg-gradient-to-r from-sky-400 to-purple-500"></div>
  <div class="px-6 pb-6 -mt-10">
    <img class="w-20 h-20 rounded-full border-4 border-white
              dark:border-slate-800 object-cover"
         src="https://i.pravatar.cc/80" alt="Avatar"/>
    <h2 class="mt-3 text-xl font-bold text-gray-900 dark:text-white">
      Jordy Prada
    </h2>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      Full Stack Developer · UFPS
    </p>
    <div class="flex gap-2 mt-4">
      <span class="bg-sky-100 dark:bg-sky-900 text-sky-700
              dark:text-sky-300 text-xs px-3 py-1 rounded-full">
        JavaScript
      </span>
      <span class="bg-purple-100 dark:bg-purple-900 text-purple-700
              dark:text-purple-300 text-xs px-3 py-1 rounded-full">
        Tailwind
      </span>
      <span class="bg-green-100 dark:bg-green-900 text-green-700
              dark:text-green-300 text-xs px-3 py-1 rounded-full">
        React
      </span>
    </div>
    <button class="mt-5 w-full bg-sky-500 hover:bg-sky-600 text-white
              font-semibold py-2 rounded-xl transition duration-200">
      Ver Portafolio
    </button>
  </div>
</div>