Este método de instalar Tailwind CSS funciona escaneando todos tus archivos HTML, componentes JavaScript y cualquier otra plantilla en busca de nombres de clases, generando los estilos correspondientes y luego escribiéndolos en un archivo CSS estático.
Es rápido, flexible y confiable, sin tiempo de ejecución.
Instalando Node.js
Descargamos e instalamos nodejs https://nodejs.org/en/download/ de preferencia la versión LTS.
Instalando Visual Studio Code
Descargamos e instalamos https://code.visualstudio.com/
Inicializamos Node.js en nuestro proyecto
Creamos una carpeta que contendrá nuestro proyecto y la abrimos con Visual Studio Code., ahora ejecutamos la terminal y escribimos:
node -v npm init -y
node -v verificara la versión de nodejs.npm init -y creara un archivo package.json con la información del proyecto.
Instalamos Tailwind CSS
Instalamos tailwindcss vía npm, en la terminal escribimos los comandos:
npm install -D tailwindcss
Nos creara una carpeta node_modules con los paquetes a utilizar en nuestro proyecto, y los archivos package-lock.json y package.json.
Escribimos el siguiente comando para que nos cree el archivo tailwind.config.js que nos permitirá configurarlo y personalizarlo.
npx tailwindcss init
Configurando Tailwind CSS
Abrimos el archivo tailwind.config.js con VS Code y modificamos la linea 3 para que nos quede asi:
content: ["./src/**/*.{html,js}"],
Esta directiva indica que buscara entre todos los archivos html y js en busca de clases al momento de compilar.
Crear archivos y carpetas necesarios
Con la ayuda de VS Code creamos una carpeta src y dentro de ella el archivo index.html (src/index.html)., y dentro de src la carpeta css y dentro tailwind.css (src/css/tailwind.css).
Modificando tailwind.css
Agregamos las siguientes directivas al archivo tailwind.css para integrar las clases y los estilos (base, componentes y utilerías).
@tailwind base; @tailwind components; @tailwind utilities;
Compilando tailwind
Ejecutamos el comando el cual escaneara y/o buscara entre todos nuestros archivos html y js las clases de tailwind y las integrara en nuestro archivo CSS de salida. Y –watch estará pendiente a cualquier cambio en estos archivos para integrar o eliminar las nuevas clases.
npx tailwindcss -i ./src/css/tailwind.css -o ./src/css/estilos.css --watch
Para detener este proceso presiona Ctrl + C y S + Enter.
Creando nuestro primer HTML con clases de Tailwind
Modificamos el archivo index.html y agregamos la ruta de CSS compilado (./css/estilos.css).
Agregamos una clase bg-red-500
Agregar plugin Tailwind CSS IntelliSense a VS Code
Este plugin nos ayudara a autocomplementar las clases de Tailwind, colorear la sintaxis y muchas utilidades mas.
Crear script para facilitar compilación
Editamos package.json y agregamos al final de la linea 7 una coma , y la siguiente linea de código:
"twbuild": "tailwindcss -i ./src/css/tailwind.css -o ./src/css/estilos.css --watch"
Guardamos el archivo y lo ejecutamos desde la terminal con
npm run twbuild
