Yo siempre he usado lo que se conoce como Vanilla CSS

El otro día le pedí a Claude una web estilo CV y algo “webflowish” y me dio el diseño que actualmente tengo.

Claude me la hizo con Tailwind y como me gusto el diseño, decidí entender mas sobre TailWind.

Lo primero que entendí es que no podía usar toda la librería para producción ya que resultaría muy pesado.

Entonces llego el turno de crear un mu-plugin para que se encargase del proceso de crear un archivo con solo aquello de Tailwind que el sitio necesitaba.

Estructura

Esta fue la estructura:

/wp-content/mu-plugins/
  tailwind-handler/
    tailwind.php       # Main plugin file
    package.json               # npm dependencies
    tailwind.config.js         # Tailwind configuration
    postcss.config.js          # PostCSS configuration
    src/
      input.css                # Source Tailwind file
    dist/
      tailwind.min.css         # Compiled output (gitignored)
    node_modules/              # gitignored

Y estos fueron el contenido para dichos archivos

package.json:

{
  "name": "tailwind-handler",
  "version": "1.0.0",
  "description": "Tailwind CSS build system for WordPress",
  "scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/tailwind.min.css --minify",
    "watch": "tailwindcss -i ./src/input.css -o ./dist/tailwind.min.css --watch"
  },
  "devDependencies": {
    "tailwindcss": "^3.4.0"
  }
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    '../../themes/**/*.php',
    '../../themes/**/*.html',
    '../../themes/**/*.js',
  ],
  theme: {
    extend: {
      // Add your custom theme extensions here
    },
  },
  plugins: [],
}

postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
src/input.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Add any custom CSS here */
**.gitignore:**
node_modules/
dist/
*.log

Después de eso fui a la carpeta por medio de la terminal 

  cd wp-content/mu-plugins/tailwind
   npm install

Resultado

Ahora lo que debía hacer era ir al folder y ejecutar esto cada vez que hacia cambios de estilo en el sitio

npm run build

La idea era que el plugin lo hiciera, sin embargo esto no fue posible inicialmente debido a que estaba trabajando en un contenedor de Podman y no tenia Node Package Manager instalado.

Después de reconstruir el CSS de manera manual, tenia que ir al escritorio de WordPress y mover el archivo de TailWind a un folder en la raíz del sitio que se llama “Assets”

Después agregué manualmente el enlace en la cabecera (header) del sitio.

<link rel="stylesheet" href="<?php echo site_url('/assets/files/tailwind.min.css'); ?>" type="text/css" media="all" />

Recrear un “build” y mover ese ‘build” a un folder es algo tedioso.

Mi Amigo Claude

Mi amigo Claude me dijo que si quería dejar de estar en eso, que podía instalar NPM en el contenedor y problema resuelto

# Access the container
podman exec -it tlb_wordpress_site bash
# Inside the container, check the OS
cat /etc/os-release
# Install Node.js and npm (WordPress image is based on Debian)
apt-get update
apt-get install -y nodejs npm
# Verify installation
which npm
npm --version
# Exit container
exit

Mu-Plugin: Tailwind para WordPress

Este mu-plugin sufrió algunos cambios desde el inicio, pero esta es la versión actual

Puedes ver el resultado final en este enlace