/Blog /¿Cómo integrar Shopify con TailwindCSS? - Artículo técnico

¿Cómo integrar Shopify con TailwindCSS? - Artículo técnico

Quieres aumentar la velocidad a la que desarrollas temas, sigue esta guía

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

11

Video tutorial explicativo

Video tutorial

Usa la CDN de TailwindCSS

Usa la CDN de TailwindCSS en tu tema para evitar problemas de compilación y solo compila cuando sea necesario.

Usa GIT

Usa GIT para trabajar de forma mas simple y controlar todos los cambios de código de forma segura.

Tengo mas de 5 años trabajando con Shopify y Shopify Plus

Sí necesitas apoyo experto puedes ponerte en contacto