Use application.css instead of application.tailwind.css for Tailwind …

[NikhilKottoli]

Changes application.tailwind.css to application.css to resolve issues
with Rails 8's Propshaft asset pipeline when using stylesheet_link_tag :app.
Otherwise creates application.tailwind.css giving this issue:
rails/rails#55791

The .tailwind.css extension was originally used to differentiate between
CSS frameworks, but now causes 404 errors in Rails 8 with Propshaft, which
includes all stylesheets files when using the :app symbol. This causes the
source file to be referenced alongside the compiled output.

Using application.css as the source filename aligns with modern Rails
conventions and prevents conflicts while maintaining backward compatibility
with Rails 7.

[daniel-niknam]

I think this filename is sort of standard, as you can see the same pattern for other css libraries like Bootstrap CSS. As I said in the issue, there might be something else going on, because I can see everything just works fine for Bootstrap CSS. I didn't have the time to look into it in more depth, but maybe there is something else causing the issue 🤷

What if we change the output to match the generated CSS file? Not sure if that helps.

[NikhilKottoli]

for bootstrap we have application.bootstrap.scss but for tailwind we have application.tailwind.css. When Propshaft sees stylesheet_link_tag :app, it includes all CSS files. The .scss extension means Propshaft ignores it but the .css extension (even with .tailwind) makes Propshaft try to serve it, causing the 404 error because it's a source file, not a built asset.

This is what I understand about the problem. One way to solve this would be to use a non-css extension or move it to a subdirectory that Propshaft doesn't scan

or change the installer so it does not use :app

[daniel-niknam]

@NikhilKottoli You are right! I missed the .scss extension when I looked at it 🤦

I dug a bit deeper and looked into what CSS files are created with the rails new command using different CSS or JS options.

+-----------+--------------------------+----------------------------+------------------------+-------------------------+-----------------------+
|           | tailwind                 | bootstrap                  | bulma                  | postcss                 | sass                  |
+-----------+--------------------------+----------------------------+------------------------+-------------------------+-----------------------+
| importmap | application.css          | application.bootstrap.scss | application.bulma.scss | application.postcss.css | application.scss      |
|           |                          |                            |                        |                         | application.css       |
+-----------+--------------------------+----------------------------+------------------------+-------------------------+-----------------------+
| bun       | application.tailwind.css | application.bootstrap.scss | application.bulma.scss | application.postcss.css | application.sass.scss |
+-----------+--------------------------+----------------------------+------------------------+-------------------------+-----------------------+
| webpack   | application.tailwind.css | application.bootstrap.scss | application.bulma.scss | application.postcss.css | application.sass.scss |
+-----------+--------------------------+----------------------------+------------------------+-------------------------+-----------------------+
| esbuild   | application.tailwind.css | application.bootstrap.scss | application.bulma.scss | application.postcss.css | application.sass.scss |
+-----------+--------------------------+----------------------------+------------------------+-------------------------+-----------------------+
| rollup    | application.tailwind.css | application.bootstrap.scss | application.bulma.scss | application.postcss.css | application.sass.scss |
+-----------+--------------------------+----------------------------+------------------------+-------------------------+-----------------------+

To my surprise, rails new --css tailwind --js importmap generates an application.css file, not a application.tailwind.css, so you are kind of aligning them 👍

[daniel-niknam]

Seems like we don't have tests for that script. I could later run my script using your branch to see how it changes the tailwind column.

[daniel-niknam]

I checked, and I can confirm an application.css will be generated in bun, webpack, esbuild and rollup with your PR for tailwindcss, and I tested esbuild, and can confirm it will work. I couldn't find a proper way of testing this other than manual testing.