How to add tailwind CSS to your Shopify theme
Published Date: December 17, 2020
In the 12th article of the #4WeeksOfShopifyDev challenge, I'll 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!
Youtube Video with updated method
- 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/shopifybrew 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
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
- 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
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
- We need to install these dependecies 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 😇
Related Posts
#4WeeksOfShopifyDevConvert your Shopify store to PWA for better performances (conversion)
December 31, 2020
On the 16th of the #4WeeksOfShopifyDev challenge, I’ll be talking about Why you should convert your Shopify store to PWA for better performance?
#4WeeksOfShopifyDevWhat benefits of being a Shopify partner and make money using it?
December 24, 2020
#4WeeksOfShopifyDevWhy developers should invest in learning the Shopify App or Theme development?
December 21, 2020
Convert your Shopify store to PWA for better performances (conversion)
December 31, 2020
On the 16th of the #4WeeksOfShopifyDev challenge, I’ll be talking about Why you should convert your Shopify store to PWA for better performance?
What benefits of being a Shopify partner and make money using it?
December 24, 2020
Why developers should invest in learning the Shopify App or Theme development?
December 21, 2020