Disclaimer: this guide has been first published on the Flowbite integration docs for Tailwind CSS and Ruby on Rails.
Ruby on Rails is an open-source full-stack web application framework that runs server-side written in Ruby and built by the creators of Basecamp based on a model-view-controller architecture.
Popular websites such as GitHub, Shopify, Twitch, Dribbble, AirBnB, Coinbase are all based on the Ruby on Rails framework and it is continued to be used by thousands of companies and developers.
In this guide you will learn how to set up Ruby on Rails with Tailwind CSS and install Flowbite to start using the UI components built with the utility classes from Tailwind CSS.
Create a new project
Follow the next steps to get started with a Ruby on Rails project and install Tailwind CSS and Flowbite.
Make sure that you have Node.js and Ruby installed on your machine before continuing.
Run the following command to install the rails
gem from Ruby:
gem install rails
Create a new Ruby on Rails application if you don't already have one:
rails new app-name
cd app-name
Now that you have created a new project you can proceed by setting up Tailwind CSS.
Install Tailwind CSS
Install the official tailwindcss-rails
gem:
./bin/bundle add tailwindcss-rails
Run the install command to generate a tailwind.config.js
file inside the ./config
directory:
./bin/rails tailwindcss:install
Configure the tailwind.config.js
file by setting the appropiate content
paths:
module.exports = {
content: [
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*',
],
theme: {
extend: {},
},
plugins: [],
}
Set up the Tailwind directives inside the ./app/assets/stylesheets/application.tailwind.css
file:
@tailwind base;
@tailwind components;
@tailwind utilities;
Now that Tailwind CSS has been succesfully installed you can proceed by installing Flowbite.
Install Flowbite
Install Flowbite by running the following command in your terminal:
npm install flowbite
Require Flowbite as a plugin inside your tailwind.config.js
file:
module.exports = {
plugins: [
require('flowbite/plugin')
]
}
Additionally to your own content
data you should add flowbite
to apply the classes from the interactive elements in the tailwind.config.js
file:
module.exports = {
content: [
"./node_modules/flowbite/**/*.js"
]
}
Run the following command to include Flowbite's JavaScript inside the importmap.rb
file:
./bin/importmap pin flowbite
Alternatively, you can also include the script separately or using CDN:
// relative path
<script src="../path/to/flowbite/dist/flowbite.js"></script>
// CDN
<link rel="stylesheet" href="https://unpkg.com/flowbite@{{< current_version >}}/dist/flowbite.min.css" />
Now you can use interactive components such as modals, dropdowns, navbars, and more.
Building your project
Run the following command to start a local server and build the source files:
./bin/dev
This will create a local server and you will be able to access the pages on localhost:3000
.
Create a homepage
First of all you need to delete the default index.html
file inside the public/
directory and then follow these steps:
Create a new pages/
directory inside the app/views/
directory.
Create a new home.html.erb
file inside the app/views/pages/
directory.
Choose one of the components from Flowbite (ie. a tooltip) and copy-paste it inside the newly created file:
<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>
Create a new controller called pages_controller.rb
inside the app/controllers/
directory and add the following code inside of it:
class PagesController < ApplicationController
def home
end
end
Set the homepage as the root page inside the routes.rb
file inside the config/
directory:
root to: 'pages#home'
If you have run ./bin/dev
to start a local server you should see the changes on localhost:3000/
and the utility classes from Tailwind CSS should work and the interactive components from Flowbite should also be functional.
Disclaimer: this guide has been first published on the Flowbite integration docs for Tailwind CSS and Ruby on Rails.
Top comments (1)
RoR is really great. .. And also Flowbite.
10x for sharing.