DEV Community

Cover image for Getting started with Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8
David Teren
David Teren

Posted on • Updated on

Getting started with Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8

This is my first post here and we are going to look at getting TailwindCSS with the awesome JIT (just in time) compilation setup in Rails 6.1 app via Webpacker and using PostCSS 8.0

Create a new Rails app 

rails new tails_on_rails
Enter fullscreen mode Exit fullscreen mode

In your Gemfile update webpacker

# Replace
gem 'webpacker', '~> 5.0'

# With
gem 'webpacker', '~> 5.4.0'
Enter fullscreen mode Exit fullscreen mode

Run bundler

bundle
Enter fullscreen mode Exit fullscreen mode

Remove the default webpacker

yarn remove @rails/webpacker
Enter fullscreen mode Exit fullscreen mode

Add the required version of Webpacker and other dependancies

yarn add @rails/webpacker@5.4.0 @fullhuman/postcss-purgecss@^4.0.3 postcss@^8.2.10 postcss-loader@^4.0.3 sass@^1.32.7 autoprefixer@^10.2.6
Enter fullscreen mode Exit fullscreen mode

Your package.json should look something like this.

{
  "name": "tails-on-rails",
  "private": true,
  "dependencies": {
     "@fullhuman/postcss-purgecss": "^4.0.3",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "5.4.0",
     "postcss": "^8.2.10",
     "postcss-loader": "^4.0.3",
     "sass": "^1.32.7",
     "turbolinks": "^5.2.0",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12"
    },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
 }
}
Enter fullscreen mode Exit fullscreen mode

Install TailwindsCSS and the official plugins.

yarn add tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/typography @tailwindcss/line-clamp
Enter fullscreen mode Exit fullscreen mode

Your package.json should look something like this.

{
  "name": "tails-on-rails",
  "private": true,
  "dependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.0",
    "@tailwindcss/aspect-ratio": "^0.2.1",
    "@tailwindcss/forms": "^0.3.3",
    "@tailwindcss/typography": "^0.4.1",
    "postcss": "^8.2.10",
    "postcss-loader": "^4.0.3",
    "sass": "^1.32.7",
    "tailwindcss": "^2.1.4",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}
Enter fullscreen mode Exit fullscreen mode

Create the custom CSS file.

mkdir app/javascript/stylesheets && touch app/javascript/stylesheets/application.scss
Enter fullscreen mode Exit fullscreen mode

In app/javascript/stylesheets/application.scss add the following.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";
Enter fullscreen mode Exit fullscreen mode

While we are on here we will add a custom component to validate that the @apply directive works.

Add the following to app/javascript/stylesheets/application.scss

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded; 
}
Enter fullscreen mode Exit fullscreen mode

Your application.scss should look something like this.

@import "tailwindcss/base";

@import "tailwindcss/components";

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded; 
}

@import "tailwindcss/utilities";
Enter fullscreen mode Exit fullscreen mode

In app/javascript/packs/application.js add the following;

import "stylesheets/application.scss"
Enter fullscreen mode Exit fullscreen mode

Your application.js should look something like this

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "stylesheets/application.scss"

Rails.start()
Turbolinks.start()
ActiveStorage.start()
Enter fullscreen mode Exit fullscreen mode

In the app root file postcss.config.js require TailwindCSS

require('tailwindcss'),
Enter fullscreen mode Exit fullscreen mode

Your postcss.config.js should look something like this.

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

Add the following to your app/views/layouts/application.html.erb

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Enter fullscreen mode Exit fullscreen mode

Your application.html.erb should look something like this.

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

    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

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

  <body>
    <%= yield %>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Scaffold the full TailwindCSS tailwind.config.js

npx tailwindcss init --full
Enter fullscreen mode Exit fullscreen mode

The above will generate a large configurable TailwindCSS file.

Add the TailwindCSS plug-ins to tailwind.config.js (right at the bottom of the file in the plugins: [] node.

plugins: [
  require('@tailwindcss/typography'),
  require('@tailwindcss/forms'),
  require('@tailwindcss/line-clamp'),
  require('@tailwindcss/aspect-ratio'),
]
Enter fullscreen mode Exit fullscreen mode

Add the Inter font to the fontFamily node in tailwind.config.js

fontFamily: {
  sans: [
    'Inter var',
       ...
Enter fullscreen mode Exit fullscreen mode

Enable JIT - just in time compilation at the top of the tailwind.config.js file

module.exports = {
  mode: 'jit',
  purge: [],
Enter fullscreen mode Exit fullscreen mode

Configure the purge option in the tailwind.config.js file

purge: {
enabled: ["production", "staging"].includes(process.env.NODE_ENV),
content: [
  './app/views/**/*.html.erb',
  './app/helpers/**/*.rb',
  './app/javascript/**/*.js',
],
},
Enter fullscreen mode Exit fullscreen mode

Your tailwind.config.js should look something like this.

const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  purge: {
    enabled: ["production", "staging"].includes(process.env.NODE_ENV),
    content: [
      './**/*.html.erb',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
    ],
  },
  presets: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',

      // content removed ....

    flexGrow: {
      0: '0',
      DEFAULT: '1',
    },
    flexShrink: {
      0: '0',
      DEFAULT: '1',
    },
    fontFamily: {
      sans: [
        'Inter var',
        'ui-sans-serif',
        'system-ui',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        '"Noto Sans"',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
      serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
      mono: [
        'ui-monospace',
        'SFMono-Regular',
        'Menlo',

      // content removed ....

    zIndex: ['responsive', 'focus-within', 'focus'],
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),],
}
Enter fullscreen mode Exit fullscreen mode

In the babel.config.js file set the following

...
'@babel/plugin-transform-runtime',
{
  helpers: false,
  regenerator: true,
  corejs: false
}
Enter fullscreen mode Exit fullscreen mode

And add the following to babel.config.js

['@babel/plugin-proposal-private-methods', { loose: true }]
Enter fullscreen mode Exit fullscreen mode

Your babel.config.js should look something like this

module.exports = function (api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
          corejs: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ],
      ['@babel/plugin-proposal-private-methods', { loose: true }]
    ].filter(Boolean)
  }
}
Enter fullscreen mode Exit fullscreen mode

For Webpacker to work with this version of Postcss we need to tell it to use the loader.
In config/webpack/environment.js add the following. Just insert it between the two existing lines.

// Get the actual sass-loader config
const sassLoader = environment.loaders.get('sass')
const sassLoaderConfig = sassLoader.use.find(function (element) {
return element.loader == 'sass-loader'
})

// Use Dart-implementation of Sass (default is node-sass)
const options = sassLoaderConfig.options
options.implementation = require('sass')

function hotfixPostcssLoaderConfig (subloader) {
  const subloaderName = subloader.loader
  if (subloaderName === 'postcss-loader') {
    subloader.options.postcssOptions = subloader.options.config
    delete subloader.options.config
  }
}

environment.loaders.keys().forEach(loaderName => {
  const loader = environment.loaders.get(loaderName)
  loader.use.forEach(hotfixPostcssLoaderConfig)
})
Enter fullscreen mode Exit fullscreen mode

Your environment.js should look something like this.

const {environment} = require('@rails/webpacker')

// Get the actual sass-loader config
const sassLoader = environment.loaders.get('sass')
const sassLoaderConfig = sassLoader.use.find(function (element) {
return element.loader == 'sass-loader'
})

// Use Dart-implementation of Sass (default is node-sass)
const options = sassLoaderConfig.options
options.implementation = require('sass')

function hotfixPostcssLoaderConfig(subloader) {
  const subloaderName = subloader.loader
  if (subloaderName === 'postcss-loader') {
    subloader.options.postcssOptions = subloader.options.config
    delete subloader.options.config
  }
}

environment.loaders.keys().forEach(loaderName => {
const loader = environment.loaders.get(loaderName)
loader.use.forEach(hotfixPostcssLoaderConfig)
})

module.exports = environment
Enter fullscreen mode Exit fullscreen mode

Let's test this setup

rails g controller Home index
Enter fullscreen mode Exit fullscreen mode

Add the following to app/views/home/index.html.erb

<div class="font-sans bg-white h-screen flex flex-col w-full">
  <div class="h-screen bg-gradient-to-r from-green-400 to-blue-500">
    <div class="px-4 py-48">
     <div class="relative w-full text-center">
       <h1 class="animate-pulse font-bold text-gray-200 text-2xl mb-6">
        Your TailwindCSS setup is working if this pulses...
       </h1>
    </div>
   </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Add the root path to point at the above /home/index in config/routes.rb

root 'home#index'
Enter fullscreen mode Exit fullscreen mode

In one terminal run bin/webpack-dev-server
And in another run rails s

⚠️ Do not try running webpack-dev-server without the bin/ prefix as it's likely it will fail to compile.

You should see this

To test the @apply directive replace the following from app/views/home/index.html.erb with class="pulsing-text"

class="animate-pulse font-bold text-gray-200 text-2xl mb-6"
Enter fullscreen mode Exit fullscreen mode

and in app/javascript/stylesheets/application.scss add the following

.pulsing-text {
@apply animate-pulse font-bold text-gray-200 text-2xl mb-6;
}
Enter fullscreen mode Exit fullscreen mode

Your applications.scss should look like something like this.

@import "tailwindcss/base";

@import "tailwindcss/components";

.pulsing-text {
@apply animate-pulse font-bold text-gray-200 text-2xl mb-6;
}

@import "tailwindcss/utilities";
Enter fullscreen mode Exit fullscreen mode

When you refresh you home page in the browser you should still see this.

GitHub Repo

Top comments (21)

Collapse
 
curting profile image
Oliver Curting •

Hi David! Thanks a bunch for your walkthrough. Very helpful!
That being said, when running bin/webpack-dev-server it keeps re-compiling every second. As a result the page keeps refreshing. Any thoughts on how to fix that?

All the best,
Oliver

Collapse
 
keijsvog profile image
Koen Eijsvogels •

Hi Oliver,

I followed above instructions and got the same issue as you did.
I changed the tailwind.config.js a little bit: I did not use ./**/*.html.erb in the purge section but ./app/**/*.html.erb. This solved for me the issue of the recompiling.

Collapse
 
davidteren profile image
David Teren •

Thanks for that. It was pointed out to me by someone else as well and came here to change it and saw your comment now only. 🤦‍♂️

Collapse
 
davidteren profile image
David Teren •

Hey Oliver, thanks so much for the feedback.
What version of Ruby are you running?

Collapse
 
alistairtweed profile image
Alistair Tweed •

I'm experiencing the same issue on Ruby 2.7.3.

Thread Thread
 
scotti_jack profile image
Jack Scotti •

same issue on Ruby 3.0.1

Thread Thread
 
xertrov profile image
Max Kaye • • Edited

Edit: I think I was wrong below. Here's what worked: try setting compile: false in webpacker.yml and commenting mode: 'jit', in tailwind.config.js. I can run bin/webpack-dev-server, rails s, and guard at the same time now without issue or compile-refresh loops.

This started happening to me after I got tailwind working. Are you running some live-reloading tool? (e.g., I was running bundle exec guard.) If so, try not running that. bin/webpack-dev-server handles livereloading when running, it seems.

NB: webpack-dev-server would almost always compile things twice for me (now) but stops after that (until I make another change).

I also noticed that commenting mode: 'jit', in tailwind.config.js seemed to fix it too, before I stopped running guard.

You can also just not run bin/webpack-dev-server -- rails s will still compile stuff for you and then you can have bundle exec guard in the bg if you prefer that.

Collapse
 
caioabe profile image
Caio Abe •

Great tutorial!

I'd like to point 2 improvements tough:

Typo in:

<!-- missing ">" -->
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"
Enter fullscreen mode Exit fullscreen mode

Since I wasn't used to rails with webpack, had to figure out this:

# run this after updating the webpack in gemfile
bundle exec rake webpacker:install
Enter fullscreen mode Exit fullscreen mode
Collapse
 
davidteren profile image
David Teren •

Hi Caio, thanks for that. Fixed now.

Collapse
 
francescok profile image
Francesco Kirchhoff •

One recommendation for an edit:
Following on a fresh Rails app, it looks like webpack-cli needs to be at at least 4.3.0 or it will throw an error. (TypeError: Class constructor ServeCommand cannot be invoked without 'new' etc.)

Collapse
 
storrence88 profile image
Steven Torrence •

I had this same issue however upgrading webpack-cli to 4.3.0 didn't work for me. I had to upgrade to 4.7.2 in order for it to run. Not sure why?

Collapse
 
frogfangio profile image
Albert Anstett •

Great article, kudos !
I found one typo and since you did such a great job with this article, I would be glad to help by pointing to it: the path to config/webpacker/environment.js should be config/webpack/environment.js (webpack, not webpacker).

I also have a question: in file app/views/layouts/application.html.erb, the line
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
is duplicate at lines 11 and 13. Is this done on purpose ?

Cheers and thanks again.

Collapse
 
davidteren profile image
David Teren • • Edited

Thanks for the kudos.
Fixed the typo.

I'm not sure I follow your comment re the duplicate line. The three pack and link tags each have very distinct purposes.
If I'm missing something, please feel free to point it out.

Collapse
 
davidteren profile image
David Teren •

Fixed. Thanks.

Collapse
 
msojka profile image
Martin Sojka •

Awesome! Works like a charm. Thanks @davidteren

Collapse
 
stephaneliu profile image
Stephane Liu •

Thank you so much for writing this article. Fantastic!

Collapse
 
mzrnsh profile image
Giorgi Mez •

Awesome guide, very easy to follow. Thank you, David

Collapse
 
franciscomunozs profile image
Francisco Muñoz •

Hi David, great tutorial, thanks a lot, it's a chance to use this with Alpine.js?
been trying for a while but I can't make it work. thanks a lot.

Collapse
 
davidteren profile image
David Teren •

Hi Fransico, I've previously set that up and written about it here Tailwind UI, Tailwind CSS, AlpineJS & Inter Typeface for Ruby on Rails.

Let me know if that does not work for you and I'll write it up.

Collapse
 
franciscomunozs profile image
Francisco Muñoz •

Oh, sorry, I didn't see your reply, I'm deeply sorry.
Thanks for your answer. For a long time, I use that tutorial, until Tailwind UI get the 2.0 version update, after that, I can't get AlpineJS working on my curret RoR setup.

Collapse
 
kdiogenes profile image
Kadu Diógenes •

Hey, David! Thanks a lot for taking the time to write this, really helpful!

View full discussion (21 comments)

Read next

aaronreddix profile image

Top 10 Design Patterns in Flutter: A Comprehensive Guide

Aaron Reddix -

chabbasaad profile image

Building a Dynamic Contact Form with Firebase Realtime Database

Chabba Saad -

fiamon profile image

Don't watch, just read.

Julio Fiamoncini -

zorian profile image

Best Practices for Overcoming Mobile Testing Challenges

Zorian -