loading...
Cover image for Building Shopify themes with Tailwind CSS

Building Shopify themes with Tailwind CSS

wearethreebears profile image Liam Hall Updated on ・6 min read

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 themekit
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

  • 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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

npm install tailwindcss
Enter fullscreen mode Exit fullscreen mode

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

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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',
    ],
  },
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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 }}
Enter fullscreen mode Exit fullscreen mode

with:

{{ "application.css" | asset_url | stylesheet_tag }}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

theme watch
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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, Dev.to and/ or Twitter.

Discussion

pic
Editor guide
Collapse
dnirns profile image
dnirns

Just a note in case anyone has the same issue, I had to run:

brew install shopify/shopify/themekit

In place of:

brew install theme kit

Collapse
wearethreebears profile image
Liam Hall Author

I’ll make a note of that in the post - Thank you 🤘

Collapse
wlbentley profile image
W L Bentley

The correct command is brew install themekit, without the space. This works correctly.

Collapse
dnirns profile image
dnirns

Nice, have been looking into something like this for an upcoming project, some useful info in here.

I was wondering, do you know of any ways to use React for a shopify theme with their theme-kit? The documentation I’ve been going through so far hasn’t been that useful for what I’m hoping to do. Perhaps this will end up being an easier approach for me to take?

Collapse
wearethreebears profile image
Liam Hall Author

So I use Vue rather than React but I’m planning on doing a little walk through - It’ll be a similar process to this and you could definitely use the same approach for React. Once you’re working locally with Theme Kit you can treat it almost like any other project, just install React via npm and get a build tool like Webpack etc up. I think the Vue walk through I’m planning to do should be easily transferable to React.

Collapse
dnirns profile image
dnirns

Oh amazing, thanks. I’ll definitely keep an eye out for that, look forward to it! 🤘🏻

Collapse
ben profile image
Ben Halpern

Thanks for this!

Collapse
taylorpage71 profile image
Taylor Page

Thanks for this! I have been getting back into Shopify after helping another dev with some theme tweaking and have really come to enjoy using TailwindCSS. Gonna have to take this for a spin.

Collapse
danpete profile image
Dan Sack

This is perfect! Simplest way I've seen to use tailwind. Thanks for the great guide!

Collapse
banji220 profile image
Banji

Use some pics!

Collapse
wearethreebears profile image
Liam Hall Author

Hi Banji, which part of this would you find easier to follow with pictures?

Collapse
banji220 profile image
Banji

That would be your choice, But I suggest to use some pics in your posts!
Keep it up
Happy Coding Liam Hall

Collapse
geojensen profile image
George Jensen

Liam, I'm starting a shopify project soon. are you interested in working on it using tailwind?

Collapse
wearethreebears profile image
Liam Hall Author

Hi George, I’d love to hear more about this project, please drop me an email at hello@wearethreebears.co.uk