tailwind fails if you leave the `.html` format off of your tailwind fails if you leave the .html format off of your app/views/ filenames filenames about cssbundling-rails

[skipkayhil]

Hey @jasonfb, thanks for opening an issue!

When I follow your instructions I do get the same result (unstyled text), however I think most of the setup is working correctly and something else is going wrong.

The task to compile the tailwind css file is added to my package.json, and referenced in the Procfile:

diff --git a/Procfile.dev b/Procfile.dev
index 03c54b1..2b0b260 100644
--- a/Procfile.dev
+++ b/Procfile.dev
@@ -1,2 +1,3 @@
 web: bin/rails server -p 3000
 js: yarn build --watch
+css: yarn build:css --watch
diff --git a/package.json b/package.json
index efca9a3..e9c8f45 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,13 @@
   "dependencies": {
     "@hotwired/stimulus": "^3.2.1",
     "@hotwired/turbo-rails": "^7.2.4",
-    "esbuild": "^0.16.1"
+    "autoprefixer": "^10.4.13",
+    "esbuild": "^0.16.1",
+    "postcss": "^8.4.19",
+    "tailwindcss": "^3.2.4"
   },
   "scripts": {
-    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
+    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
+    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
   }
 }

And I can see the compiled file get loaded on my page:

However, the thing that's missing is all of the specific classes we added to the partial. This most likely has to do with the view not being in the list of content in tailwind.config.js.

In your reproduction script, app/views/articles/index.html.erb gets renamed to app/views/articles/index.erb, which isn't in content list regex by default:

cssbundling-rails/lib/install/tailwind/tailwind.config.js

Line 3 in def749d

'./app/views/**/*.html.erb',

If you rename the file back to app/views/articles/index.html.erb, then tailwind should see the classes and not purge them from the generated sheet:

Let me know if that works for you, or if you are still seeing issues, happy to help!

[jasonfb]

the problem here is that this app is expecting a tailwind watcher rake task which does not exist in cssbundling-rails, but only exists in tailwind-rails

Procfile.dev

css: bin/rails tailwindcss:watch

but there is no such rake task

rake tasks -T  tailwindcss:watch

(no results)

the rake task exists in tailwind-css rails
https://github.com/rails/tailwindcss-rails/blob/main/lib/tasks/build.rake

[jasonfb]

this is (easily) fixed by adding the second Gem. however, the README leads one to believe that tailwind will work with just cssbundling-rails

bundle add tailwindcss-rails
rails tailwindcss:install

[jasonfb]

Note: What's a little extra confusing here is that rails new --css=tailwind creates new Rails app with tailwindcss-rails and NOT cssbundling-rails, so the rails new --css=tailwind path is inconsistent with its rails new --css=bootstrap counterpart.

I believe the installer (bundle add cssbundling-rails && rails css:install:tailwind) is trying to do the right thing, I'm just not sure how it is supposed to (/able to?) work without that rake task tailwindcss:watch. Even if you have a node-managed packages (a package.json file), you still would ned to be calling that rake task . (unless there's some other watcher mechanism that I'm not seeing)

[jasonfb]

Correctumundo! Changed name of issue "tailwind fails if you leave the .html format off of your /app/views/ filenames"