Configuración de tailwind y laravel mix

Configuracion.md

Tailwind - Laravel Mix

Requisitos

Instalar NodeJS

Pasos

Crear directorio de proyecto

Crear el directorio donde guardaremos los archivos de nuestro proyecto.

Inicializar proyecto con NPM

Inicializar proyecto utilizando el próximo comando en el directorio de nuesrto proyecto

npm init

Instalar tailwind

Instalmos tailwind en nuestro proyecto con NPM

npm i -D tailwindcss

Instalar Laravel Mix

Instalamos Laravel mix

npm i -D laravel-mix

Iniciar proyecto con tailwind

Ejecutamos el siguiente comando lo que añadirá un archivo de configuración de tailwind a nuestro proyecto.

npx tailwind init

Copiar archivo de configuración de webpack de laravel mix

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 ./

Instalamos plugin de tailwind para laravel mix

npm i -D mix-tailwindcss

Agregar configuración a nuestro webpack.mix.js

const mix = require('laravel-mix');

require('mix-tailwindcss');

mix.sass('resources/sass/app.scss', 'public/css')
  .tailwind('./tailwind.config.js');

Agregar tailwind a nuestro archivo app.scss

@tailwind base;

@tailwind components;

@tailwind utilities;

Agregar scripts en package.json

"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"
}

Compilar nuestros archivos

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:

npm i -D cross-env

yo lo hice de esta manera, solamente con NPM y trate de documentarlo beginner friendly:

	TAIL WIND INSTALLATION sdl

-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)

• run: npx tailwind init
  (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:

AND WE ARE READY