Introducción a Tailwind CSS

¿Qué es Tailwind CSS?

Tailwind CSS es un framework CSS utility-first que proporciona clases utilitarias de bajo nivel para construir diseños personalizados directamente en tu HTML. A diferencia de frameworks tradicionales como Bootstrap que te dan componentes pre-diseñados, Tailwind te da los bloques de construcción para crear cualquier diseño.

¿Por qué Tailwind CSS?

Tailwind se ha convertido en uno de los frameworks CSS más populares porque ofrece varias ventajas:

• Desarrollo rápido - Construye interfaces personalizadas sin escribir CSS propio
• Consistencia - Los tokens de diseño mantienen espaciado, colores y tipografías consistentes
• Diseño responsivo - Modificadores responsivos integrados facilitan el diseño mobile-first
• Bundle pequeño en producción - Los estilos no usados se eliminan automáticamente
• Sin cambio de contexto - Estiliza directamente en tu HTML/JSX

Enfoque Utility-First

En lugar de escribir clases CSS personalizadas, aplicas clases utilitarias pre-existentes directamente:

<!-- Enfoque tradicional con CSS -->
<div class="card">
  <h2 class="card-title">Hello World</h2>
  <p class="card-description">This is a card component.</p>
</div>

<style>
.card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.card-description {
  color: #666;
}
</style>

<!-- Enfoque con Tailwind CSS -->
<div class="bg-white rounded-lg p-6 shadow-md">
  <h2 class="text-2xl font-bold mb-2">Hello World</h2>
  <p class="text-gray-600">This is a card component.</p>
</div>

Instalación de Tailwind CSS

La forma más sencilla de empezar es con el CLI de Tailwind:

# Crear un nuevo proyecto
npm init -y

# Instalar Tailwind CSS
npm install -D tailwindcss

# Inicializar configuración de Tailwind
npx tailwindcss init

Configuración

Tailwind genera un archivo tailwind.config.js donde configuras tu proyecto:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Agregar Directivas de Tailwind

Crea un archivo CSS con las directivas de Tailwind:

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Generar tu CSS

Ejecuta el CLI de Tailwind para generar tu CSS:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Tailwind con Frameworks

Tailwind se integra perfectamente con frameworks populares:

# Next.js
npx create-next-app@latest --tailwind

# Vite + React
npm create vite@latest my-app -- --template react
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Conceptos Clave para Aprender

A medida que avances con Tailwind, aprenderás:

• Utilidades de espaciado y tamaño (padding, margin, width, height)
• Utilidades tipográficas (tamaño de fuente, peso, color)
• Layouts con Flexbox y Grid
• Diseño responsivo con prefijos de breakpoints
• Variantes de estado (hover, focus, active)
• Soporte para modo oscuro
• Configuración y theming personalizados