search

rails / cssbundling-rails

Bundle and process CSS in Rails with Tailwind, PostCSS, and Sass via Node.js.
MIT License
565 stars 83 forks source link

Rails 7 and TailwindUI components with JavaScript are not working #61

Closed skaeneman closed 2 years ago

skaeneman commented 2 years ago

Steps to reproduce rails new my_app -j esbuild --css tailwind --database=postgresql cd my_app bin/dev

in my gemfile both jsbundling-rails and cssbundling-rails were added.

# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
gem "jsbundling-rails"

# Bundle and process CSS [https://github.com/rails/cssbundling-rails]
gem "cssbundling-rails"

in package.json I see Tailwind added

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.0",
    "autoprefixer": "^10.4.0",
    "esbuild": "^0.14.8",
    "jquery": "^3.6.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.7"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
  }
}

When I add any Tailwind UI component that requires JavaScript it does not work. For example, adding the HTML for the "simple dropdown" here https://tailwindui.com/components/application-ui/elements/dropdowns

Adding other Tailwind elements to a page works correctly, however, anything that requires JavaScript is not rendering correctly.

Expected behavior The dropdown should open or close normally

Actual behavior The dropdown is expanded on the page and does not close/open when the button is toggled.

System configuration Rails version: Rails (7.0.0) node: 16.5.0 npm: 8.3.0 yarn 1.22.10 TailwindCSS 3.0.7

Ruby version: 3.0.1

eelcoj commented 2 years ago

The cssbundling gem with Tailwind doesn't do much of itself. Did you follow the steps on the Getting set up guide? Based on your package.json, you are likely also interesting in the using your own JS guide.

pbstriker38 commented 2 years ago

If you have a JS file named application.js and any of the JS has CSS, esbuild will output an application.css. This will overwrite the one generated by tailwind.

https://esbuild.github.io/content-types/#css-from-js

https:/github.com/rails/jsbundling-rails#why -does-esbuild-overvwrite-my-applicationcss