A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Purge CSS

27/29
Recursos

Aportes 3

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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}"],

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).

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"
  }