Tailwind CSS y RAD Studio: Un Enfoque Simple Sin Node.js
Si has estado siguiendo nuestras publicaciones anteriores sobre WebStencils, sabes que realmente valoramos hacer que el desarrollo web moderno sea más fácil para los desarrolladores de RAD Studio. Hoy queremos compartir algo en lo que hemos estado trabajando: la integración de Tailwind CSS con proyectos de Delphi de una manera que sea realmente práctica y no requiera complicaciones innecesarias.
Tabla de Contenidos
- La Idea Principal
- ¿Qué es Tailwind CSS?
- El Proceso de Construcción (Build Process)
- La Manera RAD: No se Requiere Node.js
- Cómo Funciona
- Pruébalo tú mismo
La Idea Principal
El desafío con los frameworks de CSS modernos como Tailwind CSS es que normalmente requieren Node.js y una cadena de herramientas de compilación (build toolchain). Pero, ¿y si pudiéramos usar el binario CLI standalone de Tailwind en su lugar? ¿Y si pudiéramos configurar un flujo de trabajo donde el desarrollo sea rápido (usando un CDN) y la producción esté optimizada (usando un archivo CSS generado), todo sin tocar nunca npm o package.json?
Eso es exactamente lo que hemos hecho. Hemos creado un proyecto de demostración que muestra cómo integrar Tailwind CSS con Delphi usando WebStencils y WebBroker, con un enfoque híbrido que cambia entre CDN y CSS local basado en tu configuración de compilación (build configuration). ¿La mejor parte? Todo está automatizado a través de los eventos post-build de Delphi, por lo que no tienes que pensar en ello.
¿Qué es Tailwind CSS?
Antes de entrar en el cómo, expliquemos rápidamente qué es Tailwind CSS y por qué funciona de la manera en que lo hace.
Tailwind CSS es un framework CSS utility-first (basado en utilidades). En lugar de escribir CSS personalizado o usar componentes pre-construidos, compones tu UI aplicando pequeñas clases de utilidad directamente en tu HTML. Por ejemplo, en lugar de escribir:
Escribirías:
Este enfoque es genial para el desarrollo rápido, pero tiene un inconveniente: Tailwind genera miles de clases de utilidad, y si incluyes todas ellas, tu archivo CSS sería masivo (piensa en 3-4MB). Es por eso que los proyectos que usan Tailwind CSS necesitan ser "construidos" (built) para incluir solo las clases utilizadas en el HTML.
Ahora, debo mencionar que Tailwind CSS genera ciertas divisiones. Algunos desarrolladores lo aman por el control granular que ofrece, ya que puedes ajustar con precisión cada aspecto de tu diseño sin escribir CSS personalizado. Otros encuentran el HTML resultante abarrotado y difícil de leer con todas esas clases de utilidad. No estoy aquí para tomar partido. El punto de esta publicación es mostrar que si quieres usar Tailwind con Delphi, puedes hacerlo, y no tiene que ser complicado.
Esto es en realidad una de las cosas que me encantan de WebStencils: es completamente agnóstico respecto a CSS y JavaScript. No estás atado a ningún framework o enfoque particular. ¿Quieres usar Tailwind? Adelante. ¿Prefieres Bootstrap? Eso también funciona. ¿Quieres escribir CSS personalizado? Absolutamente bien. WebStencils solo renderiza tus plantillas, lo que pongas en ellas depende completamente de ti.
El Proceso de Construcción (Build Process)
Tailwind utiliza un proceso de compilación que escanea tus plantillas HTML, encuentra qué clases estás usando realmente y genera un archivo CSS que contiene solo esas clases. Este proceso (a menudo llamado "escaneo de contenido" o "tree-shaking") significa que en lugar de un archivo CSS de 3-4MB, obtienes algo como 5-50KB con solo los estilos que necesitas.
Tradicionalmente, este proceso de construcción requiere:
- Node.js instalado en tu máquina
- npm (Node Package Manager)
- Una herramienta de construcción como Vite o Webpack
- Un archivo package.json con dependencias
- Ejecutar comandos npm install y npm run build
Para los desarrolladores de Delphi que solo quieren estilizar sus aplicaciones web, esto es mucha sobrecarga. Esencialmente estás configurando un entorno de desarrollo JavaScript solo para generar CSS.
La Manera RAD: No se Requiere Node.js
Aquí es donde las cosas se ponen interesantes. Tailwind CSS en realidad proporciona un binario CLI standalone que no requiere Node.js en absoluto. Es un único archivo ejecutable que hace todo lo que hace la versión de Node.js, solo que sin el ecosistema npm.
Así que el flujo de trabajo se vuelve mucho más simple:
- Descarga la CLI standalone: Simplemente toma el último tailwindcss-windows-x64.exe de las Releases en GitHub.
- Configura un evento post-build: Dile a Delphi que ejecute la CLI después de compilar en modo Release (más detalles luego).
- Eso es todo: El CSS se genera automáticamente.
Pero hay más. Para el desarrollo, ni siquiera necesitas ejecutar el proceso de compilación. Puedes usar el CDN de Tailwind, que incluye todas las clases. Esto significa:
- Builds de Debug: Usan CDN, sin paso de construcción, cambios instantáneos con todas las clases de Tailwind disponibles.
- Builds de Release: Generan un archivo CSS optimizado automáticamente vía evento post-build con solo las clases que has usado.
La aplicación misma detecta en qué modo está y carga la fuente CSS apropiada.
Cómo Funciona
La magia ocurre en la plantilla baseLayout.html. Usando la sintaxis condicional de WebStencils, verificamos si estamos en modo debug:
La variable env.debug se establece en el código de Delphi basado en {$IFDEF DEBUG}, por lo que la plantilla sabe automáticamente qué CSS cargar.
Cuando compilas en modo Release, el evento post-build de Delphi ejecuta:
Este comando:
- Toma src/input.css como entrada.
- Escanea todos los archivos HTML en el directorio templates/.
- Genera un archivo CSS optimizado y minificado con solo las clases que estás usando.
- Lo envía a templates/static/css/output.css.
Dos archivos pequeños hacen que esto funcione: src/input.css simplemente importa Tailwind (@import "tailwindcss";) para que la CLI sepa qué generar, y tools/tailwind.config.js le dice a Tailwind dónde buscar clases (en este caso templates/**.html). Incluso te permite poner en safelist cualquier clase dinámica que pudieras generar en Delphi. Normalmente no tocarás estos archivos a menudo, pero puedes personalizarlos por proyecto si es necesario, y la documentación de Tailwind cubre las opciones en profundidad.
Pruébalo tú mismo
Si quieres ver esto en acción, revisa el proyecto de demostración en GitHub. El README tiene todas las instrucciones de configuración. Lo único que necesitas hacer es descargar el binario de la Tailwind CLI, renombrarlo a tailwindcss.exe y colocarlo en el directorio tools/, todo lo demás ya está configurado.
El proyecto demuestra que Delphi puede trabajar con frameworks CSS modernos sin requerir que te conviertas en un desarrollador JavaScript. A veces la mejor solución es la más simple, y en este caso, eso significa usar la CLI standalone y dejar que el sistema de construcción de Delphi maneje el resto.
¿Qué opinas? ¿Has intentado usar frameworks CSS modernos con Delphi? Me encantaría escuchar sobre tus experiencias y cualquier otro enfoque que hayas tomado.
.png)
Comentarios
Publicar un comentario