はじめに

今回はRailsアプリにTailwindを導入するための手順を書いていきます。

こちらの記事の手順に沿って進めていきます。

バージョン

紹介した記事の中ではそれぞれ

ruby        3.0.0
rails       6.1

以上のバージョンで構成されています。が
私の環境は

ruby        2.6.6
rails       6.1.3

といった感じで記事の通りのバージョンではないのですが、この環境でも概ね記事の通りにすすめることが出来ました。(エラーはあったものの)
ですので、少なくとも私の環境のバージョン以上であれば問題なく導入できるかと思います。

導入手順

記事の中では新しいアプリケーションを作成するところから触れられていますが、
私は既存のアプリケーションに導入しましたので最初の方の手順は少し省きます。

デフォルトで入っているWebpackerを削除

yarn remove @rails/webpacker

新しいWebpackerを追加

yarn add rails/webpacker#b6c2180

Gemfileに以下のgemがあることを確認

gem 'webpacker', '~> 5.0'

記事の中ではアプリケーション作成時に--skip-springオプションをつけています。
webpack-dev-serverを使用するため、spring gemが必要なくなるからです。
既存アプリであれば既にインストールされているはずなので、

記事に合わせるためにこちらはアンインストールしておきましょう。

bundle exec gem uninstall spring

Gemfile

 gem 'spring'   #削除

bundle install

これでOKです。

TailwindsCSS、PostCSS、Autopfrefixer、Tailwindプラグインをインストール。

yarn add tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

app/javascript/stylesheetsにapplication.scssを作成。

mkdir app/javascript/stylesheets && touch app/javascript/stylesheets/application.scss

application.scssに以下を追加。

app/javascript/stylesheets/application.scss

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

app/javascript/pack/application.jsに以下を追加。

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

require("stylesheets/application.scss")  //追加

Rails.start()
Turbolinks.start()
ActiveStorage.start()

postcss.config.jsに以下を追加。

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

app/views/layouts/application.html.erbに以下を追加。

app/views/layouts/application.html.erb

<head>
.
.
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>  <!--追加-->
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" %>  <!--追加-->
.
.
</head>

TailwindCSSの設定ファイルを生成。

npx tailwindcss init --full

生成されたtailwind.config.jsにプラグインを追加

const colors = require('tailwindcss/colors')

module.exports = {
  .
  .
  plugins: [
    require('@tailwindcss/forms'),   //追加
    require('@tailwindcss/typography'),  //追加
    require('@tailwindcss/aspect-ratio'),   //追加
  ],
}

tailwind.config.jsにフォントの設定を追加。

.
.
.
    fontFamily: {
      sans: [
        'Inter var',   //追加
        'ui-sans-serif',
        'system-ui',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        '"Noto Sans"',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
.
.
.

ここまでで記事で紹介されている導入の手順は終了です。

テスト

ここからは導入したTailwindが正常に動作してくれるかテスト用のページを作成してテストしていきます

テスト用のコントローラーとページを生成します。
今回必要なのはコントローラーとビューだけですので、
オプションで不要なファイルの生成をスキップするようにします

rails g controller Home index --no-assets --no-helper --no-test-framework --skip-routes

Viewには以下のコードを貼りつけます

app/views/home/index.html.erb

<div class="font-sans bg-white h-screen flex flex-col w-full">
 <div class="h-screen bg-gradient-to-r from-green-400 to-blue-500">
  <div class="px-4 py-48">
   <div class="relative w-full text-center">
    <h1
     class="animate-pulse font-bold text-gray-200 text-2xl mb-6">
    Your TailwindCSS setup is working if this pulses...
    </h1>
   </div>
  </div>
 </div>
</div>

いまだけルートパスを変更しておきましょう

config/routes.rb

root 'home#index'

このテスト用に作成したページを確認するためにコマンドを実行していきます。

bin/webpack-dev-server

発生したエラー

ここで私の環境では以下のエラーが発生しました。

Error: Cannot find module 'webpack-cli/bin/config-yargs'

環境によってはすんなりいくかもしれませんが、私の場合の解決方法を書いておきます。

こちらの記事を参考にさせていただきました。
記事内で解説されている原因などについては理解が足りず、
私の記事内で説明することは出来ません、申し訳ありません。
ここでは簡潔に解決の手順のみ記させていただきます。
package.jsonを書き換えます

package.json

{
.
.
  "devDependencies": {
    "webpack-cli": "^3.3.12",   //追加
    "webpack-dev-server": "^3.11.2"
  }
}

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

npm install webpack-cli --save-dev

再度テスト

インストールが終わったら先程のコマンドを実行し、サーバーも立ち上げましょう

bin/webpack-dev-server
rails s

http://localhost:3000 にアクセスすれば記事の中で見れるような青いエフェクトのページが表示されるはずです。

以上導入とテストの手順でした

まとめ

今回は既存のRailsアプリケーションにTailwindCSSを導入するための手順を記事の内容に沿って紹介しましたが、
途中起こったエラーについてもよくわかっていない辺り、Webpakerなどに対する理解が浅いと感じています。
今後はその辺りを深く掘り下げていきたいと思います。
最後まで読んでくださりありがとうございました。

参考にした記事

TailwindCSS 2.0 with Rails 6.1

Error: Cannot find module 'webpack-cli/bin/config-yargs'の対処法

rails generate controller で不要なファイルを生み出さないために

RailsにTailwindCSSを導入