Tailwind on Rails

Why Tailwind on Rails?

--No need to decide the class name --Eliminate class name conflicts and free you from BEM and CSS design --No more unnecessary CSS left due to design modifications ――You can immediately see what style is applied to which element --Easy to maintain uniformity of color code, font size, breakpoints, etc. --Easy to incorporate sample code that is rolling on the net (even code written by other people is easy to customize) --No need to open ʻapp / assets / stylesheets / any folder / any file` every time you modify a style

environment

Rails 6.0.3

Introduction

$ yarn add tailwindcss
$ yarn tailwindcss init
$ mkdir app/javascript/css
$ touch app/javascript/css/tailwind.css

app/javascript/css/tailwind.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

app/javascript/packs/application.js

import '../css/tailwind.css';

postcss.config.js

module.exports = {
  plugins: [
    //...
    require("tailwindcss"), //add to
    require("autoprefixer"), //add to
    require("postcss-preset-env")({
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
    }),
  ],
};

Operation check

$ rails g controller test index

config/routes.rb

root to: 'tests#index'

erb:app/views/tests/index.html.erb

<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/women/17.jpg " alt="Woman's Face">
    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="text-xl leading-tight">Erin Lindford</p>
      <p class="text-sm leading-tight text-gray-600">Customer Support Specialist</p>
      <div class="mt-4">
        <button class="text-purple-500 hover:text-white hover:bg-purple-500 border border-purple-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal">Message</button>
      </div>
    </div>
  </div>
</div>

use apply

Tailwind CSS has a feature called apply that allows you to apply multiple classes at once. For example, if the same button appears everywhere, it's hard to write font-bold py-2 px-4 rounded bg-red-500 text-white hover: bg-red-700 every time, so btn Just specify the class and use apply to apply the above class.

When using Tailwind with Rails, it is difficult to use apply, so I will deal with it with the helper function.

(This article seems to use apply in Rails, but if you set it like this, styles other than the part where apply is applied will not work. Was)

$ rails g helper tailwind

app/helpers/tailwind_helper.rb

module TailwindHelper
  def btn
    'fosnt-bold py-2 px-4 rounded bg-red-500 text-white hover:bg-red-700'
  end
end

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  helper TailwindHelper
end

erb:app/views/tests/index.html.erb

<a href='#' class='<%= btn %>'>button</btn>

Concern

TailwindCSS has all the possible utility classes, so it has a larger file size than other CSS frameworks. This problem is solved by using a feature called PurgeCSS to extract only the styles related to the classes that are actually used at build time.

But when using Tailwind on Rails, PurgeCSS cannot be used. (I don't know the exact setting method. Please let me know if you know.) Therefore, the file size will be larger than usual.

At first, I was worried about this point and thought that Tailwind on Rails might not be possible.

I checked Tailwind official website

Using the default configuration, the development build of Tailwind CSS is 1996kb uncompressed, 144.6kb minified and compressed with Gzip, and 37.kb when compressed with Brotli.

The point is that it has been minified & gzipped and is 144.6kb. Considering that Bootstrap is 22.1kb, it's quite heavy, but I think it's acceptable.

It will not be critical if you properly set gzip, set the period to be cached in the browser, and utilize the CDN.

reference

-Using Tailwind CSS with Rails-Qiita