I'm trying to build a new Rails 7 project, testing out Hotwire and some of the new default stuff. I'm excited by the idea of leaving Webpacker (and maybe React) behind. But I'm having trouble figuring out how to get daisyUI working with Tailwind in the new toolchain.
I created the app with --css tailwind. I ran ./bin/importmap pin daisyui, which added a whole bunch of lines to config/importmap.rb. And I added require("daisyui") to the array of plugins in config/tailwind.config.js.
But when I run ./bin/dev, I get this:
13:30:55 web.1 | started with pid 36044
13:30:55 css.1 | started with pid 36045
13:30:56 web.1 | => Booting Puma
13:30:56 web.1 | => Rails 7.0.2.3 application starting in development
13:30:56 web.1 | => Run `bin/rails server --help` for more startup options
13:30:56 web.1 | Puma starting in single mode...
13:30:56 web.1 | * Puma version: 5.6.4 (ruby 3.1.1-p18) ("Birdie's Version")
13:30:56 web.1 | * Min threads: 5
13:30:56 web.1 | * Max threads: 5
13:30:56 web.1 | * Environment: development
13:30:56 web.1 | * PID: 36044
13:30:56 web.1 | * Listening on http://127.0.0.1:3000
13:30:56 web.1 | * Listening on http://[::1]:3000
13:30:56 web.1 | Use Ctrl-C to stop
13:30:57 css.1 | node:internal/modules/cjs/loader:933
13:30:57 css.1 | const err = new Error(message);
13:30:57 css.1 | ^
13:30:57 css.1 |
13:30:57 css.1 | Error: Cannot find module 'daisyui'
13:30:57 css.1 | Require stack:
13:30:57 css.1 | - /Users/phillip/Dev/test_project/config/tailwind.config.js
13:30:57 css.1 | - /snapshot/tailwindcss/lib/cli.js
13:30:57 css.1 | - /snapshot/tailwindcss/standalone-cli/standalone.js
13:30:57 css.1 | 1) If you want to compile the package/file into executable, please pay attention to compilation warnings and specify a literal in 'require' call. 2) If you don't want to compile the package/file into executable and want to 'require' it from filesystem (likely plugin), specify an absolute path in 'require' call using process.cwd() or process.execPath.
13:30:57 css.1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
13:30:57 css.1 | at Function._resolveFilename (pkg/prelude/bootstrap.js:1819:46)
13:30:57 css.1 | at Function.Module._load (node:internal/modules/cjs/loader:778:27)
13:30:57 css.1 | at Module.require (node:internal/modules/cjs/loader:1005:19)
13:30:57 css.1 | at Module.require (pkg/prelude/bootstrap.js:1719:31)
13:30:57 css.1 | at Module.require (/snapshot/tailwindcss/standalone-cli/standalone.js:21:22)
13:30:57 css.1 | at require (node:internal/modules/cjs/helpers:94:18)
13:30:57 css.1 | at Object.<anonymous> (/Users/phillip/Dev/test_project/config/tailwind.config.js:20:5)
13:30:57 css.1 | at Module._compile (node:internal/modules/cjs/loader:1101:14)
13:30:57 css.1 | at Module._compile (pkg/prelude/bootstrap.js:1758:32) {
13:30:57 css.1 | code: 'MODULE_NOT_FOUND',
13:30:57 css.1 | requireStack: [
13:30:57 css.1 | '/Users/phillip/Dev/test_project/config/tailwind.config.js',
13:30:57 css.1 | '/snapshot/tailwindcss/lib/cli.js',
13:30:57 css.1 | '/snapshot/tailwindcss/standalone-cli/standalone.js'
13:30:57 css.1 | ],
13:30:57 css.1 | pkg: true
13:30:57 css.1 | }
13:30:57 css.1 | exited with code 0
13:30:57 system | sending SIGTERM to all processes
13:30:57 web.1 | - Gracefully stopping, waiting for requests to finish
13:30:57 web.1 | Exiting
13:30:57 web.1 | terminated by SIGTERM
I'm sure what I'm missing is very basic, but what is it?
I can tell you it's not adding either import "daisyui" or import "daisy" to app/javascripts/application.js.
Looks like there's currently not a way to use third party plugins with the standalone Tailwind CLI. The best solution for me, now, is to just add a link to the CDN in my layouts/application.html.erb:
<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" %>
I guess I'm losing out on Tailwind trimming out unneeded CSS from daisyUI, but that's not an important concern at this stage.