TailwindCSS in Production

[GregorWedlich]

Hi Bjoern,

thanks a lot for sharing your PoC with us. I have a question, have you worked with TailwindCSS and Alpine.js in Shopware 6 Productiv since you created the tutorial?

I come from the JS world and TailwindCSS is my preferred choice for styling frontends and it would be awesome if you could give me some info before I dive into Shopware and Tailwind :)

[BrocksiNet]

Hi Monty,

we using Alpine.js a lot in our customer projects. Because easy to integrate and can be used for animations, small templates and so on. But we do not use the tailwind-theme in our customer projects. Sadly.

So the PoC was for demonstrating how you could integrate it. And there will be bootstrap 5 in coming Shopware 6.5 version so some things will not be soo bad anymore in the storefront area. But the problems with the plugin system that you have one big js file at the end will not be solved with bootstrap 5.

The tailwind-theme was a nice idea but too much work to change all templates. So what I have in mind is some Shopware6 TailwindKit I would call it. So just providing a good build-process for css/scsss, adding unocss to not need to change all templates and then also having a custom build process for js by page type and the option to activate/deactivate plugins via admin.

Hope this thought's are helping ✌️

[GregorWedlich]

Yes, with Alpine.js it is clear because it can be easily integrated via CDN, similar to how jQuery can be integrated...

The idea of a TailwindKit for SW6 sounds good, but I think we don't have enough time for it. On the other hand, if we use a front-end framework like NextJS, we would also need to create all the components from scratch. Mhh :D

I will also try something and maybe I will find the time to create something like TailwindKit :)

[BrocksiNet]

Maybe also have a look at shopware frontends docu and github. 🥳

It is pretty new 🎂