Tailwind permite un prototipado rápido, cuando conoces sus "clases" y es, a priori, más sencillo de usar que Vainilla CSS el cual requiere cierto nivel de conocimientos sobre su funcionamiento, por contra aumenta el peso el sitio.
1. Prototipado rápido, por ejemplo, el código de los botones:
Es el siguiente:
<div class="text-right mt-5">
<button type="button"
class="bg-white font-medium px-5 py-2.5 rounded-lg text-gray-900 text-sm border border-gray-200">
Cancel
</button>
<button type="submit"
class="bg-blue-700 font-medium ms-3 px-5 py-2.5 rounded-lg text-sm text-white">
Accept
</button>
</div>
Tailwind usa lo que llama "Utility classes" o "clases de utilidad", esto asigna una regla concreta a cada clase, por ejemplo, para alinear un texto a la derecha podemos definir una clase de utilidad en CSS así:
.text-right {
text-align: right;
}
2. Librerías de componentes listos para usar, por ejemplo Flowbite
3. Es un estándar en la industria. Muchas empresas usan Tailwind y es una ventaja para el trabajo en equipos de desarrollo.
1. WPO o Web Performance Optimization
Hace unos días hice un pequeño proyecto con Tailwind y Flowbite. Cargue los ficheros JS "minificados", de forma estática en local, además algunos componentes de Flowite tienen su propio código, por ejemplo, un datepicker.
En Cuanto al peso de estos recursos tenemos lo siguiente:
Para maquetar los botones del ejemplo anterior en principio se requiere el primer fichero.
Si maquetamos los botones directamente con CSS tendríamos, por ejemplo, el siguiente HTML:
<div class="buttons-group">
<button type="button"
class="btn btn-default">
Cancel
</button>
<button type="submit"
class="btn btn-primary">
Accept
</button>
</div>
Y el CSS:
* {
-moz-osx-font-smoothing : grayscale;
-webkit-font-smoothing : antialiased;
font-family : ui-sans-serif,
system-ui,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
}
html {
--btn-primary-color: rgb(29 78 216 / 1);
}
.buttons-group {
margin : 1.25rem 0;
text-align: right;
}
.buttons-group .btn {
border : 1px solid white;
border-radius : 0.5rem;
color : white;
cursor : pointer;
font-family : inherit;
font-size : 0.875rem;
font-weight : 500;
line-height : 1.25rem;
margin-inline-start : 0.75rem;
opacity : 1;
padding : 0.625rem 1.25rem;
text-transform : none;
}
.buttons-group .btn.btn-default {
background-color : white;
border-color : #d9d9d9;
color : black;
}
.buttons-group .btn.btn-primary {
background-color : var(--btn-primary-color);
border-color : var(--btn-primary-color);
}
Se puede apreciar que el HTML se reduce un poco, esto puede ser importante, según el caso. Imaginemos, por ejemplo, que el par de botones se rotulan como "Editar" y "Eliminar" y se añaden a cada registro de una página que muestra 50 registros. En este caso las "utility classes" aumentan bastante el tamaño de la página.
El CSS de ejemplo minificado no llega a 1 kB (731 bytes)
Usar TailwindCss impacta en el WPO del sitio negativamente, sin embargo, si el WPO no es muy importante y no posees buenos conocimientos de maquetación es una opción recomendable.
Por cierto, si inspeccionas el código de este sitio, veras que hay "utility classes", las uso hace años, mucho antes de oir hablar de Tailwind, ésta es mi librería. En realidad, uso un mix de "utility classes" con "clases orientadas a componentes" como en el CSS del ejemplo y esta página en concreto carga dos ficheros CSS, uno que se usa en todo el sitio con 9.6 kB de peso y otro que se carga en las páginas del blog con 1.5 kB.
28-03-2024