Use plugins with tailwind v4

[bogdan]

I didn't find any way of adding a plugin in v4 setup.
Adding package.json doesn't help:

{
  "name": "realphotos-marketplace",
  "packageManager": "yarn@4.5.2",
  "dependencies": {
    "daisyui": "5.0.0-beta.8"
  }
}

@import "tailwindcss";
@plugin "daisyui";

=> Booting Puma
=> Rails 8.0.1 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 6.6.0 ("Return to Forever")
* Ruby version: ruby 3.3.4 (2024-07-09 revision be1089c8ec) [arm64-darwin23]
*  Min threads: 3
*  Max threads: 3
*  Environment: development
*          PID: 25858
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop
Error: Can't resolve 'daisyui' in '/Users/bogdan/makabu/brad/realphotos-marketplace/app/assets/tailwind'
Detected tailwind has gone away, stopping Puma...
- Gracefully stopping, waiting for requests to finish
=== puma shutdown: 2025-02-20 11:30:39 +0100 ===

Please suggest the doc on how to use plugins.

[patriciomacadden]

Hi @bogdan ,

Can you share the steps to reproduce? because it's working for me.

My steps:

1. run npm i -D daisyui@beta (from daisyui docs)
2. add @plugin "daisyui"; to app/assets/tailwind/application.css

I can see this in the console when tailwind builds the assets now:

/*! 🌼 daisyUI 5.0.0-beta.8 */

and I can see daisyui in the browser just fine.

Do you have the package.json and most importantly the node_modules folder at the root of your project?

It would be great If you can share more information.

I don't think it's this project's responsibility to inform its users how to use tailwind plugins though. Specially because there's no extra steps to do it. Maybe I'm wrong and if I am, please correct me.

[bogdan]

It looks like in my case the issue is specifically with yarn and its pnp setup which is a new default. It doesn't use node_modules:

https://yarnpkg.com/features/pnp

I am not sure if this setup is something all js package managers will go, or it is never suppose to work everywhere.

I checked npm and it works fine.

If you don't plan to support that, you may close the issue.

[patriciomacadden]

Oh, I see. Never used yarn pnp in the past so I can't really help with that setup.

But the thing is that tailwindcss-rails (and more specifically tailwindcss-ruby) use the standalone tailwindcss cli (https://tailwindcss.com/blog/standalone-cli) which is not aware of the package manager you're using in the project. It only scans your project and if it can't find the necessary libs (daisyui in this case), it will error out.

Ultimately, I think we can say tailwind (in general) and yarn pnp are not compatible. But i think you'd end up having the same issue if you use tailwind without this gem.

[bogdan]

Probably, yarn need to do a better job on making sure their new pnp feature is supported. Thanks for help.

[patriciomacadden]

Yes, I agree!

You're welcome!

[bogdan]

It would be nice to mention how to install plugins in the doc. It was a little confusing that Readme recommended to setup package.json and then delete it as part of the upgrade process:

https://github.com/rails/tailwindcss-rails?tab=readme-ov-file#updating-css-class-names-for-v4

I thought using package.json is deprecated in v4. But it looks like it is needed if you use plugins.

[flavorjones]

It would be nice to mention how to install plugins in the doc

@bogdan Do you have time to open a PR suggesting some documentation? You have the context and experience, I don't.

[hernanvicente]

Hello @patriciomacadden and @bogdan, thanks for your answers. The Rails 8 application I'm working on uses no node package manager.

I can confirm that installing the plugin as an npm package works. Running npm i -D daisyui@beta will create package.json file containing:

{
  "devDependencies": {
    "daisyui": "^5.0.0-beta.8"
  }
}

And then adding *@plugin "daisyui"; to app/assets/tailwind/application.css allow Tailwind to load the plugin.

➜  my-app git:(1-css) ✗ ./bin/rails tailwindcss:watch
/*! 🌼 daisyUI 5.0.0-beta.8 */
≈ tailwindcss v4.0.6

Done in 124ms

However, the Daisy official documentation mentions that there is a way to install the plugin without npm intervention, Option B. Use daisyUI from CDN.. Sadly this way didn't work for me.

I found this discussion in the tailwind-ruby's repository but the comments are saying the only way of installing Taiwind's plugins is via npm.

Am I missing something here? It is like the comments contradict the plugin documentation.

[flavorjones]

Am I missing something here? It is like the comments contradict the plugin documentation.

@hernanvicente My comment on that thread specifically says:

TBH I don't know where to even start to make this work without npm, so I'd love if someone was able to suggest a path forward

If you know how to do this, then please open a docs PR on this project or tailwindcss-ruby explaining how it's done.

[flavorjones]

Like, just to be clear: I'm the maintainer of both tailwindcss-rails and tailwindcss-ruby, and I don't use tailwind plugins, and I'm not interested in learning how to do it just to explain it back to people.

These are open-source projects and I expect users who do use plugins to contribute documentation and/or code for the features they use/want/need. I'm asking for help.