Flowbite plugin in a Rails app with Import map and Tailwind CSS

Question

I got this error from tailwind.config.js

Error: Cannot find module 'flowbite/plugin'

Require stack:
/home/runner/work/project/project/config/tailwind.config.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at Function.resolve (/snapshot/tailwindcss/standalone-cli/patch-require.js:34:38)
    at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:250334)
    at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:252917)
    at /home/runner/work/project/project/config/tailwind.config.js:74:5
    at evalModule (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:2556[14](https://github.com/name/project/actions/runs/7275447114/job/19823350019#step:8:15))
    at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:253542)
    at /snapshot/tailwindcss/lib/lib/load-config.js:48:30 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/runner/work/project/adprojectvigator/config/tailwind.config.js' ]
}
bin/rails aborted!
Command failed with exit 1: /opt/hostedtoolcache/Ruby/3.2.2/x64/lib/ruby/gems/3.2.0/gems/tailwindcss-rails-2.1.0-x86_64-linux/exe/x86_64-linux/tailwindcss

Tasks: TOP => test:prepare => tailwindcss:build
(See full trace by running task with --trace)

To Reproduce

config/tailwind.config.js

plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('flowbite/plugin'), // <--- HERE IS THE PROBLEM
    {
      tailwindcss: {},
      autoprefixer: {},
      ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
    }
  ]

config/importmap.rb

pin "flowbite", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.turbo.min.js"
pin "flowbite-datepicker", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/datepicker.turbo.min.js", preload: true

app/javascript/application.js

import 'flowbite';
import 'flowbite-datepicker';

Gemfile rails (7.1.2) tailwindcss-rails (2.1.0-x86_64-darwin) railties (>= 6.0.0)

If I remove require('flowbite/plugin') the the CSS is not working properly (see screenshot). No issues on development.

Answer 1

I think that maybe missing './node_modules/flowbite/**/*.js'.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './node_modules/flowbite/**/*.js' => This line
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('flowbite/plugin')
  ]
}