DEV Community

Cover image for Building Shopify themes with Tailwind CSS

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

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

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

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

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