Ruby on Rails installation instructions might be incorrect

[bolshakov]

Describe the bug

I'm following installation instructions with a brand new Ruby on Rails 8.0.1 project as it's described here https://flowbite.com/docs/getting-started/rails/#install-flowbite and the tailwind.config.js is not generated.

To Reproduce

Generate rails app:

rails new app-name
cd app-name

Install the official tailwindcss-rails gem:

bundle add tailwindcss-rails

Run the install command to generate a tailwind.config.js file inside the ./config directory:

rails tailwindcss:install

The command outputs:

$ rails tailwindcss:install
       apply  /Users/bolshakov/.asdf/installs/ruby/3.3.4/lib/ruby/gems/3.3.0/gems/tailwindcss-rails-4.0.0/lib/install/install_tailwindcss.rb
  Add Tailwindcss container element in application layout
      insert    app/views/layouts/application.html.erb
      insert    app/views/layouts/application.html.erb
  Build into app/assets/builds
      create    app/assets/builds
      create    app/assets/builds/.keep
      append    .gitignore
  Add default /Users/bolshakov/Projects/personal/testopp/app/assets/tailwind/application.css
      create    app/assets/tailwind/application.css
  Add default Procfile.dev
      create    Procfile.dev
  Ensure foreman is installed
         run    gem install foreman from "."
Successfully installed foreman-0.88.1
Parsing documentation for foreman-0.88.1
Done installing documentation for foreman after 0 seconds
Parsing documentation for foreman-0.88.1
Done installing documentation for foreman after 0 seconds
1 gem installed
  Add bin/dev to start foreman
       force    bin/dev
  Compile initial Tailwind build
         run    rails tailwindcss:build from "."
≈ tailwindcss v4.0.3

Done in 47ms
         run  bundle install --quiet

Expected behavior

Generates tailwind.config.js inside the ./config directory.

Actual behavior

The config file was not generated. It's impossible to follow the later instructions in the Guide since they rely on the configuration file which is missing.

[david-uhlig]

This arises because the tailwindcss-rails gem was upgraded to Tailwind v4, and came with a change in how assets are handled. As per release notes:

The tailwindcss:install task no longer installs config/tailwind.config.js, as v4 recommends placing Tailwind configuration in the CSS file.

You can stay on Tailwind v3 for now by pinning the tailwindcss-rails gem to v3

# Gemfile
gem "tailwindcss-rails", "~> 3.3"

[alec-c4]

@bolshakov you can fix this issue with following code

@import "tailwindcss";
@config "../../../tailwind.config.js";

You need to use it in your app/assets/stylesheets/application.tailwind.css

[alec-c4]

But I agree that we need to update rails-related docs

[zoltanszogyenyi]

If anyone does a PR to update the Rails docs I'll have a look at it and merge it.

I'm still a little busy with the v4 update, but this looks to be the final way of getting things done:

https://flowbite.com/docs/getting-started/quickstart/

Just introduced a new theme file called "default" that sets color variables in a better pattern.

Thanks!

[alec-c4]

@zoltanszogyenyi Is there any tool to convert tailwind v3 config to v4 format? I'll update docs if you point me to the right direction with tailwind and flowbite :)

[zoltanszogyenyi]

Yeah, I wrote about it here:

https://flowbite.com/blog/tailwind-v4/

But the best final format is this one:

https://flowbite.com/docs/getting-started/quickstart/#install-using-npm

This configures properly the sources, theme file and everything new recommended for Tailwind v4.

[bolshakov]

So to use JS modules, I need to use import maps like this:

# config/importmap.rb
pin "flowbite", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.turbo.min.js"

To configure tailwindcss with propshaft, I have to download flowbite under the vendor/javascript/flowbite folder and use relative paths in the tailwind/application.css:

@import "tailwindcss";

@import "../../../vendor/javascript/flowbite/src/themes/default.css";
@plugin "../../../vendor/javascript/flowbite/plugin";
@source "../../../vendor/javascript/flowbite";

The problem is that the plugin has other dependencies (like mini-svg-data-uri and tailwindcss. How should I provide these dependencies in a vanilla Rails app that use importmaps with propshaft?

[timwis]

I'm also stuck with a brand new rails 8 project. I've read around all the docs and think I have my head wrapped around it, but when I try and run tailwindcss it exits with status code 1 and no error or explanation. My app/assets/tailwind/application.css file looks like this:

@import "tailwindcss";
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "../../../node_modules/flowbite";

I'm also using importmaps for front-end javascript, but I used npm to install flowbite just for this purpose, just to try and get it working.

Any idea what I'm missing, or how to get debug output from the tailwind cli?

EDIT: Sorry—I just cracked it after posting this. My Gemfile.lock showed I was using tailwindcss-rails v4.0.1, and that used tailwindcss-ruby 4.0.something, so I thought all was well, but then I checked rubygems and noticed it's up to v4.1. Running bundle update on it upgraded it, and I was able to compile.

[pldavid2]

So to use JS modules, I need to use import maps like this:

config/importmap.rb

pin "flowbite", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.turbo.min.js"

To configure tailwindcss with propshaft, I have to download flowbite under the vendor/javascript/flowbite folder and use relative paths in the tailwind/application.css:

@import "tailwindcss";

@import "../../../vendor/javascript/flowbite/src/themes/default.css"; @plugin "../../../vendor/javascript/flowbite/plugin"; @source "../../../vendor/javascript/flowbite";

The problem is that the plugin has other dependencies (like mini-svg-data-uri and tailwindcss. How should I provide these dependencies in a vanilla Rails app that use importmaps with propshaft?

@bolshakov were you able to solve it? I'm struggling with the same issue.

Maybe there is any updated instructions to use it latest flowbite/tailwind v4 and it's plugins/theme with importmaps?