How to add Tailwind CSS in a shopify theme in development mode only

Tailwind CSS with Shopify Theme.md

Add Tailwind CSS in Shopify Theme

1. Initial node.js package manager with npm or yarn by running

yarn init -y 
#or
npm init -y

2. Install packages and initialize a Tailwind config file

npm install -D tailwindcss @shopify/prettier-plugin-liquid
# and
npx tailwindcss init

3. Create a CSS file in the assets directory. Name it tailwind.css or anything you want. doesnt matter.
4. Paste this line of code in this file.

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Add a Liquid Stylesheet Tag to theme.liquid File in layouts Folder.

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

6. Include this in your tailwind.config.js file.

module.exports = {
    ...
    content: ['./**/*.{liquid,json}'],
    ...
}

7. Add a Watch Script to package.json file. This will continuasly compile your Tailwind CSS into raw css. Then your theme get the raw css.

"scripts": {
    "watch": "npx tailwind -i ./assets/tailwind.css -o ./assets/application.css --watch"
  },

8. Alternatively you can write a script in your package.json file.

"start": "shopify theme dev",
"watch": "npx tailwind -i ./assets/tailwind.css -o ./assets/application.css --watch",
"dev": "npm run watch & npm run start"

This will help you run these aretwo in one command. If you use out of UNIX-like machine. This will maybe not work. But you can try this-

"dev": "npm-run-all --parallel start-watch wp-server"

Thanks so much for making this guide! I'm new to Shopify dev. Will this work with Liquid? I have a feeling not?

Thanks so much for making this guide! I'm new to Shopify dev. Will this work with Liquid? I have a feeling not?

Yes, it will work. I have tried on our project. see this repo - https://github.com/osama2kabdullah/Theme1992

Great! Thank you so much!

…

On Thu, Jan 16, 2025 at 4:45 PM Osama Abdullah ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Thanks so much for making this guide! I'm new to Shopify dev. Will this work with Liquid? I have a feeling not? Yes, it will work. I have tried on our project. see this repo - https://github.com/osama2kabdullah/Theme1992 — Reply to this email directly, view it on GitHub <https://gist.github.com/osama2kabdullah/e3a64df3d2b514ee2cfe8bbb19e4c8ac#gistcomment-5393837> or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH5F4AQFWMBHJGQX7WYPJBL2LAR6ZBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMRZGI3TIOJTU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .