はじめに
今回は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
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に以下を追加。
@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に以下を追加。
<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には以下のコードを貼りつけます
<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>
いまだけルートパスを変更しておきましょう
root 'home#index'
このテスト用に作成したページを確認するためにコマンドを実行していきます。
bin/webpack-dev-server
発生したエラー
ここで私の環境では以下のエラーが発生しました。
Error: Cannot find module 'webpack-cli/bin/config-yargs'
環境によってはすんなりいくかもしれませんが、私の場合の解決方法を書いておきます。
こちらの記事を参考にさせていただきました。
記事内で解説されている原因などについては理解が足りず、
私の記事内で説明することは出来ません、申し訳ありません。
ここでは簡潔に解決の手順のみ記させていただきます。
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'の対処法