Saltar al contenido
Apuntes FS(+)

Clase 33 - TailwindCSS

#react #tailwind #css

🤔 - ¿Qué es TailwindCSS?

TailwindCSS es un framework CSS de utilidades que permite construir rápidamente sitios web modernos utilizando clases de utilidad.

A diferencia de frameworks tradicionales TailwindCSS adopta un enfoque “utility-first”, proporcionando clases pequeñas y enfocadas que pueden ser combinadas para crear cualquier diseño directamente en el markup.

💫 - Ventajas Principales

  • Productividad: Permite diseñar directamente en el HTML sin escribir CSS personalizado.
  • Consistencia: Sistema de diseño cohesivo con espaciado, colores y tipografías predefinidas.
  • Flexibilidad: Total control sobre el diseño sin restricciones de componentes predefinidos.
  • Optimización: CSS optimizado y reducido en producción (tree shaking).
  • Responsive: Sistema mobile-first con breakpoints intuitivos.

🧱 - Conceptos Básicos de Uso

🎨 - Clases de Utilidad

TailwindCSS funciona con clases pequeñas y específicas que aplican una sola propiedad CSS:

<!-- Padding, margin, colores y texto -->
<div class="p-6 mx-auto bg-blue-500 text-white rounded-lg shadow-lg">
  <h1 class="text-2xl font-bold mb-4">Título</h1>
  <p class="text-gray-100">Contenido del párrafo</p>
</div>

📏 - Sistema de Espaciado

Tailwind usa un sistema de espaciado basado en rem:

  • p-4 = padding: 1rem (16px)
  • m-2 = margin: 0.5rem (8px)
  • w-64 = width: 16rem (256px)

📱 - Responsive Design

Las clases responsive usan prefijos de breakpoint:

<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
  <!-- Ancho completo en móvil, mitad en tablet, tercio en desktop -->
</div>

Breakpoints predefinidos:

  • sm: - 640px y superior
  • md: - 768px y superior
  • lg: - 1024px y superior
  • xl: - 1280px y superior
  • 2xl: - 1536px y superior

🏃🏻‍♂️ - Estados Interactivos

Tailwind permite aplicar estilos basados en estados:

<button class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 active:bg-blue-800">
  Botón Interactivo
</button>

🌙 - Dark Mode

Soporte nativo para modo oscuro:

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  <h1 class="text-gray-900 dark:text-gray-100">Título adaptable</h1>
</div>

⭐ - Ejemplos Prácticos

🎴 - Card Component

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="imagen.jpg" alt="Imagen">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Categoría</div>
      <h2 class="block mt-1 text-lg leading-tight font-medium text-black">Título del Card</h2>
      <p class="mt-2 text-gray-500">Descripción del contenido del card component.</p>
    </div>
  </div>
</div>

📄 - Formulario

<form class="w-full max-w-lg mx-auto">
  <div class="flex flex-wrap -mx-3 mb-6">
    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
        Nombre
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" type="text">
    </div>
    <div class="w-full md:w-1/2 px-3">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
        Apellido
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text">
    </div>
  </div>
</form>

🚢 - Navigation Bar

<nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="text-white font-bold text-xl">Logo</div>
      </div>
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Inicio</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Productos</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contacto</a>
        </div>
      </div>
    </div>
  </div>
</nav>

⚙️ - Configuración

Para la configuración detallada de TailwindCSS, consulta la documentación oficial:

Guía de Configuración Oficial Documentación oficial sobre cómo configurar Tailwind CSS con Vite.

🎨 Bibliotecas de Componentes

Headless UI

Headless UI Componentes UI completamente sin estilo y totalmente accesibles, diseñados para integrarse perfectamente con Tailwind CSS.

shadcn/ui

shadcn/ui Un conjunto de componentes bellamente diseñados que puedes personalizar, extender y construir.

Radix UI

Radix UI Componentes primitivos accesibles de bajo nivel.

🛠️ - Herramientas de Desarrollo

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense Extensión oficial para VS Code con autocompletado inteligente.

Tailwind Play

Tailwind Play Playground online oficial.

Tailkits - Developer Tools

Tailkits Más de 100 herramientas para desarrolladores de Tailwind CSS: generadores, selectores de color, creadores de gradientes, snippets de VS Code y más.

📚 - Bibliotecas Especializadas

Iconify Icons

Iconify Icons Biblioteca de iconos de uso libre.

Phosphor Icons

Phosphor Icons Familia flexible de iconos.

React Hook Form + Tailwind

React Hook Form Biblioteca de formularios que se integra perfectamente con Tailwind.

Framer Motion + Tailwind

Framer Motion Biblioteca de animaciones para React.

📈 - Herramientas de Productividad

Tailwind CSS Cheat Sheet

Tailwind CSS Cheat Sheet Referencia rápida de todas las clases.

⭐ - Mejores Prácticas

1. Composición de Componentes

<!-- ❌ Repetir clases -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Botón 1</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Botón 2</button>


<!-- ✅ Crear componente reutilizable -->
<Button variant="primary">Botón 1</Button>
<Button variant="primary">Botón 2</Button>

2. Usar Directivas CSS para Patrones Comunes

@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500;
  }
}

3. Organización por Funcionalidad

<div class="
  <!-- Layout -->
  flex items-center justify-between
  <!-- Spacing -->
  p-6 mx-auto
  <!-- Styling -->
  bg-white rounded-lg shadow-lg
  <!-- States -->
  hover:shadow-xl transition-shadow
">

4. Diseñar mobile first

<!-- Siempre empezar por móvil -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Base: móvil, md: tablet, lg: desktop -->
</div>