It was pretty straightforward to get Flowbite css and javascript to work with Jumpstart Rails. Here’s what I did (mostly following these instructions from Flowbite)
Rails and TailwindCSS are already setup by Jumpstart.
Install Flowbite
npm install flowbite
Add it to the plugins, and content sections in tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,7 @@ module.exports = {
require('@tailwindcss/forms'),
require('@tailwindcss/line-clamp'),
require('@tailwindcss/typography'),
+ require('flowbite/plugin'),
],
content: [
@@ -19,6 +20,7 @@ module.exports = {
'./app/views/**/*.haml',
'./lib/jumpstart/app/views/**/*.erb',
'./lib/jumpstart/app/helpers/**/*.rb',
+ './node_modules/flowbite/**/*.js',
],
// All the default values will be compiled unless they are overridden below
Jumpstart is not yet using Typescript, so you just need to import the flowbite js into app\javascript\application.js
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -21,5 +21,7 @@ import "./controllers"
import "./src/**/*"
require("local-time").start()
+import "flowbite/dist/flowbite.js"
+
// Start Rails UJS
Rails.start()
Then you can use a test tooltip button to test this. Add this to one of your pages and you should see a styled button (flowbite CSS is working) and a tooltip appear when you hover on it (flowbite JS is working).
<button data-tooltip-target="tooltip-default" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button>
<div id="tooltip-default" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700">
Tooltip content
<div class="tooltip-arrow" data-popper-arrow></div>
</div>