Install Tailwind CSS with Ruby on Rails

1. Create your project

  rails new my-project
  cd my-project

2. Install Tailwind CSS

  rails tailwindcss:install

This will generate tailwind.config.js file in the /config directory.

3. Configure your template paths Add the paths of all your template files to your /config/tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Add the Tailwind directives to your CSS Add the @tailwind directives for each of Tailwind's layers to your application.tailwind.css file located in the ./app/assets/stylesheets directory.

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

5. Start your build process

  ./bin/dev 

6. Start using Tailwind in your project Start using Tailwind's utility classes to style your content.

/config/tailwind.config.js file

  const defaultTheme = require('tailwindcss/defaultTheme')

  module.exports = {
    content: [
      './public/*.html',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
      './app/views/**/*.{erb,haml,html,slim}'
    ],
    theme: {
      extend: {
        fontFamily: {
          helvetica: ['Helvetica', 'Arial', 'sans-serif'],
        },
      },
    },
    plugins: [
      require('@tailwindcss/forms'),
      require('@tailwindcss/aspect-ratio'),
      require('@tailwindcss/typography'),
      require('@tailwindcss/container-queries'),
    ]
  }

index.html.erb

<h1 class="container mx-auto mt-16 px-5 font-helvetica flex">
    Hello world!
</h1>

<https://tailwindcss.com/docs/guides/ruby-on-rails|Reference official website for more information>.