Hi guys, anyone reccomend using tailwind in shopify themes?
Basically my client has a lot of sections and landing pages, so I think using tailwind will DRY and of course has a beautiful codebase…
What do you think?
Thanks
If you are building a theme to give to a client that’s really up to you.
Typically client stores come with some sort of brand vision or design system that you would want to adhere to for the theme build. Utilizing tailwind for that makes some sense if you are used to the development and can provide the necessary code for extending it in the future to the client.
I’m all for reducing file size where it makes sense but I also enjoy writing “normal CSS” and setting up components to be reusable to begin with, like a price snippet that could control the look-and-feel of all prices across the storefront. Having the separation of concerns is nice too, keeping HTML with HTML, CSS with CSS, and JS with JS, as it likely helps with readability.
Ultimately I would consider the future customization of the theme and whether or not it would be easier for someone (or a team) to do simply using the Tailwind approach or quicker with the old faithful vanilla approach.
2 Likes
Trust me, I saw theme that you don’t imagine, like 60 css files, and 60MB of theme… the guy coded everything in theme, so sections have no blocks inside and aren’t extendable…
That’s why I wanted to adopt tailwind (of course there will be also some custom css), but for grid, containers, layouts, colors etc… want to use tw
Hi Craftus,
I know there are a bunch of theme devs who use Tailwind when building themes, and there’s quite a few examples available that might help with development, eg Adastra by @blanklob (here’s also a video by him that might help).
2 Likes
Here’s an example of a theme from the Shopify Theme Store that was built with Tailwind: Baseline Theme - Modern - Ecommerce Website Template
If you want to start from scratch, I’ve used this one before which is quite good.
Hi good choice, I would also recommend looking into headless if you have the bandwidth to do it.
I’ve used tailwind in our theme as well Aisle Theme - Ecommerce Website Template
I have built a few dozen custom stores with it over the past couple of years, never looked back 
if you have any specific concerns, let us know.
There’s a few more open source theme starters using tailwind,
GitHub - WolfGreyDev/syncify-tailwind-example and GitHub - james0r/slayed: Shopify starter theme using Vite with AlpineJS, TailwindCSS, Liquid AJAX Cart, and the Shopify Vite plugin..
Again
that is just terrible code patterns and not much to do with tailwind I guess. Sometimes I like to avoid tailwind for stores with frequent updates because they’re faster with css and don’t need build steps. Also, tailwind can make your markup considerably larger, adding 20 classes to each element on page isn’t always best, compare to single class and 15 lines of css. But that’s personal preference
Thanks for sharing all these resources folks! So many options for getting started with Tailwind on Shopify!!
1 Like
I’m with @Liam-Shopify here, we’ve used Adastra for three new builds right now (all include Tailwind) and are loving it. I don’t think I could code without Tailwind anymore. Adastra has been the best build tool I’ve used recently, super fast to spin up dev servers, light weight, and it builds really quickly as well!
2 Likes
I also think Tailwind is a great tool for building at speed. There are however, some considerations that may effect production – especially post production – such the ability to identify DOM elements when identifying bugs etc… I often find using standard class names on parent elements helps to alleviate such an issue.
2 Likes
We use Tailwind for all our projects at The Beyond Group. Keeping you sections and snippets and well factored is something Tailwind won’t do for you. You’ll still need to be thoughtful about how your organize your code.
What Tailwind will do is help reduce your overall CSS payload.