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

Recommended Posts

Tailwind on Rails
Launch Rails on EC2
Test run on rails
Deploy RAILS on EC2
Ruby on Rails Elementary
Ruby on Rails basics
Yay! I'm on Rails!
Ruby On Rails Association
Resolve ActiveRecord :: NoDatabaseError on rails6
Ruby on rails learning record -2020.10.03
Portfolio creation Ruby on Rails
Install Sidekiq pro on Rails
Ruby on rails learning record -2020.10.04
Ruby on rails learning record -2020.10.09
Ruby on Rails config configuration
Ruby on Rails basic learning ①
[Ruby on Rails] about has_secure_password
Ruby on rails learning record-2020.10.07 ②
Yay! I'm on Rails! Repetition
Install Rails on macOS Catalina
Commentary on partial! --Ruby on Rails
Post a video on rails
Ruby on rails learning record-2020.10.07 ①
Cancel Ruby on Rails migration
Ruby on rails learning record -2020.10.06
Ruby on Rails validation summary
Ruby on Rails Basic Memorandum
Ruby on Rails Overview (Beginner Summary)
How to deploy jQuery on Rails
[Ruby on Rails] yarn install --check-files
Ruby on Rails variable, constant summary
Installing Ruby + Rails on Ubuntu 18.04 (rbenv)
[Ruby on Rails] Introduced paging function
Basic knowledge of Ruby on Rails
How to use Ruby on Rails
How to deploy Bootstrap on Rails
[Ruby on Rails] Add / Remove Columns
Ruby on Rails Japanese-English support i18n
(Ruby on Rails6) "Erase" posted content
[Ruby on Rails] CSV output function
Ruby on Rails 6.0 environment construction memo
[Ruby on Rails] What is Bcrypt?
Launch Rails on EC2 (manual deployment)
Rails on Tiles (how to write)
Rails on Docker environment construction procedure
[Ruby on Rails] Confirmation page creation
[Today's stack # 1] Until on rails on cloud9
Ruby On Rails devise routing conflict
[Ruby on Rails] Comment function implementation
[Ruby on Rails] DM, chat function
Deploy Rails on Docker to heroku
[Ruby on Rails] Convenient helper method
Check the root on the Rails browser
Deploy your Rails app on Heroku
[Ruby on Rails] Stop "looping until ..."
[Ruby on Rails] Introduction of initial data
[Rails g.error]
Rails basics
Rails Review 1
[Ruby on Rails] Creating an inquiry form
Rails API