How to Build Shopify Theme with Tailwind CSS

shopify recommended tailwind CSS to develop themes. in this article, we explain easy steps on How to Build Shopify Theme with Tailwind CSS?

Shopify is one of the largest e-commerce platforms on the planet, with a massive 20% global market share of the top 1 million websites using eCommerce technologies (According to Built with — Correct at the time of writing). This makes Shopify very lucrative for developers, from building bespoke themes for clients and reusable themes for the Theme Store to applications for the Shopify App Store.

With all that said the built-in, browser-based theme editing experience is limited and far from enjoyable. Thankfully Shopify also offers Shopify Theme Kit, Shopify Theme Kit allows us to edit themes locally in our favorite text editor and watch for changes that are automatically pushed to our Shopify store. The advantages of editing our files locally don’t just stop at being able to use our favorite text editor though, it also allows us to take advantage of build tools like Webpack, Gulp, etc.

Getting started with Theme Kit

Installation

If you haven’t used Theme Kit before you’ll need to install it, if you have already installed Theme Kit you can skip ahead to Get API Access

macOS Installation

Use Homebrew to install Theme Kit by running the following commands:

brew tap shopify/shopify
brew install theme kit

Windows Chocolatey Installation

If you have Chocolatey installed install Theme Kit by running the following commands:

choco install theme kit

Linux Installation

If you are on a Linux-based system, you can use the following installation script to download and install the latest Theme Kit automatically:

curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python

Get API Access

To connect Theme Kit to our store we’ll need to create a private app in the store’s Shopify Admin. If you’ve already created a private app you can skip ahead to Create a Theme Kit theme

• From the Shopify Admin area, we’ll open Apps from the left-hand panel.
• Toward the bottom of the page, we need to click on Manage private apps
• Then we’ll click on Create new private app (If there’s a notice that reads “Private app development is disabled”, then we’ll need to click “Enable private app development” first. Note: Only the store owner can enable private app development)
• In the App details section, we must fill out the app name and contact email address.
• We need to scroll down to the Admin API section and click Show inactive Admin API permissions.
• Scroll to the Themes section and select Read and write from the dropdown.
• Click Save.
• Read the private app confirmation dialog, then click Create app.

Once we’ve created our app we’ll be returned to our app detail page, and unique access credentials are visible in the Admin API section. We’ll need to copy the password, this will be needed in the next step.

Create a Theme Kit theme

Now we have Theme Kit installed and we have created our private app we are ready to create our new Theme Kit theme. First, we’ll open up our chosen themes directory and create a new folder with the name of our theme, for this example, we’ll call it tailwind-shopify-theme. Upon creating our tailwind-shopify-theme the folder we’ll need to navigate there with our terminal and create our Theme Kit theme by running the following command:

theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]

Where [your-password] is equal to the API password from our private application, [your-store.myshopify.com] is equal to our stores myshopify.com domain, and [theme name] is equal to our theme name (If our theme name has spaces we’ll need to wrap this in quote marks).

If we’ve successfully followed the steps to create our Shopify Theme Kit theme it’ll now appear in our Shopify Admin. We can see this by opening Online store from the left-hand panel and clicking Themes below. From the Theme’s page, we can scroll down to Theme library which should now list our new Theme.

Watching our Shopify theme for changes

Now that we are connected locally to our online Shopify theme, we can begin watching our local files for changes. To begin watching our theme we need to navigate to our theme folder from our terminal, in the case of the example we used previously, tailwind-shopify-theme. Once in the theme folder, we can run the following command to start watching our files for changes:

theme watch

If we would like to see this in action, we can preview our new theme by finding it in the Theme library section of the Themes page and clicking Actions > Preview. Then in our local text editor, edit the index.liquid file from the templates directory and save it. We can then refresh our theme preview and see our changes in Shopify.

Installing Tailwind

Now that we can edit our Shopify themes locally we can get started using Tailwind. The first thing we need to do is create our package.json file by running the following command and working through the steps – defaults are fine for this example:

npm init

Once our package.json file has been created we can install Tailwind using the following command:

npm install tailwindcss

Now that tailwind is installed we can create our tailwind.config.js file using the following command:

npx tailwindcss init

This will create a tailwind.config.js, let’s open that tailwind.config.jsfile. First, let’s uncomment the key-value pairs in the future object, this will save us from receiving any deprecation warnings later. Now, we need to edit the purge array and replace it with an object that has two keys, content and enabled. enabled will be a Boolean that will tell Tailwind whether we’d like to purge our styles or not, we’ll default this to false for now but we’ll back to this later. content will be an array telling Tailwind where to look for our styles, we’ll set it up to look in the following common Shopify folders.

purge: {
enabled: false,
content: [
'./layout/*.liquid',
'./templates/*.liquid',
'./sections/*.liquid',
'./snippets/*.liquid',
],
},

Now Tailwind is installed we need to create our source stylesheet. In the root of our Shopify theme, we can create a directory called src/css and within this folder, we’ll create a file called application.css. Once we’ve created our applications.css we need to paste in the following code:

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */@tailwind utilities;

Editing the output CSS

By default, our new Theme Kit theme will come with a folder called assets containing a file called application.scss.liquid, we need to edit this file name and change it to application.css.liquid. Once we’ve changed the name we must open the theme.liquid file from the layout folder and replace the following line:

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

with:

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

TailwindCSS in development

When using Tailwind in development we need to ensure we have all of Tailwind’s styles at our disposal. Earlier when editing the tailwind.config.js file we set enabled on the purge object to false, this means that our Tailwind build will not remove any of Tailwind’s utility classes. Whenever we are developing our theme we will need to ensure that enabled on the purge object in tailwind.config.js is set to false. Now that PurgeCSS is disabled we can run:

npx tailwindcss build src/css/application.css -o assets/application.css.liquid

This will build our application.css.liquid file and include all of Tailwind’s utility classes. Now we have access to all of these styles we can deploy the stylesheet using the following command:

theme deploy

Now that the development stylesheet deployed, we can watch our theme and begin building theme using the:

theme watch

TailwindCSS in production

When using Tailwind in production we need to ensure we remove any unused styles. As in Development, PurgeCSS is enabled/disabled in the tailwind.config.js file. Whenever we finish development and want to push our production-ready code we’ll want to set enabled the purge object in tailwind.config.js to true. Now PurgeCSS is enabled we can deploy our stylesheet:

npx tailwindcss build src/css/application.css -o assets/application.css.liquid

This will build our application.css.liquid file and remove any unused Tailwind utility classes.

Conclusion

You should now be set to start creating Shopify themes with Tailwind CSS. Happy creating!

If you enjoyed this, you might also enjoy these post

How Do I Add Facebook Messenger Chat to Shopify Store?

How to Submit Bulk Images From Shopify to Google Indexing