Adding Tailwind CSS to Your Rails App

Adding Tailwind CSS to Your Rails App

January 10, 2018

We recently decided to use Tailwind CSS for our Ember app at work and it really struck a chord with me. That's why I decided to try it in Ruby on Rails.

As you are here you are probably already hyped to get started with Tailwind CSS in your Rails app but if you still need convincing A wrote Adam Wathan about it, CSS Utility Classes and "Separation of Concerns.

If you want to create a new app you can pass the --webpack option as of Rails 5.1

rails new myapp --webpack

Otherwise just add the webpacker gem.

# Gemfile
gem 'webpacker', '~> 3.0'

bundle exec rails webpacker:install

Then install autoprefixer and tailwindcss

yarn add --dev autoprefixer tailwindcss

Webpacker lives in app/javascript as default. Lets create some new folders there to keep things organized and create the default tailwind configuration file.

mkdir -p app/javascript/src app/javascript/styles

node_modules/.bin/tailwind init app/javascript/src/tailwind.js

Then we add the tailwind config to application.css. You can find it at

# app/javascript/styles/application.css

@tailwind preflight;
@tailwind utilities;

Now we need to add our post css plugins to webpacker.

# .postcssrc.yml

  postcss-import: {}
  postcss-cssnext: {}
  autoprefixer: {}
  tailwindcss: './app/javascript/src/tailwind.js'

And add our new folders to resolved_paths in webpacker.yml.

# config/webpacker.yml

resolved_paths: [

Import the css file in webpackers entrypoint.

// app/javascript/packs/application.js

import 'application.css';

And then link to the new files

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

<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>

That's it, folks. You can now use Tailwind CSS classes in your markup.

You can find a reference app at

– Christoffer Artmann