How to setup Tailwind CSS with Shopify themes

・ Ressources

・ Chapters

00:00 Introduction
00:50 Installing and configuring Shopify CLI
01:15 Cloning Dawn, Shopify's default theme, for our project
01:50 Setting up a node project using npm
02:33 Installing necessary dependencies like Tailwind CSS, PostCSS, Autoprefixer
04:20 Adding Tailwind directories in the styles entry
08:30 Building assets files using Vite and running Shopify development server
08:40 Resolving common errors and tips on avoiding them
09:30 Running the Vite watch command for building Tailwind CSS classes
10:50 A quick test to verify that Tailwind classes are working as expected
12:00 How to fix a common issue with Dawn's default font size parameter and Tailwind using a plugin

By the end of this video, you should be able to set up Tailwind CSS with your Shopify theme seamlessly. This tutorial will also help you avoid common errors and pitfalls associated with the setup process.

Happy Coding!

・Keep in touch with us

・Join the community

[shopifydevs]

Thanks for creating this super valuable content!

[muhammadtalhaamjad]

Youness One thing to say Wonderful and bundle of thanks you made it easy.

[jesf]

What about all the included css files from Dawn for example or whatever theme you're using. Is it a matter of slowly building out with tailwind and removing old styles from the theme as you go?

[gerrcass]

Thanks for the video. 12:08 I'm curious—why not just set font-size: 100%; on the root element to align with Tailwind's default rem settings? Is there an advantage to using the additional package instead?

[ZainUlAbideen-us]

What if I change 62.5% to 100%. Thisll also get the job done but I'm curious if there are any drawbacks of doing so. Thanks.

[ryanjohnson]

How will this theme structure work with the Shopify/GitHub integration? Will any of my files be overwritten when changes made in the Shopify editor are pushed to GitHub?

[unamgege]

Could you make a video about using adastra too please?

[austriker]

at 15:50 can you just add this script `npm run shopify:dev && npm run watch` instead of using that third party package to run multiple scripts?

[ShopifyyDeveloper]

Helpful video. Can you build shopify theme + Tailwind from the scratch ?

[happyOrpheus]

Hello, thank you for the video! Still, I keep receiving this error after the project launch and an automatically-created styles2.css file in the assets folder:
'ERROR >> update assets/styles.css:
source sequence is illegal/malformed utf-8'
The contents of the old styles.css file crack up.
Do you have any idea how to fix this?

[justdoitk]

What about creating a clean theme because right now in your tutorial have old style css from dawn and tailwind.

[austriker]

Why do you prefer vite over the default tailwind install via tailwind CLI?

[mohamedhassentetbirt]

I don't get it, what's the benefit ?

I think the strong thing about tailwind is its utility classes that can be outputted depending on your usage only, so if you use only 10 classes, it'll output only those 10 classes for you to work.

But with the way i saw it in the video, you built it before adding any style? meaning you sent a predefined CSS that'll always get outputted no matter what you add, right?

So my question is what's the benefit? be it a performance decision or dev experience decision, can you elaborate on why this can be useful?

[benhasanaltun]

Youness, Great video, thank you! Well, there are some areas that are in conflict, such as the grid, how did you solve them? For example, it can be seen from the video that the grid structure below is broken.