Site is under construction!

Use Tailwind CSS 1.1 in your Rails App

NOTICE

This tutorial is out of date and may not work for you. I have written a new post based on my experience using Rails and TailwindCSS over the last few months that you can findhere. Thanks for reading! 😄

Tutorial

For the purpose of this tutorial, we will assume you have Ruby and the Rails gem installed. Please visit theGetting Started with Rails Guideif you do not.

Create a new Rails project

rails new rails_tailwind --skip-coffee --webpack -d postgresql
cd rails_tailwind
rails db:create

This will create a new Rails project for you with webpack and Postgres configured for you and create our databases. We will not use coffeescript, which is why we add the--skip-coffeeflag. You can also omit the-d postgresqlflag if you like, but if you want to deploy to something like Heroku, I would recommend adding it. If you keep the Postgres flag, make sure you have Postgres installed and it is running. You can install Postgres on macOS by runningbrew install postgresql && brew services start postgresql

Running Rails and Webpack

You need to run the Rails server and webpack-dev-server in two terminal tabs/windows unless you use Docker or a gem like Foreman.

For now, we will just create two terminal windows. In one window, run:

rails s

and in the other:

./bin/webpack-dev-server

You should see rails welcome page if you navigate tolocalhost:3000in your browser.

rails default information page

Generate a Home controller

In order to see the Tailwind styles that we will integrate later, we at minimum need a controller and view.

rails generate controller Home index

You can remove the generated JS, SCSS, and helper file, we won’t be needing them.

rm app/helpers/home_helper.rb app/assets/javascripts/home.js app/assets/stylesheets/home.scss

Configure your routes

Change yourconfig/routes.rbfile to:

# frozen_string_literal: true

Rails.application.routes.draw do
  root 'home# index'
  resources :home, only: :index
end

Restart your Rails server, and now you should see the following onlocalhost:3000

home index

Install Tailwind CSS

Run the following command in your terminal:

yarn add tailwindcss --dev

This should add the Tailwind package to yourpackage.json.

To create a custom config file, you can run:

./node_modules/.bin/tailwind init

This should create atailwind.config.jsfile at the root of your project. This file can be used to customize the Tailwind defaults. Read morehere

Next, add the following two lines topostcss.config.js

require('tailwindcss'),
require('autoprefixer'),

Yourpostcss.config.jsfile should now look like this:

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

Configure Tailwind

There are a few ways you can do this but this is my personal preference.

Remove the assets folder:

rm -rf app/assets

Rename theapp/javascriptdirectory toapp/frontend:

mv app/javascript app/frontend

Tell webpacker to use this new folder by changing the source_path inconfig/webpacker.ymlfrom:source_path: app/javascripttosource_path: app/frontend.

Next, we need to setup our stylesheets:

touch app/frontend/packs/stylesheets.css

Paste the following into our newstylesheets.cssfile.This is straight from thetailwind docs

@tailwind base;

@tailwind components;

@tailwind utilities;

Add the following line inapp/frontend/packs/application.js:

import './stylesheets.css'

The last step is to tell Rails to use our packs. Inapp/views/layouts/application.html.erb, change:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

to:

<%= stylesheet_pack_tag 'stylesheets', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Restart the Rails server and webpack-dev-server and you should now see the following onlocalhost:3000

tailwind home index

Tailwind should now be working so lets tweak our views to see some Tailwind goodness.

Update views to use TailwindCSS

Inapp/views/layouts/application.html.erbchange:

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

to:

<body class="min-h-screen bg-gray-100">
  <div class="container mx-auto">
    <%= yield %>
  </div>
</body>

and inapp/views/home/index.html.erbchange:

<h1>Home# index</h1>
<p>Find me in app/views/home/index.html.erb</p>

to:

<section class="py-8 text-center">
  <h1 class="mb-2 text-5xl">Ruby on Rails + TailwindCSS</h1>
  <p class="mb-8 text-xl">❤️ A match made in heaven️️ ❤️</p>
  <a href="https://tailwindcss.com" class="px-8 py-4 font-bold text-white bg-teal-500 rounded hover:bg-teal-700" target="_blank">Tailwind Docs</a>
</section>

You should now see the following page when you navigate tolocalhost:3000

updated tailwind home index

And now you have Tailwind CSS working in your Rails app!

If you are interested in using PurgeCSS to remove unused styles, I recommend checking outGoRails Episode # 294

Happy coding!

This post is also available on DEV.

Want more Ruby & Rails content?

Subscribe to my mailing list! Don't worry, I won't be selling your data or spamming you with weekly emails. If you get an email from me, that means I put time into deciding if what I have to say at that time is worth stealing your attention for a few minutes.

    Support team

    © 2020 Andrew Mason. All rights reserved.

    Made with💙andBridgetownRB.