Purge CSS

Curso Básico de Tailwind 2 y 3

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

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

Conclusiones

Conclusiones y siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿Qué es Purge CSS y por qué es importante en Tailwind?

Al trabajar con Tailwind, un framework popular para diseño CSS, es crucial considerar la eficiencia del proyecto en producción. Debido a que Tailwind puede ser bastante pesado, ofrece la solución de Purge CSS. Esta herramienta elimina estilos, breakpoints y elementos no utilizados del proyecto, optimizando el archivo para reducir su peso. Al aplicar Purge CSS, nos aseguramos de que solo los estilos que realmente necesitamos se incluyan en el archivo final.

¿Cómo configurar Purge CSS en tu proyecto?

Para aprovechar Purge CSS en tu proyecto, es esencial saber cómo configurarlo en el archivo de configuración de Tailwind. Aquí es donde se especifica la ruta y el tipo de archivos en tu proyecto que necesitan ser depurados:

Ruta de archivos: Indica dónde se encuentran los archivos HTML o plantillas que usaras en tu proyecto. Por ejemplo, si tus archivos HTML están en la carpeta pública, asegúrate de agregar esta ruta de manera correcta.
Personalización: La configuración de Purge CSS es altamente personalizable, permitiéndote adaptar los parámetros según las necesidades específicas de tu proyecto.

Se recomienda siempre consultar la documentación de Tailwind para comprender completamente el proceso de configuración Purge CSS.

¿Cómo optimizar el proyecto para producción?

Una vez configurado Purge CSS, el siguiente paso es optimizar el proyecto para producción. El objetivo aquí es minimizar el tamaño de los archivos mediante un proceso llamado minificación:

Minificación: Este proceso hace que el archivo CSS sea más pequeño al eliminar espacios innecesarios y otros elementos redundantes, optimizando aún más el tamaño del archivo.
Comando de Build: Según la documentación, necesitarás usar un comando específico para ejecutar el build final. Asegúrate de modificar cualquier ruta en el comando que use tu directorio y configuración específica.

A continuación, un ejemplo del comando que podrías utilizar:

npm run build:css

¿Cómo verificar que todo está funcionando correctamente?

Después de haber optimizado los archivos y de ejecutar el build, es hora de verificar que todo esté funcionando sin problemas. Algunos pasos que debes seguir incluyen:

Pruebas en el navegador: Asegúrate de que los estilos se apliquen correctamente abriendo el proyecto en tu navegador. Verifica funcionalidades como el modo oscuro (dark mode) y que todo se rinda bien en diferentes resoluciones, por ejemplo, en un iPhone X.
Control de calidad: Asegúrate de que todas las imágenes, estilos y otros recursos estén presentes y funcionando como deben en el build final.

Finaliza este proceso subiendo tu proyecto optimizado a alguna plataforma como GitHub Pages para compartirlo con la comunidad. Este paso no solo te ayuda a obtener retroalimentación valiosa, sino que también proporciona una forma gratuita y efectiva de mostrar tus habilidades y proyectos.

Continuar aprendiendo y mejorando tus habilidades con Tailwind y otros frameworks te permitirá crear proyectos más eficientes y profesionales. ¡Sigue así!

Aportes 16

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Fernando Molano Castrillón

hace 3 años

Para la version 3 de tailwind ya no se usa la opción purge sino content.
En el archivo tailwind.config.js asegúrense de incluir esta línea:

content: ["./public/index.html", "./src/**/*.{html,js}"],

Platzinauta

hace 3 años

Tailwind es un framework pesado para producción y para ello ofrece la opción de hacer purge CSS, esto no es otra cosa más que eliminar estilos, clases, breakpoints y cosas adicionales que no se utilizan en el proyecto.

Para realizar esto, en el archivo tailwind.config.js se agrega la propiedad content (antes llamada purge), dentro de ahí se incluyen los paths de los archivos.

module.exports = {
  content: ["./public/**/*.html", "./src/**/*.{html,js}"],
 // ...
}

Posteriormente, para hacer el build se ejecuta el siguiente comando en terminal: npx tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css --minify

Con esto se puede hacer un despliegue del proyecto (carpeta public). Para hacer el deploy primero de hace el build minificado, después se cambia la ruta de la hoja de estilo tailwind.css del archivo index.html (debe ser el archivo css que se encuentra en la carpeta public).
En mi caso queda <link rel="stylesheet" href="./css/tailwind.css">.

Con esto hecho se puede subir la carpeta public a algún servidor con alojamiento gratuito (ej. netlify, github pages, etc).

Josue Tapia Linarez

hace 3 años

Me encato este curso!
page
repositorio

Alejandro Ruiz Melo

hace 3 años

Se puede dejar dentro del package.json los comandos para desarrollo y para producción:

  "scripts": {
    "tw:build": "npx tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css --minify",
    "tw:dev": "npx tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch"
  }

DubAvenXP

hace 3 años

Hice el proyecto con vue.js, por si lo quieren ver les comparto los links.
.
Este es el link de mi proyecto: https://adubon-tailwind.netlify.app
.
Este es el link del repositorio de mi proyecto: https://github.com/DubAvenXP/tailwind-course

Ernán Alexander Velásquez Ramírez

hace 3 años

Así me quedó mi proyecto:

Platzi Travel by @ernanvr

Cristina Muñiz

hace un año

Por si a alguien le puede sacar del apuro: Yo quise subir mi proyecto a Github pages pero no me encontraba la carpeta public.Estuve leyendo a mucha gente sobre como podría solucionarlo pero era cambiar bastante la configuración y me estaba liando. Opté por lo mas fácil que fue cambiar mi carpeta public por docs y en todos los sitios donde hacia referencia a esa carpeta pues lo cambie. hice un tw:build y luego un tw:prod y ya pude hacer el deploy en github pages. No sé si es lo mas correcto o lo mejor pero mi proyecto se ve en una página. Creo que es un gran fallo del curso el que no aclaren como desplegarlo.☺️

Nicolás García López

hace un año

Decidí hacer el proyecto en Astro junto con tailwind. <https://travel-app-iota-nine.vercel.app/>

Pablo Alejandro Figueroa

hace un año

then => purge:\[], now => content: \["./src/\*\*/\*.{html,js}"], Y en package.json: ![](https://static.platzi.com/media/user_upload/imagen-88c3df30-3106-41fb-a459-bab637be8896.jpg)