Instalar Tailwind CSS modo PostCSS

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
View more articles
  • Arduino – 3. Lenguaje de programación C / C++

    Para programar el microcontrolador de nuestra placa Arduino se utiliza una versión reducida del lenguaje C / C++, dentro del sitio oficial podemos encontrar toda la documentación de referencia https://www.arduino.cc/reference/en/., aquí te comparto las que yo considero mas importante. Comentarios Los comentarios son muy útiles a la hora de interpretar el código, ya que lo…

  • Arduino – 6. Ejercicio Semáforo

    Requerimos Conectamos el PIN GND al protoboard a la fila / bus negativa ( – ) y de ahí tomamos un cable a cada cátodo del los Leds, colocamos las resistencias al ánodo de cada Led, del PIN 12 a la resistencia del Led Rojo, del PIN 11 a la resistencia del Led Amarillo y…

  • Arduino – 5. Mi primer código encender un LED

    Aprendamos primero Como funcionan los LED Resistencias Y protoboard Requerimos Conectamos del Pin GND de la Tarjeta UNO R3 al cátodo (el cable negro que se muestra en la image) y el Pin 12 a la resistencia, y la resistencia al ánodo del LED. Recuerda que cuando los Pines Digitales están en ON se encuentran…