Back to the knowledge base

Using TailwindCSS in Rails

TailwindCss has been around for a short while, but it’s becoming more and more popular. Not only because of a solid set of “utility classes” (one-off Css classes that only do one thing), but also because of a solid build tool/configuration based on plugins that can be easily extended upon if you know Javascript. As a designer, I like the solid default “theme” it comes with too. Out of the box Tailwind comes with a solid set of colours, which then in turn are used for the color, background and border-color properties.

Installing Tailwind in your Rails app

TailwindCss is easily installed using Yarn. This assumes you have Webpacker and Yarn installed.

$ yarn add tailwindcss
$ ./node_modules/.bin/tailwind init app/javascript/stylesheets/tailwind.js

And add tailwindcss: './app/javascript/tailwind.js to your .postcssrc.yml file.

But if you want to get a headstart, it’s even easier to either use Sjabloon or use its LITE version. With either version Tailwind is all set up for you.

Creating UI real fast

The many different classes are ideal to be just added right in the HTML. I often start this way. It makes it super quick to create a layout for a page or a UI component.

This could look something like this:

<%= link_to "Go home", root_path, class: "inline-block w-full mb-4 px-6 py-8 text-2xl font-bold text-center text-blue bg-blue-lightest rounded sm:w-1/2 sm:mr-2" %>

The order of classes is not random here. It starts with the sizing/width/height selectors first as they directly impact the painting/rendering of the elements onto the page. The sm: prefixed classes are responsive classes and are only applied when that breakpoint is reached—super smart! Auto-refreshing the page allows you to quickly see how your new component looks. Text too light? Change it to text-blue-dark.

When it’s just a component I use one or twice one a page (literal of as part of partial) I leave it just as is. But once I am about to reuse the component elsewhere in the app, I extract it out into a standalone css class.

Like so:

.text-block {
  @apply inline-block w-full mb-4 px-6 py-8;
  @apply text-2xl font-bold text-center text-blue;
  @apply rounded;
  @apply bg-blue-lightest;

  @screen sm {
    @apply w-1/2 mr-2;
  }
}

You can see how the order is kept the same as the html version. This is on purpose, as I just have to copy/paste the entire list of classes, add breaks and add Tailwind’s @apply. The grouping here is intentional too. You could as easily just add all classes to one @apply, but grouping it like this, makes it just a bit more clear.

Structuring your styles and stylesheet

The stylesheet itself is structured too—though it’s likely that early on you don’t add too much in your external stylesheet. This ordering is loosely based on ITCSS (coined by Harry Roberts). The thought behind it is, you go from low specificity to high specificity. Not coincidentally Tailwind is perfect to follow this methodology.

@import "tailwindcss/preflight";

@import "settings";
@import "base";
@import "objects";
@import "components";

@import "tailwindcss/utilities";

Let’s go over each of these:

Keeping to conventions and your files organised like these, make for clean and clear stylesheets. Easy to create and to add changes even months after you touched the codebase.

The best practices described here can be applied to any Css codebase and are not really specific to Ruby on Rails apps. These are general best practices for creating and managing stylesheets (based off of more than 15 years of writing Css).

A Rails SaaS starter kit to focus on your core product

Get started

25+ developers, companies and freelancers bought Sjabloon in the last 4 weeks