DaisyUI y Tailwind CSS sin NodeJS
Nos hemos asomado al horror de las carpetas node_modules de NodeJS y su infierno de dependencias, y no las queremos en nuestra vida. Ya tenemos suficiente con el infierno de maven, y además no queremos ver más javascript del necesario.
Sin embargo, queremos una UI sencilla basada en html y CSS, y tras barajar demasiadas opciones, nos decidimos por DaisyUI, que a su vez se basa en Tailwind CSS
Tailwind CSS
Tailwind nos evita tener que escribir CSS específico para, en lugar de eso, indicar el estilo que queremos mediante clases añadidas al atributo class de las etiquetas HTML. A partir de esas clases, genera el CSS específico.
Para no meter todas las definiciones de todas las clases posibles eso hace falta una herramienta de construcción que revise tus archivos HTML en busca de las clases definidas por tailwind que hayas usado y generar el CSS asociado. Si eso lo hace al vuelo, pues mejor. Y ya, si lo hace sin tener que usar NodeJS, pues le damos un besito, le arropamos y le contamos un cuento para que duerma con los ángeles.
Pues mira, vanpiro no sé si esiten, pero esto sí, se lo han currado los mismos de Tailwind, y es un standalone de su consola. En el momento en que escribo estas líneas, esa entrada está fechada en 2021 y, aunque no ha cambiado la forma de descargarse el standalone desde entonces, y el ejectuable que te bajes estará al día con lo último, la forma de usarlo ha cambiado a partir de tailwind 4.0 (ya no se usa un .js de configuración). Así que ni caso, solo descárgate el último ejecutable y sigue leyendo, más abajo verás como usarlo.
DaisyUI
El problema de Tailwind CSS es que, aunque reduce en cierto modo la complejidad, y sobre todo, mejora la Localidad del Comportamiento (LoB, por sus siglas en inglés), sigues teniendo que escribir muchas clases para determinar el estilo de un elemento HTML.
Cuando digo muchas, en serio, son muchas, y frecuentemente copiando y pegando lo mismo, hasta el punto en el que HTML se llena de ruido.
Estaría del carajo que pudiéramos reducir más aún la complejidad, indicando con unas pocas clases lo que pretende ser el elemento HTML en cuestión, en lugar de todos los detalles de estilo necesarios para que cumpla esa función.
Ese es el objetivo de DaisyUI, y lo cumple de forma bastante decente.
DaisyUI nos explica como usar la consola standalone de Tailwind CSS aquí.
Así que es tan sencillo como seguir esos pasos, con un último detalle: si lo ejecutas con --watch y lo dejas abierto en una consola aparte, podrás deguir desarrollando mientras te actualiza automáticamente el CSS de tu proyecto.
¿Quieres que me extienda en este truco? Pues revienta este botón a clickazos:
Si quieres comentar o necesitas algo en concreto, mencióname en X, donde soy @backendpresario , o mándame un correo.