Tailwind CSSの習作: Railsでの利用

外観

目的
Tailwind CSSをRailsで利用する手順を記載します。

環境
macOS 10.15.5
Ruby 2.7.1
Rails 6.0.3.1
Yarn 1.22.4
Node 13.12.0
tailwindcss@1.4.6

参照

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

リポジトリ

usutani/try_tailwindcss

画面の準備

rails new try_tailwindcss
cd try_tailwindcss

rm -rf app/assets/stylesheets

app/assets/config/manifest.js
//= link_directory ../stylesheets .css を削除します。

//= link_tree ../images

bin/rails g controller Home index --skip-assets

config/routes.rb

Rails.application.routes.draw do
  resources :home, only: :index
  root 'home#index'
end

stylesheet_pack_tagへの変更

stylesheet_link_tagをstylesheet_pack_tagに変更します。
下記のようにapplication.cssを追加しapplication.jsから参照します。

app/javascript:
 ├── packs:
 │   └── application.js
 │   └── application.css

touch app/javascript/packs/application.css
※空ファイルのまま進めます。

app/javascript/packs/application.js
require("./application.css")を追加します。

app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./application.css")

app/views/layouts/application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

ファイル参照などのエラーが発生していないことを確認します。
bin/rails s
open localhost:3000

Tailwind CSSの導入

Installation

yarn add tailwindcss

app/javascript/packs/application.css
TailwindをCSSに追加します。

@tailwind base;

@tailwind components;

@tailwind utilities;

postcss.config.js
PostCSSの設定ファイルにtailwindcssとautoprefixerを追加します。

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

bin/rails s
open localhost:3000

Tailwind CSSの適用

実装例
app/views/home/index.html.erb
Alertsなどのサンプルコードを実装し動作を確認します。

Extracting CSS components with @apply
For small components like buttons and form elements, creating a template partial or JavaScript component can often feel too heavy compared to a simple CSS class.
In these situations, you can use Tailwind's @apply directive to easily extract common utility patterns to CSS component classes.

app/javascript/packs/application.css

@tailwind base;

@tailwind components;

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

@tailwind utilities;

app/views/home/index.html.erb

<button class="btn btn-blue">
  Button
</button>

bin/rails s
open localhost:3000

Overmind (Procfile)の利用
webpack-dev-serverを利用する場合は、覚書: Overmindで用いたようにProcfileを用いたサーバの起動が便利です。

touch Procfile

rails: bundle exec rails s -b 0.0.0.0 -p 3000
webpack: bin/webpack-dev-server

overmind start

Production環境

production環境で動作確認します。
参照: Rails単体production環境での動作確認

Controlling File Size
未使用のCSSを削除します。
NODE_ENV=productionで実行してPurgeCSSを適用します。

./node_modules/.bin/tailwind init

tailwind.config.js

module.exports = {
  purge: [
    './app/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

NODE_ENV=production RAILS_ENV=production bundle exec rails assets:precompile

RAILS_SERVE_STATIC_FILES=1 bundle exec rails s -e production
open localhost:3000

bin/rails assets:clobber

Heroku
念のためにHerokuでも動作確認しておきます。

git checkout -b heroku
bin/rails db:system:change --to=postgresql
bundle install
git add .
git commit

heroku login
heroku create <APP_NAME>
heroku addons:create heroku-postgresql

git push heroku heroku:master
# heroku run rake db:migrate
# heroku run rake db:seed
heroku open
heroku logs --tail

heroku apps:destroy

以上です。