🕌

Rails6でTailwind CSSを使ってみる

8 min read

Railsプロジェクトを作成します。

$ rails new appname -d postgresql

GemfileにTailwind CSSを追加します。

Gemfile
gem 'tailwindcss-rails'

インストールします。

$ bin/bundle install
$ bin/rails tailwindcss:install

必要なファイルを作成します。
既に存在しているものは無視します。

$ mkdir app/javascript/css
$ vim app/javascript/css/tailwindcss.css
$ vim app/javascript/packs/application.js
$ vim app/views/layouts/application.html.erb
$ vim postcss.config.js
app/javascript/css/tailwindcss.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "../css/tailwindcss.css";

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

import "stylesheets/application"

以下が追記されていること。

app/views/customer/layouts/application.html.erb
<%= stylesheet_pack_tag "application", "data-turbo-track": "reload" %>
module.exports = {
  plugins: [
    require('tailwindcss')("./app/javascript/stylesheets/tailwind.config.js"),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

画面は以下。

適当なview.html.erb
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://placehold.jp/500x500.png" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

ブラウザに表示される画面。

色々と迷いましたが、以下2つの記事を参考にすればシンプルな手順でうまくいきました。

この先は失敗例です。
おそらく検索して色々と試して失敗する人もいるかと思いますので、失敗パターンとして残しておきます。

うまくいかなかったバージョン(失敗パターン)

色々と検索して「真似してもうまくいかねえぞ...」と悩む人もいるかと思います。
ここから下は3時間粘って結局うまくいかなかった試行錯誤の記録です。

同じようなミスをした人はこの記事の上の方の手順を試してください。


Railsのプロジェクトは作った状態から始めます。

TailwindCSSをインストールします。

yarn add tailwindcss postcss autoprefixer

以下のようなエラーが出た場合はnパッケージをインストールしてNode.jsをupgradeします。

error tailwindcss@2.1.1: The engine "node" is incompatible with this module. Expected version ">=12.13.0". Got "10.24.0"
error Found incompatible module.

以下はDockerコンテナ内の作業です。

# yarn add  n --ignore-engines
# node_modules/n/bin/n stable
# apt purge -y nodejs npm
# exec #SHELL -l
# node -v
v14.16.1

Tailwind CSSを初期化します。

# npx tailwindcss init

app/javascript/stylesheets/application.scssに以下のコードを追記します。

app/javascript/stylesheets/application.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

app/javascript/packs/application.jsに以下のコードを追記します。

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

require("@rails/ujs").start()
require("turbolinks").start()

require("stylesheets/application.scss")

app/views/layouts/application.html.erbを以下のように編集します。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet">
    <title>Rokuro</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

  <body>
    <%= yield %>
  </body>
</html>

ルートディレクトリにあるpostcss.config.jsを以下のように編集します。

postcss.config.js
module.exports = {
  plugins: [
    // if you are using non default config filename
    require("tailwindcss")("tailwind.config.js"),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

必要なモジュールをインストールします。

# npm install

ここまででセットアップは完了なので、実際に反映されているか確認していきましょう。

config/application.rbに以下を追記します。

config/application.rb
config.generators.assets = false
config.generators.helper = false

ホームページを作成します。

bin/rails g controller home index

rootへのパスを定義します。

routes.rb
Rails.application.routes.draw do
  get 'home/index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root 'home#index'
end
app/views/home/index.html.erb
<h1>This is static#index</h1>
<div class="bg-red-500 w-3/4 mx-auto p-4">
  <p class="text-white text-2xl">Test test test</p>
</div>

webpackerでコンパイルしてみます。

# bin/webpack-dev-server

Railsサーバーを起動します。

# bin/rails s -b 0.0.0.0

エラー対応

以下のようなエラーが発生した場合はWebpackerの再インストールが必要です。

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/apps/rokuro/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/apps/rokuro/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/apps/rokuro/node_modules/postcss/lib/postcss.js:55:10)
    at /apps/rokuro/node_modules/postcss-loader/src/index.js:140:12
ℹ 「wdm」: Failed to compile.

以下のコマンドでwebpackerを入れ直します。

# yarn remove @rails/webpacker
# yarn add rails/webpacker
# yarn upgrade

rails/webpacker

次にGemfileのwebpackerの設定を変更します。

Gemfile
# gem 'webpacker', '~> 4.0'
gem "webpacker", github: "rails/webpacker"

以下のコマンドを実行します。

# bundle install
# bundle update webpacker
# rails webpacker:install
# ./bin/webpack

以下のようなエラーが発生した場合は、package.jsonからbrowserslistを削除するか、ルートディレクトリにある.browserslistrcを削除します。

[webpack-cli] Error [BrowserslistError]: /apps/rokuro contains both .browserslistrc and package.json with browsers

また、以下のようなエラーが発生した場合はwebpackerを再コンパイルします。

ActionView::Template::Error (Webpacker can't find application.css in /apps/rokuro/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
# rm -rf bin/webpack*
# rails webpacker:install
# bin/webpack-dev-server 

などと検索すると解決策が出てきますが、どれもうまくいきませんでした。
このページの先頭に戻って手順をやり直してやっとうまくいきました。

Discussion

ログインするとコメントできます