How to customize Horizon theme with tailwind and alpainejs?

Online Store and Theme Development
1

Hello Shopify Dev Community,

I’m planning to customize the Horizon theme on my Shopify store and need some guidance. Specifically, I want to:

  1. Replace the existing CSS styling with Tailwind CSS for easier and more efficient styling.
  2. Migrate the current JavaScript functionality to Alpine.js for better reactivity and simplicity.

My goal is to achieve these changes in a way that is less time-consuming and more efficient, ideally with an easy-to-follow approach.

Has anyone done similar customizations or can suggest best practices for integrating Tailwind CSS and Alpine.js into an existing Shopify theme? Any tips, resources, or step-by-step guidance would be greatly appreciated!

Thanks in advance!

2

Hey @Sodaba_Ahmadi, thanks for reaching out.

I’m not usually able to provide specificguidance for third‑party libraries like Tailwind CSS or Alpine.js, but I’m happy to share some general best practices in case it’s helpful at all for sure.

For Tailwind, you’d likely want to use a build step (Tailwind CLI/PostCSS) to compile a single CSS file into your theme’s assets, enable purge/content scanning for Liquid files, and consider a class prefix and disabling preflight to avoid style collisions.

Then, you could add the compiled CSS via theme.liquid and make updates incrementally rather than replacing everything at once.

I’m not too familiar with Alpine.js myself, but if it’s similar to Vue. I’d include the script deferred and re‑initialize components when the Theme Editor updates sections by listening for events like shopify:section:load and shopify:block:select.

As some general advice, I definitely recommend using Shopify CLI for development and preview, if you aren’t already one thing that I have found helpful myself is connecting your theme to GitHub to track changes (and allow for versioning to be a vit easier between the Online Store theme editor and your local development environment).

Like I mentioned, we don’t currently have “official” support for Tailwind/Alpine, but I hope this helps. If I can clarify anything just let me know, I can’t. guarantee that I’d be able to assist with more third party info, but I can definitely take a look and help point you in the right direction if needed :slight_smile: