Instalar NodeJS
Crear el directorio donde guardaremos los archivos de nuestro proyecto.
Inicializar proyecto utilizando el próximo comando en el directorio de nuesrto proyecto
npm init
Instalmos tailwind en nuestro proyecto con NPM
npm i -D tailwindcss
Instalamos Laravel mix
npm i -D laravel-mix
Ejecutamos el siguiente comando lo que añadirá un archivo de configuración de tailwind a nuestro proyecto.
npx tailwind init
En el directorio de nuestro proyecto ejecutamos el siguiente comando para copiar el archivo de configuración de Laravel mix
cp node_modules/laravel-mix/setup/webpack.mix.js ./
npm i -D mix-tailwindcss
const mix = require('laravel-mix');
require('mix-tailwindcss');
mix.sass('resources/sass/app.scss', 'public/css')
.tailwind('./tailwind.config.js');
@tailwind base;
@tailwind components;
@tailwind utilities;
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
Ya configurado nuestro proyecto, podemos empezar a compilar nuestros archivos con alguno de los siguientes comandos
npm run dev
Compila archivos mostrandonos información del proceso
npm run watch
Compila nuestros archivos y espera cambios para seguir compilando
npm run hot
Compila nuestros archivos y actualiza automáticamente nuestro sitio en la dirección http://localhost:8080
npm run production
Compila nuestros archivos sin dar ninguna información en la terminal
yo lo hice de esta manera, solamente con NPM y trate de documentarlo beginner friendly:
-had node.js installed to use "npm"
-check installation:
in the CMD run:
node -v
and then:
npm -v
(if there isn't info of the version installed you need to install it)
-create index.html
-create a 'css' folder
-create a 'main-custom.css' file [for your custom css]
(the name you like, but in root/project folder like the index, or where you like but be aware to specify your right path in step 5)
1- install the 'package.json' deppendency administrator for the project:
-go with the CMD to the your project folder
-run: npm init -y
2- now run:
npm install tailwindcss --save -dev
3- create your tailwind config file (yes, it's npX)
(it will create the tailwind.config.js file)
4- add tailwind to your css file these lines:
(we named it: main-custom.css)
@tailwind base;
@tailwind components;
@tailwind utilities;
5- process your css with tailwind to a new css file
(we will store the new file in our 'css' folder)
run:
"npx tailwind build styles.css -o output.css"
IN OUR CASE:
npx tailwind build main-custom.css -o css/tailwind.css
6- then in your html don't forget you links, for this example must look like this: