6

Instalar TailwindCSS v3 con PostCSS a nuestro proyecto

Àlex
alesweb
10266

Tutorial/aportación para que nuestro proyecto funcione con la v3 de TailwindCSS

Instalar:

Creamos nuestro proyecto en la terminal:

  1. mkdir proyecto
  2. cd proyecto
  3. code .

Al abrir VSCode

Crear carpeta con index.html
npm init
npm install -D tailwindcss postcss-cli autoprefixer

Configurar

npx tailwindcss init -p
(al hacerlo con -p le indicamos qe nos cree automaticamente el archivo postcss.config.js también.
Ponemos en la configuración de Tailwind el contenido donde usamos taildwind: (no añadir archivos css en esa sección, si html, js, o lo que sea)

content: [
  "./public/*.html",
],

Creamos el archivo donde importaremos las directivas de Tailwind, en ese caso dentro de scr/css/tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Y también creamos el archivo donde se va atraduir las clases de tailwind que importemos y/o usemos a css.

Puede ser que npm run dev no nos funcione al no tener configurado el script en el archivo package.json.

Por lo que en este añadiremos lo siguiente:

"scripts": {
  "dev": "postcss ./src/css/tailwind.css -o ./public/css/tailwind.css --watch --verbose"
},

Indicandole que usamos postcss, que van del primer archivo al archivo que indicamos en el output (-o), el --watch para que observe si hay cambios y --verbose para que nos informe de que lo esta procesando y cuando termina el proceso.

Importamos los estilos al archivo principal <link rel="stylesheet" href="css/tailwind.css">. Ponemos alguna etiqueta con algunos estilos con tailwind para poder comprobar que todo va 👍🏻.

Ahora ya sí, npm run dev.
Y si activamos el LiveServer desde el archivo principal index.html vemos como lo hemos conseguido 💚💚💚

Felicidades y a seguir aprendiendo! 🦄🎉

Escribe tu comentario
+ 2
1

Si por alguna razón les agarra el comando “npm run dev”, solo tienen que agregar “npm” al script de “dev”, osea:

Pasaría de:
postcss ./src/css/tailwind.css -o ./public/css/tailwind.css --watch --verbose

a:

npm postcss ./src/css/tailwind.css -o ./public/css/tailwind.css --watch --verbose