Creamos nuestro proyecto en la terminal:
mkdir proyectocd proyectocode .Al abrir VSCode
Crear carpeta con index.htmlnpm initnpm install -D tailwindcss postcss-cli autoprefixer
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! 🦄🎉
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 --verbosea:
npm postcss ./src/css/tailwind.css -o ./public/css/tailwind.css --watch --verboseCreo que es mala idea ponerle dev a ese parametro, no?