How to add tailwind CSS to your Shopify theme

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!

Youtube Video with updated method

  • 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/shopifybrew 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.

Related Posts

Convert your Shopify store to PWA for better performances (conversion)

On the 16th of the #4WeeksOfShopifyDev challenge, I’ll be talking Why you should convert your Shopify store to PWA for better performances?

What benefits of being a Shopify partner and make money using it?

On the 15th of the #4WeeksOfShopifyDev challenge, I’ll be talking about what benefits of being a Shopify partner?

Why developers should invest in learning the Shopify App or Theme development?

On the 14th of the #4WeeksOfShopifyDev challenge, I’ll be talking about why developers should invest in learning and becoming a Shopify developer.

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.

Email:contact@iliashaddad.com

© Ilias Haddad 2021. All rights reserved.

Made with ❤️ in Morocco 🇲🇦