Inconsistent location of tailwind.config.js

rubyonrails-talk
1

Hey all,

tl;dr After chasing a red herring for two days, I discovered that tailwind.config.js is copied to a different location with different content, depending on how you add Tailwind to your application. Confusion ensues.

A Tale of Two tailwind.config.js Locations

Method 1:

rails new foo --javascript=esbuild --css=tailwind

copies tailwind.config.js to APP_ROOT, and contains 8 lines of config

Method 2:

rails new bar --javascript=esbuild && cd bar
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install

copies tailwind.config.js to APP_ROOT/config, and contains 22 lines config (where even the ‘matching’ lines are different from above.)

This might seem like a harmless issue; I guess most people (including 3-days-ago-me) don’t know or care about the location of tailwind.config.js - becuase it just works™️, no matter how you install it, right?

Philosophical debate aside (namely: no matter how you install/add TW to your app, you should get the same result imo): I ran into a practical issue where phlex-rails’s installer relied on tailwind.config.js living in APP_ROOT. This was not the case, so my tailwind.config.js was missing a crucial bit that sent me on a wild-goose chase thinking that the issue is in Phlex (or the way I’m using it), rather than 3 missing characters in tailwind.config.js.

There are various easy/obvious/quick solutions to this (e.g. just move tailwind.config.js to APP_ROOT if it shows up anywhere else; patch tailwind-rails to copy the file to APP_ROOT rather than APP_ROOT/config; patch phlex-rails to look for tailwind.config.js in various places etc.)

However, I think the real solution would be to use a ‘shared’ generator between rails and tailwind-rails, ensuring that tailwind.config.js is consistently in the same location/with the same content, no matter the method it was generated with.

tailwindcss-rails/lib/install/tailwindcss.rb at main · rails/tailwindcss-rails · GitHub (the generator that copies tailwind.config.js to APP_ROOT/config) hasn’t been changed in 2 years, so it’s quite obvious that it’s out of sync with Rails’s --css=Tailwind flag.

Thoughts?

3 Likes
2

Is the problem also that Rails is inconsistent? Configuration files at root and /config.

Root is getting cluttered.

3

That might be a (separate) problem as well, I can’t really speak to that. I don’t want to get overly dogmatic or anything, but APP_ROOT/config has been traditionally reserved for Rails-specific stuff, so it might not be a great place for JS/frontend config?

That said. I agree that configuration is starting to be all over the place - Docker, PWA manifest, Rubocop, git config, Procfile, JS bundler/frontend stuff are standard Rails today (or soon, with Rails 8), and because of that, they maybe DO belong under the standard config dir (i.e. APP_ROOT/config) :thinking: