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 13:30:56 web.1 | * Listening on 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.
2 Answers
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 "[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.
For me, the problem was solved by adding daisyui via npm and then just putting it into requirements of tailwind.config.js as it was mentioned at the official website. It seems like there is no way of using it withimportmaps right now.
module.exports = {plugins: [require("daisyui")]}
