Dominando Tailwind CSS

Tailwind CSS es el framework utility-first más popular. Aprende tips y trucos para usarlo como un profesional.

Configuración Personalizada

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif']
      },
      spacing: {
        '128': '32rem'
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in'
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        }
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography')
  ]
};

Componentes Reutilizables con @apply

/* styles.css */
@layer components {
  .btn {
    @apply px-4 py-2 rounded font-semibold transition-colors;
  }
  
  .btn-primary {
    @apply btn bg-blue-500 text-white hover:bg-blue-600;
  }
  
  .btn-secondary {
    @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

Responsive Design

  Responsive width




  Responsive text

Dark Mode

// tailwind.config.js
module.exports = {
  darkMode: 'class', // o 'media'
  // ...
};

// Uso

  Contenido con dark mode


// Toggle dark mode
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

Estados y Variantes

  Button




  
  
Hover me





  Checkbox label

Arbitrary Values

  Custom sizes



  Custom colors and sizes



  Custom grid

Gradientes

  Gradient background



  Gradient text

Animaciones

⚙️
📍
💓
⬇️



  Hover me

Grid y Flexbox

  Flex container




  Grid container




  Responsive grid

Aspect Ratio

  16:9 ratio



  1:1 ratio



  Custom ratio

Truncate y Line Clamp

  Este texto será truncado con...




  Este texto se limitará a 3 líneas
  y mostrará... al final

Plugins Útiles

// @tailwindcss/forms


// @tailwindcss/typography

  
Título
  
Contenido con estilos automáticos


// @tailwindcss/aspect-ratio

  

Mejores Prácticas

1. Usa @apply con moderación: Solo para componentes muy reutilizados
2. Mobile first: Diseña primero para móvil
3. Purge CSS: Configura content correctamente
4. Componentes: Extrae clases repetidas
5. Plugins: Usa plugins oficiales cuando sea posible

Conclusión

Tailwind CSS acelera el desarrollo y mantiene consistencia en el diseño. Con estos tips puedes aprovechar todo su potencial y crear interfaces modernas rápidamente.