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

3 2

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 😇

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay