Para ello requerimos instalar npm el administrador de paquetes por defecto de Node.js.
Descargamos el instalador https://nodejs.org/es/ sugiero la versión estable LTS
Lo Instalamos
En Windows
En MacOS
En Ubuntu Linux., mi distro para Desktop preferida.
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\ sudo apt-get install -y nodejs
Para otras distros de Linux https://github.com/nodesource/distributions/blob/master/README.md
Instalación Tailwind
Ejecutamos la terminal nativa de cada sistema, recuerda que para windows puede ser CMD o PowerShell., entramos al directorio Desktop y creamos una carpeta tailwindcss e inicializamos el proyecto.
cd Desktop mkdir tailwindcss npm init
Presionamos Enter⏎ a todas las opciones para dejarlas por defecto y al final yes y Enter⏎
En Windows
En MacOS / Linux
Instalar Tailwind como un plugin de PostCSS
npm install -D tailwindcss postcss autoprefixer
Crearmos el archivo de plantillas
npx tailwindcss init
Editamos tailwind.config.js y agregamos el codigo "./public/index.html", "./src/*/.{html,js}"
a content
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./public/index.html", "./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }
Creamos el directorio src y dentro css y dentro el archivo tailwind.css src/css/tailwind.css
., agregamos las siguientes lineas a tailwind.css
@tailwind base; @tailwind components; @tailwind utilities;
Creamos nuestro build de la carpeta source ./src/css/tailwind.css a una publica ./public/css/tailwind.css
npx tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch
Probamos que funcione creando el index.html dentro de la carpeta ./public/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/tailwind.css"> </head> <body> <h1>Hi, Ray</h1> <div class="w-72 h-72 bg-blue-300"></div> </body> </html>
Automatizar el Build
Agregamos la linea "tw:build": "tailwind -i ./src/css/tailwind.css -o ./public/css/tailwind.css"
al archivo package.json
{ "name": "tailwindcss", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "tw:build": "tailwind -i ./src/css/tailwind.css -o ./public/css/tailwind.css" }, "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^10.4.13", "postcss": "^8.4.21", "tailwindcss": "^3.2.7" } }
Asi solo tenemos que poner
npm run tw:build