How to set up Ruby on Rails with Tailwind CSS and Flowbite

#rails #ruby #tailwindcss #flowbite

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.