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
Para ejecutar los últimos comandos se debe instalar
cross-env
: