Add Tailwind to a Solidus store

Question

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?

Answer 1

Adding this to StackOverflow just in case some people need it.

Thanks to kennyadsl's answer to my GH dicussion and this thread on the Solidus official Slack channel, here are the steps to follow to have a Solidus store running with Tailwind:

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" %>

Please note that by doing so, you will lose all the design from the Solidus Starter Frontend when you implement Tailwind. And that's where the fun part begins!

Then, start Rails with:

bin/dev

You can now add Tailwind classes to your HTML as you would normally do!