Rails 6, TailwindCSS, TailwindUI, and Stimulus New App Guide (November 2020)
Tags: making, rails, tailwindcss, postcss
Published: 2020-11-29 20:11:06

---
title: Rails 6, TailwindCSS, TailwindUI, and Stimulus New App Guide (November 2020)
published: true
date: 2020-11-29 19:56:13 UTC
tags: Making,RubyonRails,TailwindCSS,PostCSS
canonical_url: https://www.michielsikkes.com/rails-new-app-guide-tailwindcss-webpack-stimulus-postcss/
---

## Updates

- Sunday, November 29 2020: Updated for TailwindCSS 2.x PostCSS 7 compatibility.

# Starting your new Rails 6 app

Getting started on a new Rails 6.x app and want the latest TailwindCSS, Webpack, and Stimulus as your base development stack?

Look no further! This article is all you need.

I'll keep updating it over the course of the next couple of weeks as a few compatibility issues will be resolved.

Installation and generator commands are included below. As well as Tailwind configuration files you need to add or modify for Rails specifically. I've also included references to any upstream documentation.

Let's get started.

# Installing Rails 6.x

At the time of writing the latest Rails release is 6.0.3.4 and latest RC is 6.1.0.rc1.

Install or update your local Rails gem with:

```
$ gem install rails

```

# Generating the Rails app with Webpack, Stimulus, and PostgreSQL

Here's the Rails app generator command I use:

```
$ rails new mynewapp --database=postgresql --webpack=stimulus
$ cd mynewapp

```

# Yarn add TailwindCSS with a PostCSS compatibility fix

First, add TailwindCSS to your Rails app via Yarn (and **not** via npm). You will be installing [TailwindCSS as a PostCSS Plugin](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin) because that's how you do JavaScript libraries in Rails.

In addition, you need install [a TailwindCSS compatibility build](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build) that works with PostCSS 7. As Rails is not on the required PostCSS 8 yet.

Run the following command and select **2.0.1-compat** as the version to install.

```
$ yarn add tailwindcss@comp
yarn add v1.22.4
info No lockfile found.
[1/4] 🔍 Resolving packages...
Couldn't find any versions for "tailwindcss" that matches "comp"
? Please choose a version of "tailwindcss" from this list: 
  2.0.1 
❯ 2.0.1-compat 
  2.0.0 
  2.0.0-compat

```

# Add TailwindCSS to PostCSS config

Edit the generated **postcss.config.js** in your Rails app and [add the **tailwindcss** and **autoprefixer** requires.](https://tailwindcss.com/docs/installation#add-tailwind-as-a-post-css-plugin) You'll add a configuration parameter to the **tailwindcss** require to tell TailwindCSS where to look for its configuration file.

```
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss')('./app/javascript/tailwind.config.js'),
    require('autoprefixer'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

```
<figcaption>postcss.config.js</figcaption>
# Create the TailwindCSS config file with Inter font and Forms plugin

Create the **tailwind.config.js** configuration file in **app/javascripts** and set it to use the **Inter** font [as recommended in the Tailwind UI documentation](https://tailwindui.com/documentation#optional-add-the-inter-font-family). I've also added in the **@tailwindcss/forms** :

```
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  variants: {},
  plugins: [
    require('@tailwindcss/forms'),
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  }
}

```
<figcaption>app/javascript/tailwind.config.js</figcaption>
# Add TailwindCSS Forms plugin with Yarn

At this stage your **bin/webpack-dev-server** won't start unless you add the tailwindcss/forms plugin to your app:

```
$ yarn add @tailwindcss/forms

```

# Add TailwindCSS imports to your JavaScript pack

This article uses the setup where we **combine** the Javascript and CSS of the app into one pack. So we [will include the TailwindCSS import directive directly](https://tailwindcss.com/docs/installation#include-tailwind-in-your-css) into the top-level **app/packs/application.js** file:

```
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

import "controllers"

import "tailwindcss/tailwind.css"

```
<figcaption>app/javascript/packs/application.js</figcaption>
# Update your application layout's CSS include for a combined JavaScript/CSS Pack

Rename the **stylesheet\_link\_tag** to **stylesheet\_pack\_tag** in your **application.html.erb** to make sure your CSS is loaded in.

```
<!DOCTYPE html>
<html>
  <head>
    <title>Mynewapp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

```
<figcaption>app/views/layouts/application.html.erb</figcaption>
# Create and migrate your initial database

The app we generated at the start of this article uses a PostgreSQL database. Run the initial database creation and migration to get started!

```
$ bin/rails db:create
$ bin/rails db:migrate

```

* * *

That's it! Please definitely let me know if you've used this article. And also if you're experiencing any troubles — I can add a troubleshooting section then.

You can [reach me on Twitter](https://twitter.com/michiels) or via email at michiel [at] hey [dot] com.

See you in the next one.

— Michiel