Teniendo en cuenta que me tiré meses para poder avanzar con este curso y que lo pude hacer gracias a la ayuda de un compañero, os dejo por aquí la que a mi parecer es, actualmente, la manera más sencilla de realizar el procedimiento:
En primer lugar vete a la terminal, crea una carpeta y desplázate hacia ella:
mkdir nombredecarpeta
cd nombredecarpeta
Luego, abre Visual Studio Code desde la carpeta recién creada con el comando:
code .
Una vez ahí, abre una terminal en el proyecto desde vsc y realiza los siguientes pasos:
npm install -D tailwindcss
npx tailwindcss init
Una vez realizada la instalación, te aparecerá un nuevo archivo llamado “tailwind.config.js”. Haz click en el, y modifica el PATH de tu contenido, es decir, la siguiente línea tal que así:
content: ["./src/**/*.{html,js}"],
(Ten en cuenta que si no estás siguiendo la misma ruta que te comento en este ejemplo, deberás modificar la ruta de tu contenido en función de lo que necesites)
A continuación, crea las carpetas src y dist, al mismo nivel. Por un lado, en la carpeta dist crea el archivo “output.css” y por el lado de la carpeta src, crea dos archivos: uno llamado index.html, con todo el código html y uno llamado input.css, con los estilos.
En el archivo “input.css”, coloca las siguientes líneas de código:
@tailwind base;
@tailwind components;
@tailwind utilities;
Una vez hecho todo esto, debemos hacer el build al proyecto para que comience a funcionar correctamente, corriendo el siguiente comando en la terminal:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Nota1: Cada vez que hagas cambios de importancia en el archivo, tendrás que hacer un build nuevamente. Para no tener que escribir toda esta línea cada vez, puedes colocar un script en tu archivo package.json tal que así:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
**"tw:build": "tailwind -i ./src/input.css -o ./dist/output.css"**
},
Una vez hecho esto, para hacer un build tan solo tendrás que escribir en la consola el siguiente comando:
npm runtw:build
Nota2: para que se lean las hojas de estilo correctamente, en este caso, la ruta que debemos especificar en el link del html es la siguiente:
<linkrel="stylesheet"href="../dist/output.css">
Espero que te sea de ayuda si es que estás atascado o atascada y que nunca pares de aprender🙌🏽💚
Y si consideras que me dejé algo en el tintero, no dudes en añadir tu comentario con tu aporte por favor!
