Shopify Theme Tailwind CSS
This repository contains a starting point for Shopify Online Store 2.0 Theme development using Tailwind CSS and the default Dawn theme.
:bulb: On june 29, Shopify introduced a new git-based workflow. To learn more, visit the create a theme guide or visit shopify.dev.
Workflow
A short description of this workflow:
- Edit theme locally using the Shopify CLI and Tailwind
- Commit changes to feature branch
- Merge feature branch with main branch once feature is implemented
- Automatically publish build to dist branch using Github Actions
- Sync Shopify store with dist branch
Technologies used
- Tailwind CSS
- The main css file is located in
src/index.css - This file will be built to
assets/index.css
- The main css file is located in
- Shopify CLI
- Github Actions to deploy the theme to the dist branch on push to the main branch
You can copy the Lighthouse Github Action from the original Dawn theme repository to track the performance of your theme on every push.
Prerequisites
- The shopify CLI is installed on your machine.
Installation
Run the following commands:
git clone [email protected]:wesselvanree/shopify-theme-tailwind.git
cd shopify-theme-tailwind
npm install
Make sure the assets/index.css output file is included in the
layout/theme.liquid file. Add this line of code under the base.css stylesheet
tag.
<!-- line 98 -->
{{ 'index.css' | asset_url | stylesheet_tag }}
Once you've made your first commit, a dist branch will be created on Github. Use
the Shopify Github integration to sync your theme with the dist branch by going
to your admin dashboard > Online Store > Themes > Add Theme >
Connect from Github.
Usage
Development
First, log in to your store if you was not logged in already.
shopify login --store your-store-name.myshopify.com
Run npm start. This command will watch your files, build on change and update
the Shopify theme preview.
Production
This repository contains a Github Action that uses
JamesIves/[email protected].
This action does not activate Github Pages in your repository but just commits
the build to another branch. Currently, the action is configured to deploy the
build to the dist branch. You can easily customize this by editing
.github/workflows/deploy.yml.
Alternatively, you can create the build manually. Run npm run build to build
for production. You can use the
Shopify Github integration
to track a branch in your Github repository.
Final notes
Useful links
Things to keep in mind
Using the built-in Shopify code editor would not be effective when using file transformations like this. The changes made by your merchant in the code editor would be overridden when you push new changes.
Suggestions
If you have any suggestions to improve this repository, please open an issue. I would be happy to hear from you.
