osama2kabdullah/Tailwind CSS with Shopify Theme.md

## Tailwind CSS with Shopify Theme.md

      
    Raw
  

              Tailwind CSS with Shopify Theme.md
            
          
    Add Tailwind CSS in Shopify Theme


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

yarn init -y 
#or
npm init -y

Install packages and initialize a Tailwind config file

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

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

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

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

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

Include this in your tailwind.config.js file.

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

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"
  },

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"
No results found