Debut Shopify Tailwind Starter

🛒 Boilerplate of shopify theme using tailwindcss

Download

debut-shopify-tailwinnd-starter

Debut theme starter project using tailwindcss.

This project is the most easy way to combine shopify theme (css/sass) using tailwindCSS without css override.

Alt text

Setup
[Compatibility issues](#Compatibility issues)
Contributing
useful link

Setup

1 - Setup theme kit.

$ theme watch

Synchronize as a priority the local theme with the sass theme. More information here shopifyThemekit shopifyThemekitCommands

2 - Modify theme.liquid with this line.

  {{ 'file.css' | asset_url | stylesheet_tag }}

This file.css is the new tailwindcss class generated using nodejs script

# install dependencies
$ npm install

$ npm run dev
$ npm run prod

npm run dev generate generate a file.css with ALL tailwind class for production.

npm run prod script scan all the theme and search specify tailwind.class

Compatibility issues shopify + Tailwindcss

Initially tailwindcss posed a lot of style problems on a shopify project. I have desactivated two important core plugin see tailwin.config.js. See Tailwind CSS Core plugins

Preflight modify global style, like size/spacing of svg icon. H1/H2 etc... Display override grid class. It breaks the navigation bar, product page and some sections. A solution exist. You can manually replace grid class by flexbox class like on this example, but the result are not perfect.

grid grid--no-gutters grid--table

flex flex-row items-center

Here the actual tailwind config file

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
    display: false
  }
}

The other way around. Here's a list of all the plugins that work.

// tailwind.config.js
module.exports = {
  corePlugins: [
    'container',
    'accessibility',
    'alignContent',
    'alignItems',
    'alignSelf',
    'appearance',
    'backgroundAttachment',
    'backgroundColor',
    'backgroundPosition',
    'backgroundRepeat',
    'backgroundSize',
    'borderCollapse',
    'borderColor',
    'borderRadius',
    'borderStyle',
    'borderWidth',
    'boxSizing',
    'boxShadow',
    'clear',
    'cursor',

    'fill',
    'flex',
    'flexDirection',
    'flexGrow',
    'flexShrink',
    'flexWrap',
    'float',
    'gap',
    'gridAutoFlow',
    'gridColumn',
    'gridColumnStart',
    'gridColumnEnd',
    'gridRow',
    'gridRowStart',
    'gridRowEnd',
    'gridTemplateColumns',
    'gridTemplateRows',
    'fontFamily',
    'fontSize',
    'fontSmoothing',
    'fontStyle',
    'fontWeight',
    'height',
    'inset',
    'justifyContent',
    'letterSpacing',
    'lineHeight',
    'listStylePosition',
    'listStyleType',
    'margin',
    'maxHeight',
    'maxWidth',
    'minHeight',
    'minWidth',
    'objectFit',
    'objectPosition',
    'opacity',
    'order',
    'outline',
    'overflow',
    'padding',
    'pointerEvents',
    'position',
    'resize',
    'rotate',
    'scale',
    'skew',
    'stroke',
    'strokeWidth',
    'tableLayout',
    'textAlign',
    'textColor',
    'textDecoration',
    'textTransform',
    'transform',
    'transitionDuration',
    'transitionProperty',
    'transitionTimingFunction',
    'translate',
    'userSelect',
    'verticalAlign',
    'visibility',
    'width',
    'wordBreak',
    'zIndex',
  ]
}

Contributing

Create a fork of this project

Clone the project:

git clone https://github.com/<YOUR_GITHUB_USERNAME>/debut-shopify-tailwind-starter

Create your Feature Branch (git checkout -b AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

Useful link and ressources

Top categories