Dependencias

• Shopify CLI: una herramienta de interfaz de línea de comandos que te ayuda a desarrollar y administrar tus temas de Shopify.
• TailwindCSS: un marco CSS de utilidad para crear rápidamente diseños personalizados.

Configuración

Estamos utilizando Tailwind como una herramienta CLI independiente. Para obtener más información, puede consultar la guía oficial.

Nota: Si está configurando esto en una Mac con un procesador Intel, reemplace macos-arm64 con macos-x64 en los siguientes comandos.

1. Descargue el último binario TailwindCSS para macOS con arquitectura ARM64:

   curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64

2. Hacer ejecutable el archivo descargado:

   chmod x tailwindcss-macos-arm64

3. Mover el ejecutable a un nombre más conveniente:

   mv tailwindcss-macos-arm64 tailwindcss

4. Ejecute el observador TailwindCSS:

   • Este comando observará los cambios en su archivo fuente TailwindCSS (./assets/tailwind.css) y compilará el resultado en el archivo CSS deseado (./assets/style.css):

     ./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch

Publicar

Cuando esté listo para compilar su CSS para producción, debe usar el siguiente comando para minimizar su CSS:

./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify

Este comando tomará su archivo CSS de entrada (./assets/tailwind.css), lo procesará con TailwindCSS y generará un archivo CSS minificado (./assets/style.css) optimizado para producción.

Conclusión

Siguiendo estos pasos, configuró exitosamente TailwindCSS como una herramienta CLI independiente y la integró en su proyecto. Esta configuración le permite desarrollar y administrar de manera eficiente su CSS utilizando el enfoque de utilidad primero de Tailwind. La ejecución del observador garantiza que su CSS se compila automáticamente durante el desarrollo, mientras que el paso de minificación prepara su CSS para la producción, optimizándolo para el rendimiento. Este proceso simplificado ayuda a mantener una base de código limpia y fácil de mantener, lo que te permite concentrarte en crear y personalizar tu tema de Shopify con facilidad.