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
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
Create a new private app and select Themes with reading and write permissions
Copy the Password
Configure ThemeKit
- Go Online Store > Themes and click on edit code for the Shopify theme you want to work with locally
- In the URL bar, you'll have the Shopify theme ID like this one https://ilias-demo.myshopify.com/admin/themes/ID
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
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 dependencies 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 😇
Top comments (0)