1. ¿Qué es TailwindCSS?
Yo personalmente lo llamo, la navaja suiza de los frameworks CSS.
2. ¿Qué es un Shopify Theme?
Una plataforma 360 pensada en potenciar cualquier E-commerce.
3. ¿Qué herramientas necesitas?
-
Instalar las siguientes herramientas:
- Node
- NPM
4. Crear archivo de configuración tailwindCSS
Debes crear un archivo llamado tailwind.config.js en la raíz de tu proyecto
5. Agregar código al archivo de configuración
Dentro del archivo tailwind.config.js agrega el siguiente código
6. ¿Cómo Instalar TailwindCSS?
Debes instalar tailwindcss desde su sitio web oficial TailwindCSS
7. Crear hoja de estilos de entrada
Agregar una hoja de estilos con el nombre input.css a tu directorio assets.
8. Agrega el siguiente código a tu hoja de estilos
Dentro de la hoja de estilos input.css agrega el siguiente código
9. Ejecuta el siguiente comando npm
El siguiente comando tiene como objetivo compilar, crear una hoja de estilos con las clases tailwind usadas en los archivos .liquid y escuchar los cambios en tu hoja de estilos
10. Agregar el asset al tema
Para agregar el asset debes agregar como cualquier asset al tema de Shopify