Doodle Theme

devsmitin

Shopify theme made using Tailwind css

tw-starter

A tailwind css starter using webpack and postcss

This is a boilerplate for using webpack, tailwind css, sass/scss and es6 with babel in your shopify theme. There is no need to make any changes in this structure itself.

Getting started

Prerequisites

Workflow

A short description of workflow:

Clone this project, run below commands:

git clone https://github.com/devsmitin/tw-shopify.git
rm -rf .git # remove git

Clone your awesome-shopify-project in same directory and run below commands. If you dont have one already, skip to step 3
```
mv tw-shopify awesome-shopify-project
cd your-awesome-project
npm install
```
Use below command to download latest version of your theme (assuming that you are already logged in to your store from shopify-cli)
```
shopify theme pull # select your prefered theme from list - maybe the live theme forto sync latest changes?
```
Once done you can now add git using git init command or continue using local source.
Now you can add build files to your theme. Add it to your layout file to use globally (prefered) or to any specific section file (as required). You can also load JS file at bottom of you page.
```
{{ 'bundle.css' | asset_url | stylesheet_tag }}
<script src="{{ 'bundle.js' | asset_url }}" defer="defer"></script>
```

Development commands

You will need a terminal window. Here it is assumed that you are using bash or similar command language. To use this with Windows, you will need to change few commands in package.json file.

Build your code and serve your local Shopify theme
```
npm run start
```
Once done with development, push your code with production build to your desired theme
```
npm run publish
```
You can find and update additional commands in package.json file to match your workflow.

Final notes

Suggestions

If you have any suggestions to improve this template / repository, please open an issue. I would be happy to hear from you.

Top categories