Rails6系でポートフォリオを作成する中で、CSSフレームワークであるtailwindcssを導入しようとしたらかなり手こずったのでまとめます。
自分のためのまとめでもあるので、エラーも含め時系列順に書いています。
ご参考にされる際は最後までご覧ください。
記事初投稿＆初学者のため、誤りなどありましたらお気軽にご指摘いただけると幸いです。
環境
ruby 3.1.2
rails 6.1.7
tailwindcssをインストール
Gemfileに
Gemfile
gem 'tailwindcss-rails'
を追記して bundle install。
これでGemfile.lockにtailwindcss-railsが追加されるはずです。
次に
ターミナル
rails tailwindcss:install
実行時のログは以下になります。(XXはユーザー名、XXXXXはディレクトリ名）
Add Tailwindcss include tags and container element in application layout
insert app/views/layouts/application.html.erb
insert app/views/layouts/application.html.erb
insert app/views/layouts/application.html.erb
Build into app/assets/builds
exist app/assets/builds
identical app/assets/builds/.keep
append app/assets/config/manifest.js
append .gitignore
Add default config/tailwindcss.config.js
create config/tailwind.config.js
File unchanged! The supplied flag value not found! Procfile.dev
Add bin/dev to start foreman
identical bin/dev
Compile initial Tailwind build
run rails tailwindcss:build from "."
["/Users/XX/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/tailwindcss-rails-2.0.14-x86_64-darwin/exe/x86_64-darwin/tailwindcss", "-i", "/Users/XX/workspace/XXXXX/app/assets/stylesheets/application.tailwind.css", "-o", "/Users/XX/workspace/XXXXX/app/assets/builds/tailwind.css", "-c", "/Users/XX/workspace/XXXXX/config/tailwind.config.js", "--minify"]
Done in 594ms.
次はtailwind.config.jsファイルを下記で作成します。
yarn tailwindcss initでも結果は同じようですが、私はnpmコマンドで実行しました。
yarnコマンドの方が一般的なようです。
ターミナル
npm tailwindcss init
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{html.erb,haml,html,slim}'
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
]
}
tailwindcssを使うための設定を書いていきます。
ファイルが見当たらなければ適宜作成してください。
app/javascript/css/tailwind.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
app/javascript/packs/application.js
import "../css/tailwindcss.css" #追記する
import "../css/tailwindcss.css" #追記する
postcss.config.js
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/webpackでビルドしてみます。
実行結果のログはこちら。(エラー文だけ抜粋しています）
ターミナル
ERROR in ./app/javascript/css/tailwindcss.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./app/javascript/css/tailwindcss.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Cannot find module 'tailwindcss'
略
ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve 'stylesheets/application' in '/Users/XX/workspace/XXXXX/app/javascript/packs'
@ ./app/javascript/packs/application.js 5:0-33
要はtailwindの設定ファイルが読み込めていないということらしいです。
ここで私は完全にハマってしまい、見てもらいながら色々いじくり回しました。
変更1
app/view/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>アプリ名</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>#追記する
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<main class="container mx-auto mt-28 px-5 flex">
<%= yield %>
</main>
</body>
</html>
変更２
先ほど追記したimport "../../assets/stylesheets/application.css"の読み込みがうまくいっていないようなのでディレクトリの階層を明記します。
app/lavascript/packs/application.js
import "stylesheets/application"
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "../css/tailwindcss.css"
#階層を明記
import "../../assets/stylesheets/application.css"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
変更３
application.cssに下記の3行を追加します。
app/assets/stylesheets/applacation.css
@import "tailwindcss/base";#追記する
@import "tailwindcss/components";#追記する
@import "tailwindcss/utilities";#追記する
私の場合は変更3まで実行してようやくtailwindcssが適用されました。
とにかくrails6のwebpackerの複雑なコンパイルのせいで読み込みがうまくいかなかったようです。
適当なviewに下記のサンプルコードを記載し、画像のように表示されていたら導入成功です。
サンプルコード
<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>
ご参考までに。
導入にあたり下記を参考にさせていただきました。
https://qiita.com/tabakazu/items/4c152de6e9a2c293d1f2
https://zenn.dev/fjsh/articles/2055416ca30cc4
https://zenn.dev/ryouzi/articles/da8a77accc221e