Building Shopify themes with Tailwind CSS
Tags: webdev, tutorial, css, javascript
Published: 2020-10-09 11:49:25

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](https://trends.builtwith.com/shop) - 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](#get-api-access)

### macOS Installation
Use [Homebrew](https://brew.sh/) to install Theme Kit by running the following commands:

```
brew tap shopify/shopify
brew install themekit
```

> If `brew install theme kit` does not work for you, please try `brew install shopify/shopify/themekit` as pointed out by @dnirns in the comments

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

```
choco install themekit
```

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

```
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 stores Shopify Admin. If you've already created a private app you can skip ahead to [Create a Theme Kit theme](#create-a-theme-kit-theme)

- From the Shopify Admin area, we'll open `Apps` from the left-hand panel.
- Towards 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, 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` 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 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.js`file. 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.

```js
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:

```scss
/* 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:

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

with: 
```liquid
{{ "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 our theme using:

```
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` on 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.

> You may want to set the enabled Boolean via an environment variable

# Conclusion

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

If you’ve found this article useful, please follow me on [Medium](https://medium.com/@wearethreebears), Dev.to and/ or [Twitter](https://twitter.com/wearethreebears).