rubyforgood / rubyforgood/casa

Specs rendering the casa_app layout fail locally: tailwind.css was not declared to be precompiled

Open
#7,100 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

📚 Contributor Documentation Type: Bug 🧪 Tests
Dominant language
Ruby
Stars
381
Forks
542
Avg merge
3d 15h
Merged PRs (30d)
47

Description

What happens

On a fresh local checkout, any spec that renders the casa_app layout fails:

Sprockets::Rails::Helper::AssetNotPrecompiledError:
  Asset `tailwind.css` was not declared to be precompiled in production.
  Declare links to your assets in `app/assets/config/manifest.js`.

    //= link tailwind.css

  and restart your server
  ./app/views/layouts/casa_app.html.erb:15

For example, three examples in spec/requests/case_court_reports_spec.rb (the index action):

rspec ./spec/requests/case_court_reports_spec.rb:14  # as volunteer can view 'Generate Court Report' page
rspec ./spec/requests/case_court_reports_spec.rb:28  # as a supervisor can view the 'Generate Court Report' page
rspec ./spec/requests/case_court_reports_spec.rb:37  # as a supervisor with no cases in the organization

CI is green.github/workflows/rspec.yml runs bundle exec rails assets:precompile in its Build App step, so app/assets/builds/tailwind.css exists there. This is purely a local developer experience problem, but it hits anything rendering a casa_app page, which is a growing share of the app as the design migration proceeds.

Why

app/assets/builds/tailwind.css does not exist until someone builds it. Before #7071 ("disable on-demand asset compilation") Sprockets would compile on demand and this worked; now it is a hard failure.

The error message is actively misleading — it tells you to declare the asset in app/assets/config/manifest.js, but the manifest is already correct:

//= link_directory ../builds .css

link_directory only picks up files that exist. The real problem is that nothing has written tailwind.css yet.

Two things worth fixing

1. Document it. Neither the README nor bin/setup mentions that you must build CSS before running specs. npm run build only builds JS — CSS is a separate npm run build:css. Easy to miss, and the resulting error points you at the wrong file.

2. npm run build:css may not work. On my machine it fails outright:

$ npm run build:css
> tailwindcss -i ./app/assets/stylesheets/tailwind.css -o ./app/assets/builds/tailwind.css --minify
sh: tailwindcss: command not found

package.json declares both tailwindcss and @tailwindcss/cli at ^4.3.2, but after npm install, node_modules/@tailwindcss/ is empty and there is no node_modules/.bin/tailwindcss. In Tailwind v4 the CLI binary comes from @tailwindcss/cli, so the script may need to be npx @tailwindcss/cli — or this is an install/lockfile problem specific to my machine (arm64 macOS). Flagging it as an observation rather than a diagnosis; someone should check whether a clean npm ci produces a working tailwindcss binary before changing the script.

Suggested fix

  • Have bin/setup build CSS alongside JS, and/or add a line to the README's testing section
  • Confirm npm run build:css works from a clean npm ci, and fix the script if not
  • Optionally, make the failure self-explanatory — a clearer message than Sprockets' default would save the next person the detour through manifest.js

Context

Found while debugging #7093 — these three failures were initially mistaken for fallout from that work before being traced to missing built assets.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with package.json, bin/setup, the README testing section, and app/assets/config/manifest.js. Run npm ci followed by npm run build:css, then reproduce a listed case_court_reports_spec.rb example to verify the local setup. Done means the CSS build works cleanly and setup or documentation prevents casa_app specs from failing because tailwind.css is absent.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, rails, ruby, tailwindcss
Domain
build-system, developer-experience, testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
64/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.