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?
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?
In both ways, tailwind ships rem based units, setting font-size to 100% will increase the size of theme components drastically and will cause visual UI inconsistencies.
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?
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?
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?
Motivation of the npm-run-all package: Cross platform. We sometimes use & to run multiple command in parallel, but cmd.exe (npm run-script uses it by default) does not support the &. Half of Node.js users are using it on Windows, so the use of & might block contributions. npm-run-all --parallel works well on Windows as well.
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. [Screenshot: pasteboard.co/lDp3W7LT1P2K.jpg]
![PURPEECH - นี่ฉันเองคนที่... (It's me) [Official MV]](http://i.ytimg.com/vi/NuhHd0hOOg8/mqdefault.jpg)
Great video, thank you!
My pleasure!
Youness One thing to say Wonderful and bundle of thanks you made it easy.
Thanks!
Thank you for this! 🙏
You're so welcome!
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?
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?
In both ways, tailwind ships rem based units, setting font-size to 100% will increase the size of theme components drastically and will cause visual UI inconsistencies.
you saved my life, thank you
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?
This will work seamlessly with Github Integration. just like before.
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?
Did u check you might already have the file?
Helpful video. Can you build shopify theme + Tailwind from the scratch ?
I will think about it, thanks for feedback.
Why do you prefer vite over the default tailwind install via tailwind CLI?
I also wonder this.
Since we're using Vite as the build tool, as he said in 6:16, it's ideal to watch for changes during development and minify the code for production.
I used vite because its fast and its a good starting point, especially when you wanna handle JS as well not only CSS.
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?
Thats opinions tailwind is popular and solve many issues especially styles composability.
What about creating a clean theme because right now in your tutorial have old style css from dawn and tailwind.
Yes you are right or you can use a tailwind prefix.
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?
Yes it was probably a mistake, you can do that and it will allow you to not run the double terminal session.
Motivation of the npm-run-all package: Cross platform. We sometimes use & to run multiple command in parallel, but cmd.exe (npm run-script uses it by default) does not support the &. Half of Node.js users are using it on Windows, so the use of & might block contributions. npm-run-all --parallel works well on Windows as well.
can you share your notion file
I no longer can find it sadly, but everything is in github @odestry.
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.
[Screenshot: pasteboard.co/lDp3W7LT1P2K.jpg]
You can either use tailwind prefixes or rename the Dawn grid from ".grid" to ".grid-layout"
@@joinodestry I already solve it using prefix. I just wanted to know how you handled it. thanks.
I also get it to play nice with Dawn with prefixes. Would love to not use them tho. Do you figure out another way of handling this?@@benhasanaltun