DEV Community

Building Shopify themes with Tailwind CSS

Liam Hall on October 09, 2020

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 eComme...

Read full post

dnirns • Oct 10 '20

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

Liam Hall • Oct 10 '20

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

W L Bentley • Nov 23 '20

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

dnirns • Oct 9 '20

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?

Liam Hall • Oct 9 '20

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.

dnirns • Oct 9 '20

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

Peter Hallander • Apr 2

Nice writeup on Tailwind + Shopify themes. One area where Tailwind's utility approach really shines is implementing consistent hover effects on brand/partner logo grids - something a lot of Shopify themes handle inconsistently.

A common pattern is displaying trusted brands or partner logos in a row or grid. The typical approach is to show them in grayscale by default and restore color on hover, which keeps the section visually clean without looking empty:

.logo-grid img {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.logo-grid img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

With Tailwind you can express this as grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all duration-300 directly on the img element. Clean and consistent across the theme.

The effect also works well for testimonial logos, press mentions sections, and payment method icons - anywhere you want the logos present but not visually competing with your primary CTAs.

I actually built a Shopify app (Eye Catching - apps.shopify.com/beautiful-brands) that adds this exact grayscale-to-color effect as a configurable section, for merchants who want it without touching theme code. Disclosure: I'm the developer. But for anyone building themes directly in Tailwind, the utility approach is definitely the right way to handle it natively.

Banji • Oct 9 '20

Use some pics!

Liam Hall • Oct 9 '20

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

Banji • Oct 9 '20

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

Ben Halpern • Oct 9 '20

Thanks for this!

Taylor Page • Nov 11 '20

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.