Code Monkey home page Code Monkey logo

shopify-theme-tailwind's Introduction

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.

โš ๏ธ It is possible to use React with this configuration, but Hydrogen might be more useful because it provides a lot of features out-of-the-box.

Workflow

A short description of this workflow:

  • Edit theme locally using the Shopify CLI, Tailwind and Webpack
  • Commit changes to feature branch
  • Merge feature branch with main branch once feature is implemented
  • Automatically publish the production build to the dist branch using Github Actions
  • Shopify automatically syncs with the dist branch.

Technologies used

  • Tailwind CSS
    • The main css file is located in src/index.css
    • This file will be built to shopify/assets/index.css
  • Webpack
    • All src/entries/**/*.{js,jsx,ts,tsx} files will be sourced as webpack entry and the output file can be found in the assets directory. All build bundles get the extension .bundle.js instead of .{js,jsx,ts,tsx}.
  • Shopify CLI
  • Github Actions to deploy the theme to the dist branch on push to the main branch
  • Github Actions to test for build errors on every Pull Request

You can copy the Lighthouse Github Action from the original Dawn theme repository to track the performance of your theme on every push.

Disadvantages

  • Because an extra build step is involved, you need to manually copy changes made in the Shopify theme editor. Those changes will be committed to the dist branch.
  • TailwindCSS breaks some default styles of the Dawn theme.

Getting started

Prerequisites

Installation

  1. Run the following commands:

    git clone [email protected]:wesselvanree/shopify-theme-tailwind.git
    cd shopify-theme-tailwind
    npm install
    npm run install-theme
    rm -rf .git && git init

    If your default branch is not named main, please replace main with your default branch name in .github/workflows/deploy.yml

  2. Make sure the TailwindCSS output file (shopify/assets/index.css) is included in the head of your shopify/layout/theme.liquid file.

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

    The same holds for all .bundle.js files created by Webpack. You need to insert the script tags on the places where you want to use the Webpack bundle. You can do this with the following line of code:

    <script src="{{ '[your_script_name].bundle.js' | asset_url }}" defer="defer"></script>
  3. Once you've pushed your first commit to github, a dist branch will be created. 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

You will need 2 terminal windows:

  1. Serve your Shopify theme

    • First, log in to your store if you was not logged in already.
      shopify login --store your-store-name.myshopify.com
    • Serve your theme to your development store
      npm run shopify
  2. Build your code: in a separate terminal window, run npm start to start watch for file changes and build development bundles.

If you prefer to use one single terminal window, you can customize the scripts in package.json to use the npm-run-all package.

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

Further reading

Suggestions

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

shopify-theme-tailwind's People

Contributors

wesselvanree avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.