Están pasando muchas cosas en Tailwind CSS, si quieres ponerte al día con las últimas noticias y el éxito que está teniendo el framework ahora, por favor, revisa el post de Adam Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business.
Este post es sobre las mejores prácticas que estoy aplicando actualmente en el desarrollo de plantillas basadas en Tailwind CSS. Tailwind CSS es un utility-first framework, poderoso y expresivo, pero mucho tiene que ser adaptado en el futuro para tener un producto final.
Hoy, estoy liberando XT Tailwind for Joomla v4.0.0 con una re-organización completa y varias mejoras.
XT Tailwind Re-organización de Proyecto
He recibido feedback sobre la organización del proyecto en un solo repositorio de código. Hasta ahora, he estado desarrollando la plantilla con todo en un solo lugar: Scripts de Webpack, librerías de composer, scripts de construcción, etc. A alto nivel, el proyecto ha tenido hasta ahora dos capas, los scripts de construcción para producir la extensión instalable y los scripts para soportar Tailwind CSS. Esto puede resultar confuso. Para reducir la complejidad, ahora el proyecto se ha separado en dos repositorios:
- Los archivos de construcción de la extensión Joomla, en este repositorio: anibalsanchez/XT-Tailwind-for-Joomla
- La plantilla Tailwind misma, en este repositorio: anibalsanchez/xt-tailwind-for-joomla-template. La dependencia es gestionada con este plugin de composer mnsami/composer-custom-directory-installer para descargar los archivos en la carpeta template.
De esta manera, si sólo te interesa la plantilla y la implementación del CSS Tailwind, puedes revisar el repositorio de plantillas y ejecutar allí los comandos para probarlo o diseñar un nuevo estilo.
Usando las Funciones y Directivas de Tailwind
Tailwind es una fina capa de clases utilitarias. Además, tiene poderosas herramientas para minimizar la duplicación de código y acelerar el proceso de diseño. Para más información, puedes consultar Functions & Directives. De ese capítulo, el mejor consejo es la siguiente declaración de un estilo de clase con un seudo-selector y media queries en un breve fragmento de código:
.btn {
@apply block bg-red-500;
}
.btn:hover {
@apply bg-blue-500;
}
@screen md {
.btn {
@apply inline-block;
}
}
La plantilla utiliza actualmente estas técnicas de varias maneras.
Un conjunto creciente de plugins
Tailwind CSS está creciendo; la plantilla ahora incluye los plugins oficiales, actualizados a las últimas versiones:
- Actualización @tailwindcss/custom-forms 0.2.1, una mejor base para el estilo de los campos de formularios.
- Actualización @tailwindcss/typography 0.2.0, un plugin para inyectar estilos de Typography.js.
- Actualización @tailwindcss/ui 0.5.0, hermosos componentes para la interfaz de usuario.
- Actualización Tailwind CSS 1.6.2
Desarrollo basado en Webpack
Con la separación del proyecto en repositorios, el script de construcción para la extensión se basa en nuestra práctica de Extly para empaquetar soluciones y el repositorio de plantillas tiene el script para desarrollar y diseñar basado en Tailwind CSS. Ambos impulsados por Webpack. En particular, el proyecto Tailwind puede ser ejecutado en los siguientes modos:
- Development Mode
- Proxy Server Mode for Joomla
- Development Build
- Production Build
PostCSS para Tailwind CSS
TailwindCSS se caracteriza por la generación de todas las clases posibles, basadas en colores, tamaños de letra, etc. Para controlar el tamaño de los entregables, el paso de optimización para la producción es crítico. Comencé con el desarrollo de la plantilla mucho antes de que Tailwind CSS soportará el purgado de clases. Por lo tanto, el proyecto de la plantilla se basa en plugins PostCSS para purgar y optimizar las hojas de estilo.
- @fullhuman/postcss-purgecss
- postcss-clean
- postcss-import
- postcss-loader
- postcss-nested
- cssnano and cssnano-preset-advanced
Eso es todo por ahora, amigos. To the moon!
Photo by Richard Masoner / Cyclelicious's photostream
