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

#rails #tailwindcss

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

Top comments (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

Read next

codingashish_dev profile image

5 Ways to Add Tailwind CSS to Your Project

Ashish Prajapati -

mematthew123 profile image

How To: Interactive Pricing Component with Tailwind CSS

mematthew123 -

jetthoughts-dev profile image

Ruby on Rails 8: Custom Compression for Encrypted Data

JetThoughts Dev -

nemuba profile image

Ruby on Rails: Autenticação utilizando Devise + Keycloak

Alef Ojeda de Oliveira -