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 - &&\<br>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 initPresionamos 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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/tailwind.css"></link>
</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
