This project is the most easy way to combine shopify theme (css/sass) using tailwindCSS without css override.
- Setup
- [Compatibility issues](#Compatibility issues)
- Contributing
- useful link
$ theme watchSynchronize as a priority the local theme with the sass theme. More information here shopifyThemekit shopifyThemekitCommands
{{ '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 prodnpm 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
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--tableby
flex flex-row items-center// 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',
]
}- 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
--
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent