Add Tailwind to a Solidus store

[gabrielguerin]

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.
Adding Tailwind's CDN to storefront.html.erb seems to work however (with the text being very small).

Steps

1. 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.
2. Then, when prompted, I chose to install the solidus_starter_frontend storefront.

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?

[kennyadsl]

Hello!

I have a Solidus store running with Tailwind. Here's the step I followed to make it work:

rails new amazing_store # avoid the --skip-javascript flag here
cd amazing_store
bundle add 'solidus'
bin/rails generate solidus:install # devise: Y, payment: none, frontend: starter
bundle add tailwindcss-rails
rails tailwindcss:install

In layout/storefront.html.erb:

-    <%= stylesheet_link_tag 'solidus_starter_frontend', media: 'screen' %>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

Now start rails with:

bin/dev

At this point you should be able to add tailwind classes to your HTML; all changes to related files will trigger a recompile, and a page reload in the browser automatically.

[gabrielguerin]

Thanks @kennyadsl, your step-by-step works perfectly!