Guia practica de Tailwind CSS - CSS con enfoque utility-first | Tutoriales

Lo que aprenderas en este tutorial

✓ Conceptos basicos de Tailwind CSS
✓ Layout y espaciado
✓ Diseno responsive
✓ Colores y tipografia
✓ Componentes de UI practicos
✓ Personalizacion y optimizacion

Requisitos previos

Conocimientos basicos de HTML y CSS
Node.js instalado

Configuracion del proyecto

# Crear proyecto
mkdir tailwind-tutorial
cd tailwind-tutorial
npm init -y

# Instalar Tailwind CSS
npm install -D tailwindcss postcss autoprefixer

# Crear archivos de configuracion
npx tailwindcss init -p

tailwind.config.js

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

src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Comando de build

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

Step 1: Clases de utilidad basicas

Espaciado (Padding y Margin)

<!-- Padding -->
<div class="p-4">padding: 1rem en todas las direcciones</div>
<div class="px-4">padding: 1rem izquierda y derecha</div>
<div class="py-2">padding: 0.5rem arriba y abajo</div>
<div class="pt-8">padding: 2rem arriba</div>
<div class="pb-6">padding: 1.5rem abajo</div>

<!-- Margin -->
<div class="m-4">margin: 1rem en todas las direcciones</div>
<div class="mx-auto">margin izquierda y derecha auto (centrado)</div>
<div class="my-8">margin: 2rem arriba y abajo</div>
<div class="mt-4">margin: 1rem arriba</div>
<div class="mb-2">margin: 0.5rem abajo</div>

<!-- Margin negativo -->
<div class="-mt-4">margin: -1rem arriba</div>

<!-- Escala de espaciado -->
<!--
  0: 0px
  1: 0.25rem (4px)
  2: 0.5rem (8px)
  3: 0.75rem (12px)
  4: 1rem (16px)
  5: 1.25rem (20px)
  6: 1.5rem (24px)
  8: 2rem (32px)
  10: 2.5rem (40px)
  12: 3rem (48px)
  16: 4rem (64px)
  ...
-->

Tamano (Width y Height)

<!-- Width -->
<div class="w-full">100%</div>
<div class="w-1/2">50%</div>
<div class="w-1/3">33.333%</div>
<div class="w-64">16rem (256px)</div>
<div class="w-screen">100vw</div>
<div class="max-w-md">max-width: 28rem</div>
<div class="min-w-0">min-width: 0</div>

<!-- Height -->
<div class="h-screen">100vh</div>
<div class="h-full">100%</div>
<div class="h-64">16rem</div>
<div class="min-h-screen">min-height: 100vh</div>

Colores

<!-- Color de texto -->
<p class="text-black">Negro</p>
<p class="text-white">Blanco</p>
<p class="text-gray-500">Gris 500</p>
<p class="text-blue-600">Azul 600</p>
<p class="text-red-500">Rojo 500</p>

<!-- Color de fondo -->
<div class="bg-white">Fondo blanco</div>
<div class="bg-gray-100">Fondo gris claro</div>
<div class="bg-blue-500">Fondo azul</div>

<!-- Transparencia -->
<div class="bg-black/50">Negro con 50% de transparencia</div>
<div class="text-blue-500/75">Texto azul con 75% de transparencia</div>

<!-- Color de borde -->
<div class="border border-gray-300">Borde gris</div>

Step 2: Flexbox y Grid

Flexbox

<!-- Flex basico -->
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Direccion -->
<div class="flex flex-row">Horizontal (por defecto)</div>
<div class="flex flex-col">Vertical</div>
<div class="flex flex-row-reverse">Horizontal (inverso)</div>

<!-- Alineacion -->
<div class="flex justify-start">Alinear a la izquierda</div>
<div class="flex justify-center">Centro</div>
<div class="flex justify-end">Alinear a la derecha</div>
<div class="flex justify-between">Distribuir en extremos</div>
<div class="flex justify-around">Distribucion uniforme</div>

<div class="flex items-start">Alinear arriba</div>
<div class="flex items-center">Alinear al centro</div>
<div class="flex items-end">Alinear abajo</div>

<!-- Centrado completo -->
<div class="flex items-center justify-center h-screen">
  Completamente centrado
</div>

<!-- Wrap -->
<div class="flex flex-wrap">
  Con wrap
</div>

<!-- Gap -->
<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Elementos hijos de Flex -->
<div class="flex">
  <div class="flex-1">Crecer/encoger uniformemente</div>
  <div class="flex-none">No crecer ni encoger</div>
  <div class="flex-grow">Crecer</div>
  <div class="flex-shrink-0">No encoger</div>
</div>

Grid

<!-- Grid basico -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<!-- Especificar numero de columnas -->
<div class="grid grid-cols-1">1 columna</div>
<div class="grid grid-cols-2">2 columnas</div>
<div class="grid grid-cols-4">4 columnas</div>
<div class="grid grid-cols-12">12 columnas</div>

<!-- Numero de filas -->
<div class="grid grid-rows-3">3 filas</div>

<!-- Span -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">2 columnas</div>
  <div>1 columna</div>
  <div>1 columna</div>
  <div class="col-span-4">4 columnas (ancho completo)</div>
</div>

<!-- Auto-fit -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <!-- Ajuste automatico con minimo de 200px -->
</div>

Step 3: Diseno responsive

Breakpoints

<!--
  sm: 640px o mas
  md: 768px o mas
  lg: 1024px o mas
  xl: 1280px o mas
  2xl: 1536px o mas
-->

<!-- Mobile first -->
<div class="text-sm md:text-base lg:text-lg">
  <!-- Por defecto: small -->
  <!-- md o mas: base -->
  <!-- lg o mas: large -->
</div>

<!-- Grid responsive -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <!-- Movil: 1 columna -->
  <!-- sm: 2 columnas -->
  <!-- lg: 3 columnas -->
  <!-- xl: 4 columnas -->
</div>

<!-- Mostrar/ocultar responsive -->
<div class="hidden md:block">Mostrar en md o mas</div>
<div class="block md:hidden">Mostrar solo bajo md</div>

<!-- Flexbox responsive -->
<div class="flex flex-col md:flex-row gap-4">
  <!-- Movil: vertical -->
  <!-- md o mas: horizontal -->
</div>

<header class="bg-white shadow">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="/" class="text-xl font-bold">Logo</a>

      <!-- Navegacion desktop -->
      <nav class="hidden md:flex gap-6">
        <a href="/" class="text-gray-600 hover:text-gray-900">Inicio</a>
        <a href="/about" class="text-gray-600 hover:text-gray-900">About</a>
        <a href="/services" class="text-gray-600 hover:text-gray-900">Servicios</a>
        <a href="/contact" class="text-gray-600 hover:text-gray-900">Contacto</a>
      </nav>

      <!-- Boton menu movil -->
      <button class="md:hidden p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</header>

Step 4: Tipografia

Tamano de fuente

<p class="text-xs">Extra Small (0.75rem)</p>
<p class="text-sm">Small (0.875rem)</p>
<p class="text-base">Base (1rem)</p>
<p class="text-lg">Large (1.125rem)</p>
<p class="text-xl">Extra Large (1.25rem)</p>
<p class="text-2xl">2XL (1.5rem)</p>
<p class="text-3xl">3XL (1.875rem)</p>
<p class="text-4xl">4XL (2.25rem)</p>
<p class="text-5xl">5XL (3rem)</p>

Peso de fuente

<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extrabold (800)</p>

Estilos de texto

<!-- Interlineado -->
<p class="leading-tight">Interlineado estrecho</p>
<p class="leading-normal">Interlineado normal</p>
<p class="leading-loose">Interlineado amplio</p>

<!-- Espaciado entre letras -->
<p class="tracking-tight">Espaciado estrecho</p>
<p class="tracking-wide">Espaciado amplio</p>

<!-- Alineacion de texto -->
<p class="text-left">Alinear a la izquierda</p>
<p class="text-center">Centrar</p>
<p class="text-right">Alinear a la derecha</p>
<p class="text-justify">Justificar</p>

<!-- Decoracion de texto -->
<p class="underline">Subrayado</p>
<p class="line-through">Tachado</p>
<p class="no-underline">Sin subrayado</p>

<!-- Transformacion de texto -->
<p class="uppercase">MAYUSCULAS</p>
<p class="lowercase">minusculas</p>
<p class="capitalize">Capitalizar</p>

<!-- Truncar texto -->
<p class="truncate">Truncar texto largo...</p>
<p class="line-clamp-2">Truncar en 2 lineas</p>

Step 5: Estados e interacciones

Hover y Focus

<!-- Hover -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Cambia de color al pasar el mouse
</button>

<!-- Focus -->
<input
  class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 rounded px-3 py-2 outline-none"
  placeholder="Cambia de estilo al enfocar"
/>

<!-- Active -->
<button class="bg-blue-500 active:bg-blue-700 text-white px-4 py-2 rounded">
  Cambia de color al hacer clic
</button>

<!-- Multiples estados -->
<a
  href="#"
  class="text-blue-500 hover:text-blue-700 hover:underline focus:outline-none focus:ring-2"
>
  Enlace
</a>

Group hover

<div class="group cursor-pointer p-4 border rounded hover:bg-gray-50">
  <h3 class="font-bold group-hover:text-blue-500">
    Titulo
  </h3>
  <p class="text-gray-600 group-hover:text-gray-900">
    Descripcion
  </p>
  <span class="text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity">
    Ver detalles →
  </span>
</div>

Modo oscuro

<!-- Alternar agregando la clase dark al elemento padre -->
<div class="dark">
  <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-4">
    Contenido compatible con modo oscuro
  </div>
</div>

Step 6: Componentes practicos

Card

<div class="bg-white rounded-lg shadow-md overflow-hidden max-w-sm">
  <img
    src="https://via.placeholder.com/400x200"
    alt="Card image"
    class="w-full h-48 object-cover"
  />
  <div class="p-6">
    <span class="text-xs font-semibold text-blue-500 uppercase tracking-wide">
      Categoria
    </span>
    <h2 class="mt-2 text-xl font-bold text-gray-900">
      Titulo de la card
    </h2>
    <p class="mt-2 text-gray-600">
      La descripcion de la card va aqui. Puede ocupar multiples lineas.
    </p>
    <div class="mt-4 flex items-center justify-between">
      <span class="text-2xl font-bold text-gray-900">$19.80</span>
      <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
        Comprar
      </button>
    </div>
  </div>
</div>

Formulario

<form class="max-w-md mx-auto space-y-6">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
      Nombre
    </label>
    <input
      type="text"
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow"
      placeholder="Juan Perez"
    />
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
      Correo electronico
    </label>
    <input
      type="email"
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow"
      placeholder="ejemplo@email.com"
    />
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
      Contenido de la consulta
    </label>
    <textarea
      rows="4"
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow resize-none"
      placeholder="Escribe tus preguntas o solicitudes"
    ></textarea>
  </div>

  <div class="flex items-center">
    <input
      type="checkbox"
      id="terms"
      class="w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500"
    />
    <label for="terms" class="ml-2 text-sm text-gray-600">
      Acepto los terminos de uso
    </label>
  </div>

  <button
    type="submit"
    class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors"
  >
    Enviar
  </button>
</form>

Pestanas de navegacion

<div class="border-b border-gray-200">
  <nav class="flex -mb-px">
    <a
      href="#"
      class="px-6 py-3 border-b-2 border-blue-500 text-blue-500 font-medium"
    >
      Inicio
    </a>
    <a
      href="#"
      class="px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
    >
      Perfil
    </a>
    <a
      href="#"
      class="px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
    >
      Configuracion
    </a>
  </nav>
</div>

Alertas

<!-- Exito -->
<div class="flex items-center p-4 bg-green-50 border-l-4 border-green-500 text-green-700">
  <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
  </svg>
  <span>Guardado correctamente.</span>
</div>

<!-- Error -->
<div class="flex items-center p-4 bg-red-50 border-l-4 border-red-500 text-red-700">
  <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"/>
  </svg>
  <span>Ha ocurrido un error.</span>
</div>

<!-- Advertencia -->
<div class="flex items-center p-4 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-700">
  <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"/>
  </svg>
  <span>Atencion requerida.</span>
</div>

Mejores practicas

1. Mobile first
   - Estilos para movil por defecto
   - Extender con breakpoints

2. Organizacion de clases
   - Layout → Espaciado → Tamano → Color → Otros
   - Ordenar automaticamente con plugin de Prettier

3. Extraccion de componentes
   - Patrones repetidos convertir en componentes
   - Crear clases personalizadas con @apply

4. Rendimiento
   - Eliminar clases no usadas en build de produccion
   - Build rapido con modo JIT

Resumen

Tailwind CSS permite construir UIs rapidamente con un enfoque utility-first. Una vez que aprendas las clases basicas, puedes crear disenos flexibles solo con HTML. Facilita el soporte de responsive y modo oscuro, siendo ideal para el desarrollo web moderno.

← Volver a la lista