DEV Community

Cover image for Adding TailwindCSS to your Rails 6 Project
Bodhish Thomas
Bodhish Thomas

Posted on

Adding TailwindCSS to your Rails 6 Project

Tailwind + Rails 6

Steps to configure tailwindCSS in you rails 6 application

Install Tailwind CSS

Run the following command to add tailwind to the package.json

 yarn add tailwindcss
Enter fullscreen mode Exit fullscreen mode

Create Tailwind Configuration

The following command will create a tailwind.config.js file where you could setup the default configuration for TailwindCSS

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

The taildwind config file will be empty and should look like

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Here is an example of my tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          100: "#fef6eb",
          200: "#f7c686",
          300: "#f4b35d",
          400: "#f2aa49",
          500: "#f1a035",
          600: "#d99030",
          700: "#c1802a",
          800: "#a97025",
          900: "#916020",
        },
      },
    },
  },
  purge: {
    content: ["./app/**/*.html.erb"],
  }
};
Enter fullscreen mode Exit fullscreen mode

Adding tailwind to PostCSS config

You will need to add the following line to the postcss.config.js file.

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

here is an example of my postcss.config.js file

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

Import tailwind to your Javascript Pack

You will need to import tailwind via javascript.

create an application.css file in app/javascript/layouts/

I usually keep this in a folder called layouts, you could choose any other folder that's convenient for you inside the app/javascript directory

add the following to your application.css file that you have created now

/* tailwind */
@import "tailwindcss/base";

@import "tailwindcss/components";

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

Import application.css in your app/javascript/packs/application.js file.
(add the following line)

import  "../layouts/application.css";
Enter fullscreen mode Exit fullscreen mode

Import Tailwind to your layout

Now that you have added TailwindCSS to your application pack, you will have to import it in application.html.erb to use tailwind globally in your application.

Add the following line to app/views/layouts/application.html.erb in <head>

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

Discussion (3)

Collapse
richard profile image
Richard

Any plans on publishing how to add TailswindCSS v2 on Rails 6?

Collapse
thiagocardoso1988 profile image
Thiago Cardoso

I just did using this very article, the only thing I needed to do was setting up Autoprefixer 7 instead (as shown here tailwindcss.com/docs/installation#...)

Collapse
patti8 profile image
tndyrvld

thanks