Mastermind JUG - Introducción a Tailwind CSS

Tailwind CSS se ha hecho muy popular entre los desarrolladores Joomla a pesar de su poco tiempo en el mercado y unos de los desarrolladores que más lo ha trabajado es Aníbal Sánchez (líder supremo del JED y desarrollador principal en Extly). Aníbal nos contará por qué le gusta tanto Tailwind, y nos enseñará cómo podemos introducirlo en nuestros sitios Joomla.

Artículo relacionado: https://blog.anibalhsanchez.com/es/9-blogueando/68-charla-del-mastermind-jug-introducci%C3%B3n-a-tailwind-css.html

Los puntos que analizamos fueron los siguientes:

1. Inicio de proyectos con Tailwind CSS
2. Comparación con el framewok monolítico Bootstrap
3. Documentación, referencias, componentes, utilidades y materiales para el uso de Tailwind CSS
4. Diseño de una Tarjeta Personal
5. Prueba de código en Tailwind.run
6. Desarrollo local con Node.js y Tailwind CSS
7. Prueba de hoja de estilos generada con Tailwind en Joomla 4
8. Diseño iterativo y evolutivo
9. Análisis de performance y código generado por Tailwind
10. Comparación de Tailwind con otros frameworks: Bootstrap, Bulma, Foundation, Tachyons, Semantic y Materialize
11. Implementación de estilos inline, hoja de estilos user.css o plantilla completa
12. Conclusiones, diseño avanzado, prototipos y próximos pasos

Vídeo de la charla (lamentablemente el audio no quedó grabado): https://www.youtube.com/watch?v=ogUCh1_cHd8

Charlas del Joomla JUG Mastermind sobre Joomla!: https://mastermindjoomla.com/jug

Repositorios de Interés

• Extly Tailwind CSS Starter: https://github.com/anibalsanchez/XT-TailwindCSS-Starter
• El template de mi Blog, con Tailwind CSS: https://github.com/anibalsanchez/XT-Tailwind-for-Joomla
• Template Tabata, con Tailwind CSS: https://tabata.phproberto.com/en/

Links de interés

• Paǵina oficial de Tailwind CSS: https://tailwindcss.com/

• Paǵina oficial de Tailwind UI: https://tailwindui.com/components

• Componentes Tailwind CSS de Comunidad: https://tailwindcomponents.com/

• Sitios hechos con Tailwind CSS: https://builtwithtailwind.com

• Más documentación: https://nerdcave.com/tailwind-cheat-sheet

• Tailwind CSS Sandbox de pruebas: https://tailwind.run/new

Pre-requisitos

• Instalar Node.js antes de comenzar: https://nodejs.org/en/

Ejecución del Starter de Tailwind CSS

Inicialización del ambiente:

cd XT-TailwindCSS-Starter
npm install

Ejecución del modo de desarrollo:

npm run dev

Generación de la distribución de estilos:

npm run prod

Copyright & License

• Copyright (c)2012-2020 Aníbal Sánchez, Extly, CB. All rights reserved.
• Distributed under the GNU General Public License version 3 or later; see LICENSE
• This project is dedicated to Andrea Gentil ;-D