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