flowbite

Flowbite

[!NOTE] This gem is only useful for projects without Node.js and asset bundling

Integrates Flowbite with the Ruby on Rails Asset Pipeline.

Works great with the following gems:

• importmap-rails
• tailwindcss-rails
• propshaft
• sprockets-rails

Links to official documentation:

• Introduction
• Official guide to using with Ruby on Rails

Installation

Add flowbite to your Gemfile:

gem "flowbite", "~> 3.1"

Importmaps

You can pin either flowbite.esm.js in config/importmap.rb:

pin "flowbite", to: "flowbite.esm.js"

Tailwind CSS for Rails

[!WARNING] To upgrade from flowbite 2.x to 3.x, also upgrade tailwind from version 3 to version 4 using these instructions. Don't forget to update the plugin using the bin/rails flowbite:bundler:plugin command.

Tailwind CSS for Rails gem is wraps the standalone executable version of the Tailwind CSS framework, which means to add additional plugins you need to download the script to your server. To solve this problem, we wrote a rake task:

bin/rails flowbite:bundler:plugin

it's copy a plugin.js to vendor/javascript/flowbite folder. To start using it, just require flowbite as plugin inside the config/tailwind.config.js file

const flowbite = require("../vendor/javascript/flowbite/plugin.js")

module.exports = {
  // ...
  content: [
      // ...
      flowbite.interactiveContent
  ],
  // ...
  plugins: [
    // ...
    flowbite.plugin
  ]
  // ...
}

Classic way

This gem automatically registers flowbite.turbo.js, flowbite.turbo.esm.js, flowbite.js, flowbite-datepicker.js, flowbite-datepicker.esm.js, flowbite-plugin.js, flowbite.esm.js, and flowbite.css dependencies in your asset pipeline. Now you can use them in your project.

As a dependency through Sprockets, add the following code to your application.js:

//= require flowbite

and application.css:

/*
 *= require flowbite
 */

... or by adding it to your template (also works with Propshaft):

<%= javascript_include_tag :flowbite %>
<%= stylesheet_link_tag :flowbite %>

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/iwdt/flowbite-rails.

1. Fork it (https://github.com/iwdt/flowbite-rails/fork)
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

Usefull scripts for development:

1. Update flowbite deps:

bun update flowbite

1. Build javascript:

bun build:js

1. Build stylesheets:

bun build:css

1. Build gem:

gem build

License

The gem is available as open source under the terms of the MIT License.