DEV Community

Cover image for How to add tailwind CSS to your Shopify theme
Ilias Haddad
Ilias Haddad

Posted on • Originally published at iliashaddad.com

How to add tailwind CSS to your Shopify theme

In the 12th article of the #4WeeksOfShopifyDev challenge, I'll be 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
Enter fullscreen mode Exit fullscreen mode

Windows Chocolatey Installation

choco install themekit
Enter fullscreen mode Exit fullscreen mode

Linux Installation

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

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
Enter fullscreen mode Exit fullscreen mode

 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
Enter fullscreen mode Exit fullscreen mode
  • We need to install these dependencies to add tailwind css
npm install tailwindcss autoprefixer postcss
Enter fullscreen mode Exit fullscreen mode
  • Run this command to create tailwind.config.js file
 npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode
  • Paste this code to add only used CSS classes in your Shopify theme file
module.exports = {
  purge: {
    enabled: true,
    content: ["./**/*.liquid"],
  },
};
Enter fullscreen mode Exit fullscreen mode
  • Create new file called postcss.config.js file
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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 }}
Enter fullscreen mode Exit fullscreen mode
  • Run this command to upload the new files and change and watch for new changes to your remote Shopify theme
theme watch
Enter fullscreen mode Exit fullscreen mode
  • 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"
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)