Webpack Shopify Tailwindcss Theme Development Tool

Made for/with

• Webpack 5
• Themekit
• Tailwindcss 2
• Plain Vanilla JS

Requirements (versions)

• Node (v14.15.0+)
• NPM (6)
• Theme Kit

Getting Started

1. Download and unzip
2. In terminal and run npm install
3. In terminal run theme new --password=<password> --store=<example-store.myshopify.com> --name="<theme name>" --dir="dist"
4. Add to config.yml (example config)

     ignore_files:
       - assets/theme.bundle.js
       - assets/application.bundle.js
   

5. Add

   {% capture layout_bundle_js %}{{ template.name }}.bundle.js{% endcapture %}
   {{ layout_bundle_js | asset_url | script_tag }}
   

   to dist/layout/theme.liquid after (line 42)

   <main role="main">
    {{ content_for_layout }}
   </main>
   

6. Delete from dist/layout/theme.liquid (line 12)

   {{ 'application.js' | asset_url | script_tag }}
   

7. Change scss to bundle from dist/layout/theme.liquid (line 11)

    {{ 'application.scss.css' | asset_url | stylesheet_tag }}
   

8. Start developing a theme

Developing

• Javascript
  • Add your scripts to .js files in src/js/templates directory
  • index.js should only contain scripts that are used by the all templates (navbar functionality)
  • other .js files corresponds to its template
• CSS
  • Add your tailwindcss classes to the .liquid files
  • Other css needed can be added to src/css/tailwind.css
• Liquid
  • Edit .liquid in dist directory

Scripts

npm start

• Completes a Webpack build in development mode
• Deploys updated copy from dist/
• Webpack begins watching for file changes
• Theme Kit begins watching for file changes in dist/
• Theme Kit opens your development theme in your default browser

npm start:live

• Completes a Webpack build in development mode
• Deploys updated copy from dist to a live theme
• Webpack begins watching for file changes
• Theme Kit begins watching for file changes in dist
• Theme Kit opens your development theme in your default browser

npm run build

• Completes a Webpack build in production mode

npm run deploy

• Completes a Webpack build in production mode
• Deploys and overwrites all theme files via Theme Kit

npm run deploy:live

• Completes a Webpack build in production mode
• Deploys and overwrites all theme files via Theme Kit on a live theme

Output Files

Webpack will generate a Javascript file from src/js directory to dist/assets directory application.css will be generated by tailwind in the dist/assets directory

License

Released under the MIT License.