Tailwind CSS desde cero

Aprenderás qué es Tailwind CSS, qué ventajas tiene usarlo para el desarrollo web y cómo instalarlo y configurarlo.

• 1.1 - ¿Qué es Tailwind CSS?
  7:42
• 1.2 - Instalación usando el CDN
  9:07
• 1.3 - Instalación usando en Tailwind CLI
  9:22
• 1.4 - Instalación como plugin de PostCSS
  6:58
• 1.5 - Iniciando el proyecto con Vite
  7:27
• 1.6 - Integración con VS Code
  3:21

Antes de empezar con el proyecto, hablaremos sobre el flujo de trabajo típico al trabajar con Tailwind y otros conceptos básicos.

• 2.1 - Flujo de trabajo básico con Utility-classes
  11:12
• 2.2 - Añadir estilos básicos globales para todo el proyecto
  8:08
• 2.3 - Extraer elementos comunes a componentes I
  7:36
• 2.4 - Extraer elementos comunes a componentes II
  11:16
• 2.5 - Personalizando fuentes y colores
  11:36

Aquí empieza lo más divertido. Iremos dando forma a la página de manera que poco a poco se vaya asemejando a la página de inicio de Digital Ocean.

• 3.1 - Barra de navegación I
  16:44
• 3.2 - Barra de navegación II
  14:53
• 3.3 - Estados hover, focus y active en los elementos
  10:07
• 3.4 - Cuerpo del sitio I
  14:31
• 3.5 - Cuerpo del sitio II
  11:43
• 3.6 - Cuerpo del sitio III
  5:17
• 3.7 - Cuerpo del sitio IV
  12:42

Iremos dando forma a la página de manera que poco a poco se vaya asemejando a la página de inicio de Digital Ocean.

• 4.1 - Cuerpo del sitio V
  15:14
• 4.2 - Extraer elementos a componentes reutilizables
  10:45
• 4.3 - Cuerpo del sitio VI
  9:53
• 4.4 - Cuerpo del sitio VII
  11:12
• 4.5 Cuerpo del sitio VIII
  14:41
• 4.6 - Pie de página
  15:21

Es hora de hacer que la página se vea bien en los distintos tamaños de pantalla.

• 5.1 - Menú estático
  5:06
• 5.2 - Menús desplegables
  14:31
• 5.3 - Intro a utility-classes para responsive design
  13:31
• 5.4 - Sitio responsive I
  9:54
• 5.5 - Sitio responsive II
  6:58
• 5.6 - Sitio responsive III
  13:22
• 5.7 - Sitio responsive IV
  10:12
• 5.8 - Sitio responsive V
  6:33

Ahora aplicaremos transiciones a ciertos elementos del sitio web para que los cambios de apariencia se vean más suaves y fluidos.

• 6.1 - Transformaciones de elementos
  10:49
• 6.2 - Transiciones en elementos
  7:34
• 6.3 - Duración de transiciones
  4:39
• 6.4 - Delay de transiciones
  4:07
• 6.5 - Timing de transiciones
  5:58
• 6.6 - Animaciones en elementos
  3:18
• 6.7 - Tema Oscuro
  11:48

Si bien es totalmente posible dar estilo desde cero a los elementos de los formularios de nuestra web, aprenderemos sobre una herramienta que simplifica significativente esta tarea. Finalmente optimizaremos el proyecto para ponerlo en producción, veremos como mejorar significativamente la experiencia de desarrollo, además de algunos recursos útiles del ecosistema de Tailwind CSS.

• 7.1 - Dando estilo a formularios con Tailwind Forms
  17:03
• 7.2 - Just in time y valores arbitrarios
  10:35
• 7.3 - Optimización para producción
  12:59
• 7.4 - Recursos útiles para el desarrollo con Tailwind CSS
  15:16