Add Tailwind to a Solidus store tutorial Hello everyone! I have been trying to add Tailwind to a Solidus store with no luck. Adding Tailwind the usual way you would do on any Rails app does not work, as Tailwind components do not display properly. Unfortunately, I haven't found any guide on how to achieve this. Basically, I would like to apply changes to Solidus' Starter Frontend using Tailwind. I have checked this repository (found on this GitHub issue) and compared it with my own code and I cannot find any difference with mine. Do you have any idea on how to achieve this? EDIT: Adding Tailwind's CDN to

storefront.html.erb

seems to work however (with the text being very small).

Hi @gab.stlouis, could you detail which steps have you followed so far? Ideally, do it on a GH discussion on https://github.com/solidusio/solidus/discussions 🙏

Hello @waiting_for_dev, I have followed every steps on the Getting Started page from Solidus' official documentation, but with

rails new amazing_store --css tailwind --skip-javascript

instead of just

rails new amazing_store --skip-javascript

. Then, when prompted, I chose to install the solidus_starter_frontend storefront. I will also add this on a GH discussion.

Thanks, @Gabriel Guérin. Did you follow the instructions on https://tailwindcss.com/docs/guides/ruby-on-rails? There’s more stuff you need to do besides the

-css

flag. For instance, the JS stuff.

@waiting_for_dev let me check this. Meanwhile, I have created a GH discussion as suggested.

Do you have any errors in the JS console?

I am using Tailwind on a project currently, it's the old frontend, but the modification logic should be the same. You've got to override 'vendor/assets/stylesheets/spree/frontend/all.css' ( from https://github.com/solidusio/solidus_starter_frontend/tree/main/templates/vendor/assets ) copy the files to the correct folder in your project, and then add:

@tailwind _base_;

@tailwind _components_;

@tailwind _utilities_;

And then override the frontend "storefront" layout at https://github.com/solidusio/solidus_starter_frontend/blob/main/templates/app/views/layouts/storefront.html.erb to include:

<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

The installer can only look for layout paths in the project, I think, not inside of separate gems, see: https://github.com/rails/tailwindcss-rails/blob/main/lib/install/tailwindcss.rb#L7

@waiting_for_dev I have two bugs: •

Uncaught ReferenceError: $ is not defined

•

Uncaught ReferenceError: Solidus is not defined

Hello @Cody Baldwin, thanks for your answer! I will try to implement your suggestions. Does this mean that I will lose all the design from Solidus Starter Frontend when I implement Tailwind? Meaning, I will have to redo all the frontend with Tailwind, store and admin panel, to get my app going?

Yup, but that's the fun part right! The starter frontend looks like it isn't designed with any framework (Tailwind, Bootstrap, Material, Foundation, etc). Hence the "starter," it's to help you get started. See: https://github.com/solidusio/solidus_starter_frontend/tree/main/templates I haven't checked the code much. But, it does use jQuery/UJS, hence your first console error there.

Solidus shouldn’t mess with how Tailwind is installed on a Rails application. If you have the time, I’d recommend stepping back for a second and reading through the Rails docs about CSS & JS. Probably, a good idea is to try to install Tailwind on a fresh Rails application, and later try to do the same steps on a Solidus store.

Hey @Cody Baldwin! Thanks, I will try as soon as I have time. Based on what you say, I guess that I can just add Tailwind above the "Starter" theme, and gradually switch everything to Tailwind right? Instead of having to redesign the whole app. @waiting_for_dev thanks for the suggestion, I will take a look into the readings. Actually, I was testing Solidus and installed Tailwind into a brand new Solidus app therefore. That is why I was a bit surprised that it wouldn't work straight away. Once I'm done, I will add my solution into the GitHub discussion I have opened. 😊

@Gabriel Guérin I'm also interested in Tailwind for storefront, but didn't tried yet myself

I updated the Gh Discussion with a working path to have Tailwind on a fresh Solidus app.

Thanks @kennyadsl! I'll take a look

Nice!