In this post I describe how to generate a new Rails application with Tailwind as the CSS framework.

I also describe how to add Tailwind to an existing application, and how to configure Tailwind and add some basic classes and custom fonts.

Let's start with generating a new Rails application with Tailwind as the default CSS framework

Generating a new application with Tailwind CSS

To generate a brand new application that includes Tailwind to handle CSS, I run this command in the terminal:

$ bin/rails new -css tailwind application-name

This will set up the application with Tailwind right off the bat and there's nothing else to do.

Adding Tailwind CSS to an existing application

Sometimes, I need to add Tailwind to an existing Rails application. In this case I first need to add the tailwindcss-rails gem to the bundle and then install Tailwind in the application.

$ bundle add tailwindcss-rails

$ bin/rails tailwindcss:install

This command will perform a series of tasks:

  1. It will add a stylesheet tag for Tailwind in the application layout

    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

    It will also add a container with some Tailwind classes to the <body> tag:

    <main class="container mx-auto mt-28 px-5 flex">

  2. It will create the app/assets/builds directory where Tailwind build files go.

  3. It will add the default Tailwind configuration files config/tailwind.config.js and app/assets/stylesheets/application.tailwind.css

  4. It will add a Procfile.dev file to start the tailwind:watch process

  5. It will add the bin/dev script for starting the application in development mode.

Configuration files

In order to work properly, Tailwind needs a number of configuration files.

The main configuration file is config/tailwind.config.js.

This file is used for specifying plugins, themes, and other pieces of information needed.

The Tailwind input file is generated at app/assets/stylesheets/application.tailwind.css.

I use this file for custom classes that are used across the application, like classes for buttons for example, or default styles for headers, main text, etc.

The output file lives in app/assets/builds/tailwind.css. This file is generated by the Tailwind build command and includes all the classes and definitions needed by the application.

In development we want to run Tailwind in watch mode so changes are automatically reflected in the pages while developing the site.

For this purpose, the Procfile.dev file runs a tailwindcss:watch process when the application is started using bin/dev.

# Procfile.dev

web: bin/rails server --binding=0.0.0.0
css: bin/rails tailwindcss:watch

Initial styles

Once Tailwind is first added, it will by default remove all the styles from the pages, so everything appears unstyled.

The <main> container added by the Tailwind installation will also be styled with a flex class which places all the elements on the page side by side.

I usually remove this flex class and add a prose class which will add sensible typographical styling to the pages and make them look presentable. Once I have decided how to actually style the application, I remove these initial styles and add my own.

# app/views/layouts/application.html.erb

<main class="prose container mx-auto mt-28 px-5">

Photo by Peter Simmons