はじめに
プログラミング初心者が書いた記事です。
railsアプリを作成しながら勉強しています。
gemでTailwindCSSを導入したのですが正常に適用されず、色々と調べた結果インストール時に生成されるファイルがなぜか生成されていませんでした。この原因に行き着くまで苦労したのでインストールによりなにが生成され変更されるのかまとめてみました。
間違いなどありましたら教えていただけると幸いです。
環境
macOS
Docker 28.4.0
rails 7.2.2.2
bundle使用
TailwindCSS導入手順
- gemfileに
gem "tailwindcss-rails"
追記後、docker compose exec <サービス名> bundle install
- TailwindCSSをインストール
docker compose exec <サービス名> bundle exec rails tailwindcss:install
これでTailwindCSSの導入は終わりなのですが、これによって生成、変更されたファイルは以下になります。
- app/assets/stylesheets/application.tailwind.css作成
- .gitignore追記
- app/assets/config/manifest.js追記
- app/views/layouts/application.html.erb追記
- config/tailwind.config.js作成
- Procfile.dev作成または更新
- bin/devなければ生成
それぞれ解説します。
生成または変更されたファイル
app/assets/stylesheets/application.tailwind.css
app/assets/stylesheets/application.tailwind.cssは、全てのTailwindCSSの読み込みの起点となるファイルであり、中身は以下のようになっています。
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base ブラウザのデフォルトスタイルをリセットしてTailwindCSSのスタイルを適用します。
@tailwind components 自分でカスタムコンポーネントしたスタイルを定義することができ、上記のコードの下に記述します。
@tailwind utilities 実際に使用するクラスが展開され、たとえばhtmlにtext-centerと書くと.text-center { text-align: center; }となります。
開発時は見た目数行だけなのですが、ビルドされると実際のCSSに展開され、未使用のスタイルは削除されます。
例) .bg-blue-500{background-color:#3b82f6}
のように、実際に使用されているクラスのみが含まれるようになります。
少し脱線しますが、同じディレクトリ内にあるapplication.cssはSprocketsによるアセットパイプラインのためのファイルになります。アセットパイプラインとは、CSS・JavaScript・画像などの静的ファイルを効率的に管理・配信するためのフレームワークです。なぜまとめるかというと、Railsアプリケーションにブラウザでアクセスした時にサーバへのアクセス回数を減らすためです。
Sprocketsはsprockets-railsというgemにより実装され(筆者はこれを使用)、他にsprockets gemでもアセットパイプラインを実装できます。
app/assets/stylesheets/application.cssの中の
*= require_tree .
*= require_self
*= require_tree .で現在のディレクトリおよびサブディレクトリ内の.cssファイルを読み込み、
*= require_self でapplication.cssに書いたスタイルも読み込むという指示になります。
開発サーバー立ち上げる(ビルドされる)と、app/assets/builds配下に展開(コンパイル)されたCSSファイルが格納されます。
.gitignore
/app/assets/builds/*
!/app/assets/builds/.keep
上記の中で触れたapp/assets/builds配下に作られたCSSファイルはビルドされるたびに生成するためgit管理から除外します。
app/assets/config/manifest.js
略
//= link application.tailwind.css
略
アセットパイプラインでTailwindCSSを認識するための設定が追記されます。
app/views/layouts/application.html.erb
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application.tailwind", "data-turbo-track": "reload" %>
一行目：tailwindは、Tailwind CSSのベースとなるスタイル、tailwindで使用されるフォント「inter-font」を読み込みます。
二行目：application.tailwindは、プロジェクト固有のTailwindスタイルやカスタマイズが含まれるファイルを読み込みます。
※どちらか片方だけの記事もみかけるのですが、私の環境ではどちらも書いた方がよさそうでした。ここ部分につきましては他の方の記事を参考にした方がいいかもしれません。
config/tailwind.config.js
以下の内容になっています。
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}'
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
// require('@tailwindcss/forms'),
// require('@tailwindcss/typography'),
// require('@tailwindcss/container-queries'),
]
}
contentセクションでTailwind CSSがクラス名を探すファイルパスを指定します。
themeセクションでは、カラーパレット、フォント、タイプスケール、境界線のサイズ、ブレークポイントなど、サイトのビジュアルデザインに関連するあらゆるものを定義することができます。
上記のコードではコメントアウトしていますがpluginsセクションでは、追加のユーティリティ、コンポーネント、基本スタイル、またはカスタムバリアントを生成するために使用できるプラグインを Tailwind に登録することができます。
Procfile.dev
TailwindCSSは変更を反映するたびにCSSを再ビルドする必要があります。
そのため、Procfile.devのcss: bin/rails tailwindcss:watchが、開発サーバーを起動(docker compose exec <コンテナ名> bin/dev)時に、変更検知と自動ビルドを担っています。
bin/dev
#!/usr/bin/env sh
if ! gem list foreman -i --silent; then
echo "Installing foreman..."
gem install foreman
fi
略
exec foreman start -f Procfile.dev "$@"
Foremanの自動インストール、Foremanの実行が記述されています。
Formanとは複数のプロセスを同時に管理・実行するためのツールで、procfile.devに書かれた内容を一つのコマンド(bin/dev)で実行することができます。
引用,参考文献