El mes pasado, debido a una serie de eventos astronómicos, hablé de Tailwind en dos sesiones de video, haciendo una codificación en vivo en Youtube. Me he dado cuenta de que es difícil hacerlo bien y el trabajo que hace Adam Wathan (el autor original de Tailwind) promocionando el CSS de Tailwind es excepcional. Revisa el canal de video de Adam acerca de Tailwind.
Más allá de las dificultades de grabación que enfrentamos en las conversaciones, me di cuenta de que hay varias preguntas frecuentes sobre Tailwind CSS en Joomla. En este artículo, voy a responderlas.
¿Qué es Tailwind CSS?
Es un utility-first CSS framework. Por supuesto, la siguiente pregunta es qué es un "utility-first CSS framework". La idea de ser "utility-first" es que el framework proporciona las herramientas para construir una plantilla y un diseño.
A primera vista, Tailwind CSS sólo es un "lenguaje" (por ejemplo, text-purple-500) y "herramientas" para generar la hoja de estilos CSS. Nada más ni nada menos. La semántica del lenguaje también es sencilla, y puede ser traducida directamente al equivalente de la hoja de estilo CSS. La belleza del lenguaje Tailwind es que es consistente, organizado alrededor de los conceptos centrales de CSS.
Las clases de utilidad son una capa de sintaxis sobre el CSS tradicional. Por lo tanto, en cualquier momento, también se puede combinar con el estilo CSS regular.
¿Cuál es la principal diferencia con Bootstrap?
Bootstrap viene con todo lo que podrías necesitar, "Baterías incluidas". Por ejemplo: Alertas, botones, barras de navegación, giradores, modales, etc.
Además, si eliges una plantilla creada por una Fábrica de Plantillas, la plantilla tiene Bootstrap, el tema creado por la Fábrica y las características adicionales que podrían haber sido añadidas.
Por último, Bootstrap define una forma de añadir recursos, pero pocas personas se atreven a eliminar algo; por si acaso se utiliza. Todas estas prácticas generan una carga considerable de estilos; que en la práctica, la mayoría no se utilizan. En estos tiempos modernos, en donde ser "mobile-first" es la clave, el precio de Bootstrap es alto en cuanto al uso del ancho de banda y los tiempos de respuesta.
Por otra parte, el resultado de una definición y el procesamiento de Taildwind CSS puede ser nada o sólo la esencial normalización entre navegadores.
¿Tienes que diseñar todo desde cero con el Tailwind CSS?
Sí, pero...
- El lenguaje de Tailwind es expresivo, y la semántica es clara. Elimina el dolor de recordar CSS.
- Los resultados de la definición de estilo son compilados y optimizados. Los resultados finales son mínimos. La carga de la hoja de estilo se reduce a unos pocos Kilobytes.
- Los estilos finales pueden ser agnósticos. Es tu diseño. La hoja de estilo producida podría no dar ninguna pista acerca de que fue generada internamente con Tailwind. Además, en términos de la migración desde un sistema antiguo, se podría redefinir las clases actuales para renovar un diseño. Por ejemplo, puedes tomar las clásicas clases de fila y columna de Bootstrap 2.3 y redefinirlas en un sistema de cuadrícula. Referencia: Grid Template Columns
¿Es Tailwind CSS mejor que el Bootstrap?
No, no se pueden comparar. Bootstrap es más como un marco de trabajo CSS para construir rápidamente prototipos, combinando componentes clásicos para producir un plano. Por otro lado, Tailwind CSS es un marco para crear un diseño de forma óptima, escribiendo lo que necesitas y compilando lo que se va a utilizar.
¿Desarrollar con Tailwind CSS lleva mucho tiempo?
Tailwind CSS tiene una curva de aprendizaje. En primer lugar, aprendes el "lenguaje" y lo aplicas en archivos HTML simples. La documentación oficial es completa; y también hay un buen número de sitios de la comunidad, cheatsheets, extensiones para VSCode, etc.
En segundo lugar, las "herramientas". Tailwind CSS está construido sobre las últimas herramientas del ecosistema JavaScript. No es necesario saber cómo desarrollar con JavaScript, pero se recomienda estar familiarizado con la terminología de JavaScript para el desarrollo del front-end. Técnicamente hablando, Tailwind está potenciado por PostCSS, una herramienta para transformar el CSS con JavaScript. Por lo tanto, todas las bondades y complejidades de este mundo también se encuentran en Tailwind.
Una vez que entiendes ese proceso esencial para desarrollar un diseño, y después de varias iteraciones, es el momento de conceptualizar y construir tus propios "componentes" o "módulos". Puedes producir tus definiciones visuales, tu biblioteca de patrones para reutilizarlos en diferentes proyectos. En esta etapa, los productos finales pueden ser producidos muy rápidamente. Tailwind Framework es muy joven; sin embargo, ya hay ofertas que proporcionan componentes de alto nivel que ayudan a acelerar el proceso de definición de una biblioteca de elementos a medida.
Por lo tanto, la respuesta final acerca del tiempo de diseño depende de lo que se está comparando. A veces, la personalización de Bootstrap lleva mucho tiempo y produce un resultado promedio (> 300Kb de estilos). Cada proyecto de Bootstrap tiene que empezar desde la definición básica. Luego, hay que completar los mismos pasos para personalizar la plantilla y el tema. La personalización de Bootstrap lleva una cantidad de tiempo definida y no va a ser más rápida en el próximo proyecto.
Cómo incorporar Tailwind CSS en un proyecto
El procedimiento no está definido a fuego, y depende de tu práctica. De acuerdo con mi experiencia, este es el procedimiento que mejor funciona para mí:
- Maquetar el diseño, en unos pocos prototipos rápidos de HTML, con los estilos en línea de Tailwind CSS. Probando en el móvil desde el principio. Si vas a reutilizar el HTML generado por Joomla, puedes copiar-pegar la salida actual del HTML para que coincida en las estructuras y clases con la salida de Tailwind.
- Optimizar los estilos, pasando del HTML en línea sin procesar a las hojas de estilo adecuadas. Evitar la duplicación de las definiciones de las clases.
- Definir los componentes, si hay componentes conocidos de la interfaz de usuario (botones, barras de navegación, etc.), reorganizarlos en componentes (CSS anidados). Revisar los componentes similares disponibles de Tailwind UI o expresar los componentes las clases de Tailwind.
- Integrar la hoja de estilos resultante en el sitio.
Conclusión
Como nota de precaución, Tailwind CSS es completamente nuevo (la v1 fue lanzada hace un año, el 13 de mayo de 2019). Es una tecnología que debe ser interpretada en el contexto de Joomla.
En mi práctica, si es posible, actualmente estoy implementando Tailwind sin compromisos: el uso de Tailwind implica la eliminación total del legado de Bootstrap. Bajo esta premisa, todas los estilos de extensiones tienen que ser migrados para soportar el nuevo framework. Donde este enfoque no sea viable, es mejor quedarse con Bootstrap y construir fragmentos de estilos con Tailwind CSS para componentes independientes.
Si estás decidido a aprender o probar Tailwind para ver cuán profunda es la madriguera del conejo, aquí dejo algunos enlaces útiles:
- Tailwind CSS - Oficial Page
- Tailwind UI Components - Oficial Page
- Tailwind CSS - Community Components
- Made with Tailwind CSS
- Tailwind Cheat Sheet
- Tailwind CSS Sandbox, un sitio para para probar Tailwind en línea
- Awesome Tailwind CSS
Y, estas son mis herramientas personales:
- Introduction to TailWind CSS in Joomla - Tim Davis' Watch Me Work 068
- Tailwind CSS Webpack Starter Project
- My Blog's template for Joomla, basado en Tailwind CSS
Para resumir, hay todo un conjunto de herramientas modernas en camino, inspiradas en los últimos desarrollos y listas para producir resultados fantásticos. Están lejos de ser perfectas, y el desafío es aprender a ir más allá del definición original e implementarlas en sitios realmente complejos. Tailwind CSS es sólo uno de los recién llegados que se viene. Dile hola y dale una bienvenida amistosa.
Este artículo fue originalmente publicado en inglés en la Joomla Magazine, edición Abril 2020. La imagen principal diseñada por Sandra Decoux.
