Feature: install Tailwind plugins without npm

[richjdsmith]

Picking up from bradgessler's issue: rails/tailwindcss-rails#421 (comment)

Picking up from https://x.com/flavorjones/status/1846728744645300224...

To recap, I've had conversations with Rails devs who are confused why they have to install npm to add Tailwind plugins to a tailwindcss-rails app when using importmaps. For example, installing daisyUI requires npm: https://daisyui.com/docs/install/

I initially struggled building a mental model around this, but then I figured out that npm is used strictly for package management. I also had to add npm as a dependency to my build process to download and install tailwind plugins.

Ideally I could install Tailwind plugins without needing to introduce npm as a dependency to my project and could instead run a command similar to importmaps pinning to install the plugin. Is that something that would make sense in this library, tailwindcss-ruby, importmaps, or a different library/approach?

Thanks all!

[flavorjones]

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.

The upstream docs for the imminent v4 haven't really changed much about how plugins are handled:

Plugins can be added to your project by installing them via npm, then adding them to your tailwind.config.js file

My interpretation is that npm is going to continue to be the supported way to install plugins. I'm not very familiar with npm or with tailwindcss plugins, so if I'm wrong I hope someone will let me know as well as suggest a solution.

[tomstuart]

I don’t fully understand what problem is being highlighted here or exactly what sort of dependency upon npm needs to be avoided.

To recap, I think the basic process of introducing a Tailwind CSS plugin (say daisyUI) is:

1. one developer on a team runs npm install daisyui, which:
   • adds the daisyui npm package to the list of dependencies in package.json, which is checked into source control; and
   • downloads & unpacks the daisyui npm package (and its transitive dependencies) into their local node_modules directory, which isn’t checked into source control
2. they add require('daisyui') to the plugins: […] section of tailwind.config.js, which succeeds because Node.js finds the local node_modules/daisyui etc directories
3. they commit the updated package.json & tailwind.config.js to source control
4. when the rest of their team (or CI server etc) receives those changes to package.json & tailwind.config.js from source control, they need to run npm install to do the downloading & unpacking part so that their local node_modules directory also contains copies of daisyUI and its dependencies.

I don’t know of a good way to avoid step 1, since plugins like daisyUI are de facto distributed as npm packages and it seems like it’d be painful to try to retrieve them in some other way. But, in case it’s helpful, one way to avoid step 4 (i.e. introducing npm as a development dependency for everyone else on the team) is to use a JavaScript module bundler (e.g. esbuild) to vendor a self-contained version of the desired plugin and commit that to source control. The Tailwind CSS configuration can then require the vendored file directly instead of expecting npm to download it to node_modules, which means only the developer who vendors the plugin needs npm installed, and then only for as long as it takes to do the vendoring.

For example, in a Rails app:

$ rails new foobar --css=tailwind
$ cd foobar
$ npm install daisyui # or other Tailwind CSS plugin
$ npm install esbuild # or other JavaScript module bundler
$ npm exec -- esbuild daisyui --bundle --minify --platform=node --outfile=vendor/javascript/daisyui.js
$ vim config/tailwind.config.js # to add `require('../vendor/javascript/daisyui')` to `plugins: […]`
$ bin/rails tailwindcss:build

Rebuilding...

🌼   daisyUI 4.12.23
├─ ✔︎ 2 themes added             https://daisyui.com/docs/themes
╰─ ❤︎ Support daisyUI project:   https://opencollective.com/daisyui


Done in 1061ms.

Again, this obviously still requires npm at vendoring time, but once the vendored plugin is checked into source control you don’t need npm any more. For all I know this might be a completely wrongheaded approach but it gets the job done.