How to setup Tailwind CSS with Shopify themes

Поділитися
Вставка

КОМЕНТАРІ • 21

  • @josephandres4324
    @josephandres4324 10 місяців тому

    you saved my life, thank you

  • @wellenzhong1440
    @wellenzhong1440 4 місяці тому

    Great video, thank you!

  • @roysaucedo
    @roysaucedo 6 місяців тому

    Thank you for this! 🙏

  • @muhammadtalhaamjad4631
    @muhammadtalhaamjad4631 Рік тому +1

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

  • @justdoitk
    @justdoitk 5 місяців тому

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

  • @ryanjohnson6834
    @ryanjohnson6834 Рік тому +1

    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?

    • @weodestry
      @weodestry  Рік тому +1

      This will work seamlessly with Github Integration. just like before.

  • @austriker
    @austriker 9 місяців тому

    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
    @ShopifyyDeveloper 3 місяці тому

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

  • @happyOrpheus
    @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?

  • @mohamedhassentetbirt4585
    @mohamedhassentetbirt4585 11 місяців тому

    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?

  • @rakeshrajmahakud03
    @rakeshrajmahakud03 7 місяців тому

    can you share your notion file

  • @austriker
    @austriker 9 місяців тому

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

    • @Jan-jf4th
      @Jan-jf4th 5 місяців тому +1

      I also wonder this.

    • @gerrcassytb
      @gerrcassytb 24 дні тому

      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.

  • @conversinist
    @conversinist 4 місяці тому

    King a sat

  • @benhasanaltun
    @benhasanaltun 11 місяців тому

    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]

    • @weodestry
      @weodestry  11 місяців тому +2

      You can either use tailwind prefixes or rename the Dawn grid from ".grid" to ".grid-layout"

    • @benhasanaltun
      @benhasanaltun 11 місяців тому

      @@weodestry I already solve it using prefix. I just wanted to know how you handled it. thanks.

    • @Jan-jf4th
      @Jan-jf4th 5 місяців тому

      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