Contenido del curso

Conociendo Tailwind CSS

Instalación y directivas

Utilidades

Plugins

11
Forms, Typography y Aspect ratio
00:58 min

Personalización

12
Tailwind como API para la creación de un Design System
12:01 min

Proyecto: Platzi Travel

Optimización de nuestro proyecto

Conclusiones

29
Conclusiones y siguientes pasos
00:37 min

Tomar examen

Sí cuentas con proyectos que están en versiones anteriores de Tailwind, ¡No te preocupes! porque es posible hacer la migración de tus proyectos a las versiones más recientes. 👇

Cómo migrar

Para migrar de Tailwind 2.0 a 3.0 solo debemos dirigirnos a la documentación, en Upgrade Guide.

Aquí nos encontraremos con el comando que usaremos para actualizar nuestro Tailwind:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Recuerda que este comando te actualizará a la última versión, si quieres una más exacta, puedes cambiar "latest" por el número de versión que desees.

Nos vamos a la carpeta de nuestro proyecto a través de la terminal y lo pegamos. Cuando termine de ejecutarse, nos vamos a nuestro package.json y veremos nuestra versión de Tailwind ya actualizada. 🎉

¡Listo! Ya tienes tu proyecto actualizado en la versión que desees. En la siguiente clase haremos un repaso de lo que creamos y cómo puedes seguir estudiando.

Cómo hacer la migración de tu proyecto a Tailwind 3.0

Comentarios

Moises Hernandez

student•

buen curso, por favor otro con la versión 3 y con react.

ALEJANDRO LONDOÑO PÉREZ

student•

Apoyo esta petición, un nuevo curso donde enseñen como integrarlo con preyectos de React.js

David Hilera

student•

Ya hay cursos donde lo integran con React y Next.

En mi caso lo he integrado con Next.

Pablo Lucas

student•

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad :D. Platzi-Test

Isidro J. Gallardo Navarro

student•

Saludos, Pablo. Thanks.

Luis Fernando Montoya Garcia

student•

Buenas noches alguien sabe como puedo subir mi proyecto a internet le intente pero los estilos generados con tailwind no me los toma en cuenta.

Roberto Guzmán

student•

Ahora vamos a necesitar uno de la version 4 integrando con React o Astro

Jahiker Rojas

student•

aqui les dejo mi projecto en github pages y el repo

Conociendo Tailwind CSS

Bienvenida al desarrollo con Tailwind

Tailwind 3.0: ¿qué hay de nuevo?

¿Cómo funciona Tailwind? Y otros frameworks de CSS

Mobile First y Utility First

Instalación y directivas

Creación del proyecto e instalación de Tailwind

Directivas de Tailwind

Utilidades

Nueva paleta de colores extendida

Medidas y Breakpoints

Flexbox

Maquetación del proyecto

Plugins

Forms, Typography y Aspect ratio

Personalización

Tailwind como API para la creación de un Design System

Proyecto: Platzi Travel

Construyendo el cuerpo del proyecto

Creando la sección de Home

Diseñando nuestras cards

Extracción de componentes a clases para nuestra card

Creando la sección de Recomendados

Agregando animaciones al proyecto

Creando la sección de Rentas destacadas

Sección de FAQS

Footer

TabBar funcional

Haciendo responsivo nuestro proyecto

Haciendo responsivo nuestro proyecto: rentas destacadas

Creando la navbar

Agregando el Dark Mode

Optimización de nuestro proyecto

Purge CSS