Manual Completo de Tailwind CSS

# Instalación con npm
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

# Configuración básica
# tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

# Añadir a tu CSS principal
@tailwind base;
@tailwind components;
@tailwind utilities;
                

<div class="p-6 bg-white rounded-lg shadow-md max-w-md mx-auto">
    <div class="text-xl font-bold text-gray-800 mb-2">Ejemplo de Tarjeta</div>
    <p class="text-gray-600 mb-4">Esta es una tarjeta simple...</p>
    <button class="px-4 py-2 bg-teal-500 text-white rounded hover:bg-teal-600 transition-colors">
        Botón de Ejemplo
    </button>
</div>
                

<!-- Ejemplo responsive -->
<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-4">
    Contenido responsive
</div>
                

<!-- Botones con Tailwind -->
<button class="px-4 py-2 bg-blue-500 text-white rounded">Primario</button>
<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">Hover</button>
<button class="px-4 py-2 bg-red-500 text-white rounded shadow-lg">Con Sombra</button>
<button class="px-4 py-2 border border-purple-500 text-purple-500 rounded hover:bg-purple-50">Outline</button>
<button class="px-4 py-2 bg-yellow-400 text-yellow-900 rounded transform hover:scale-105 transition-transform">Animado</button>
                

<!-- Tarjeta 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
    <div class="h-48 bg-blue-500 flex items-center justify-center">
        <span class="text-white text-xl font-bold">Imagen</span>
    </div>
    <div class="p-6">
        <h4 class="text-xl font-semibold text-gray-800 mb-2">Título de Tarjeta</h4>
        <p class="text-gray-600 mb-4">Descripción breve...</p>
        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Ver más</button>
    </div>
</div>

<!-- Tarjeta 2 -->
<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
                <span class="text-purple-500">👤</span>
            </div>
            <div>
                <h4 class="text-lg font-medium text-gray-800">Usuario Ejemplo</h4>
                <p class="text-gray-500 text-sm">Hace 2 días</p>
            </div>
        </div>
        <p class="text-gray-700 mb-4">Este es un diseño...</p>
        <div class="flex justify-between text-sm text-gray-500">
            <span>25 comentarios</span>
            <span>125 likes</span>
        </div>
    </div>
</div>
                

<form>
    <div class="mb-4">
        <label class="block text-gray-700 text-sm font-medium mb-2" for="name">Nombre</label>
        <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
               type="text" id="name" placeholder="Tu nombre">
    </div>
    <div class="mb-4">
        <label class="block text-gray-700 text-sm font-medium mb-2" for="email">Email</label>
        <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
               type="email" id="email" placeholder="tucorreo@example.com">
    </div>
    <div class="mb-6">
        <label class="block text-gray-700 text-sm font-medium mb-2" for="message">Mensaje</label>
        <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
                  id="message" rows="4" placeholder="Tu mensaje"></textarea>
    </div>
    <div class="flex items-center justify-between">
        <button class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500" 
                type="button">Cancelar</button>
        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500" 
                type="submit">Enviar</button>
    </div>
</form>
                

<!-- Flexbox horizontal -->
<div class="flex flex-wrap gap-4">
    <div class="flex-1 p-4 bg-blue-100 rounded">Item 1</div>
    <div class="flex-1 p-4 bg-blue-200 rounded">Item 2</div>
    <div class="flex-1 p-4 bg-blue-300 rounded">Item 3</div>
</div>

<!-- Flexbox responsive -->
<div class="flex flex-col md:flex-row gap-4">
    <div class="w-full md:w-1/4 p-4 bg-purple-100 rounded">Sidebar</div>
    <div class="w-full md:w-3/4 p-4 bg-purple-200 rounded">Contenido Principal</div>
</div>
                

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="p-6 bg-green-100 rounded-lg">Producto 1</div>
    <div class="p-6 bg-green-200 rounded-lg">Producto 2</div>
    <div class="p-6 bg-green-300 rounded-lg">Producto 3</div>
    <div class="p-6 bg-green-400 rounded-lg">Producto 4</div>
    <div class="p-6 bg-green-500 rounded-lg text-white">Producto 5</div>
    <div class="p-6 bg-green-600 rounded-lg text-white">Producto 6</div>
</div>
                

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#5eead4',
          DEFAULT: '#14b8a6',
          dark: '#0f766e',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}