DEV Community

loading...
Cover image for Adding TailwindCSS to your Rails 6 Project

Adding TailwindCSS to your Rails 6 Project

bodhish profile image Bodhish Thomas ・2 min read

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

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

The taildwind config file will be empty and should look like

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

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"],
  }
};

Adding tailwind to PostCSS config

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

require("tailwindcss"),

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
    })
  ]
}

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";

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

import  "../layouts/application.css";

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'  %>

Discussion (2)

pic
Editor guide
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#...)