How to add tailwind CSS to your Shopify theme

Ilias Haddad - Shopify Developer | Full Stack Developer | Freelancer

December 16, 2020 - 1 min read

In the 12th article of the #4WeeksOfShopifyDev challenge, I'll talking about how you can add tailwind css to your Shopify theme and add only used Tailwind CSS code in your liquid code.

Let's do it!

  • First, we need to download your Shopify theme locally using Shopify themekit

Install ThemeKit

ThemeKit is the Offical Shopify tool to work with Shopify themes locally

macOS Installation

brew tap shopify/shopify

brew install themekit

Windows Chocolatey Installation

choco install themekit

Linux Installation

curl -s [<https://shopify.github.io/themekit/scripts/install.py>](<https://shopify.github.io/themekit/scripts/install.py>) | sudo python

Create Private Shopify App

  • Go Admin > Apps and click on manage private apps at the bottom of the page  How to setup a local shopify theme development environment)

  • Click on Enable Private App Development and enable it  How to setup a local shopify theme development environment)

  • Create a new private app and select Themes with reading and write permissions  How to setup a local shopify theme development environment)

  • Copy the Password

Configure ThemeKit

Create a directory for this theme

Run this command to download your theme code

theme get -p=your-password -s=[you-store.myshopify.com](<http://you-store.myshopify.com/>) -t=your-theme-id

 How to setup a local shopify theme development environment)

In the theme directory, we need to initialize a node js project (You should have Node JS installed)

  • Run this code to create new package.json file
npm init -y
  • We need to install these dependecies to add tailwind css
npm install tailwindcss autoprefixer postcss
  • Run this command to create tailwind.config.js file
 npx tailwindcss init
  • Paste this code to add only used CSS classes in your Shopify theme file
module.exports = {
  purge: {
    enabled: true,
    content: ["./**/*.liquid"],
  },
};
  • Create new file called postcss.config.js file
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
  • Create new folder called css and create new file under this directory called application.css
  • Paste this code to import Tailwind CSS code
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;
  • Run this code to build the tailwind CSS code and you'll get application.css.liquid file which contains all tailwind CSS code needed for your theme
npx tailwindcss build css/application.css -o assets/application.css.liquid
  • You need to add the tailwind CSS build code to your Shopify theme by adding this code to your theme.liquid file
{{ "application.css" | asset_url | stylesheet_tag }}
  • Run this command to upload the new files and change and watch for new changes to your remote Shopify theme
theme watch
  • You can add this code in package.json under scripts and it's will build tailwind css code and deploy the theme
"build": "npx tailwindcss build css/application.css -o assets/application.css.liquid && theme deploy"

If you enjoyed this article, don't forget to share it with other people 😇

Subscribe below to get notified of new posts.
Your comment
Let's Build Something Together

Feel free to reach out if you're looking for a developer, have a question, or just want to connect.

© Ilias Haddad 2020. All rights reserved.

Made with ❤️ in Morocco 🇲🇦