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
rails new amazing_store --css tailwind --skip-javascript
instead of just rails new amazing_store --skip-javascript
.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?
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!