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

[jasonfb]

Assuming I had an existing JSBundling/Shakapacker app, adding cssbundling with Tailwind does not seem to work.

these steps provide full reproduction. the "as if I had an existing app" part can be considered what leads up to "initial commit"

rails new TestAddTailwindToExistingApp --javascript=esbuild &&
cd TestAddTailwindToExistingApp/ &&
bundle install &&
git add . && git commit -m "initial commit" &&
bundle add cssbundling-rails &&
rails css:install:tailwind &&
git add . && git commit -m "adds tailwind (broken)" &&
rails generate controller Articles &&
echo '<div class="bg-blue-900 text-center py-4 lg:px-4"><div class="p-2 bg-blue-800 items-center text-blue-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert"><span class="flex rounded-full bg-blue-500 uppercase font-bold px-2 py-1 text-xs mr-3">New</span><span class="font-semibold mr-2 text-left flex-auto">Use Tailwind CSS to implement your own unique design!</span></div></div>' >> app/views/articles/index.erb
sed -i '' -e 's/# root "articles#index"/ root "articles#index"/g' config/routes.rb 
git add . && git commit -m "adds tailwind element" 

Start your server with ./bin/dev

Result in browser:

Expected result:

[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)

[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: https://github.com/rails/cssbundling-rails/blob/def749dc2dbc31f64c489438a765ce1e4315e14e/lib/install/tailwind/tailwind.config.js#L3

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]

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