Chapter 10

2-7. Tailwind CSS とは

Masuyama

2022.10.15に更新

このチャプターの目次

Tailwind CSS の使い方

Tailwind CSS の使い方

Tailwind CSS とは？

HTML要素の class に直接特定の文字、例えば font-bold と書くことで太字にできるなど
HTMLだけで装飾を完結することができる、最近人気が出ている CSS フレームワークの一つです。

こちらの記事が大変分かりやすいので、是非ご一読ください。

TailWindCSSを始めようとしている人へ

使い方の基本

本アプリでは Tailwind CSS という CSS フレームワークを用いて装飾を行なっていきますが、
今から改めてこのフレームワークを導入する必要はありません。

app/views/home/top.html.erbをみてみましょう

<div>
  <h1 class="font-bold text-4xl">Home#top</h1>
  <p>Find me in app/views/home/top.html.erb</p>
</div>

実はこれは既に Tailwind クラスが最初から書かれています。

rails プロジェクトを作成した時、以下のようなコマンドを実行したことを覚えているでしょうか？

$ bundle exec rails tailwindcss:install

これのおかげです。

font-boldやtext-4xlというクラス名に対して CSS は作成してませんでしたね。

Tailwind : font-bold

左側が Tailwind でのクラス名、右側がこれにより適用される CSS のプロパティ

Tailwind : text-4xl
https://tailwindcss.com/docs/font-size

このように Tailwind クラスは既に書かれていますが、初回起動時はまだ反映されていません。

rails server を起動してみてみましょう。

$ bundle exec rails s

http://127.0.0.1:3000 にアクセスします。

これは、この view ファイルが作成された後にまだ Tailwind のビルドを行なっていないからです。
追加した Tailwind クラスを反映させるには build を行う必要があります。

tailwind の CSS クラスを追加したりしても
view ファイルで使われていない＝不要なスタイルは全てパージ（省略）されてしまっているので
何もしていない状態では適用されません。

そのため、view ファイルで使われている Tailwind CSS クラスが適用されるよう、再ビルドする必要があります。
以下のコマンドを打ちます。

$ bundle exec rails tailwindcss:build
+ /Users/tmasuyama1114/tmasuyama_workspace/menta8lesson/source/techlog/techlog-app/.bundle/ruby/3.0.0/gems/tailwindcss-rails-2.0.8-arm64-darwin/exe/arm64-darwin/tailwindcss -i /Users/tmasuyama1114/tmasuyama_workspace/menta8lesson/source/techlog/techlog-app/app/assets/stylesheets/application.tailwind.css -o /Users/tmasuyama1114/tmasuyama_workspace/menta8lesson/source/techlog/techlog-app/app/assets/builds/tailwind.css -c /Users/tmasuyama1114/tmasuyama_workspace/menta8lesson/source/techlog/techlog-app/config/tailwind.config.js --minify

Done in 178ms.

これで app/assets/builds/tailwind.css が更新されます。

もう一度 http://127.0.0.1:3000にアクセスしましょう。

今度は太文字 (font-bold) と文字サイズの変更 (text-4xl)が適用されています。

一旦ターミナルで Ctrl + C を叩いて rails server を停止させましょう。

自動ビルド手順

このままだと毎回 rails s して tailwind:build してとなり、非常に開発体験が悪いですね。
自動ビルド付きの開発用コマンドはこちら。
rails sを実行する代わりに/bin/devというコマンドを実行します。
(bin/ ディレクトリ内のコマンドを実行するため bundle exec は不要)

$ bin/dev
08:27:17 web.1  | started with pid 64414
08:27:17 css.1  | started with pid 64415
08:27:18 web.1  | => Booting Puma
08:27:18 web.1  | => Rails 7.0.3 application starting in development
08:27:18 web.1  | => Run `bin/rails server --help` for more startup options
08:27:18 web.1  | Puma starting in single mode...
08:27:18 web.1  | * Puma version: 5.6.4 (ruby 3.0.4-p208) ("Birdie's Version")
08:27:18 web.1  | *  Min threads: 5
08:27:18 web.1  | *  Max threads: 5
08:27:18 web.1  | *  Environment: development
08:27:18 web.1  | *          PID: 64414
08:27:18 web.1  | * Listening on http://127.0.0.1:3000
08:27:18 web.1  | * Listening on http://[::1]:3000
08:27:18 web.1  | Use Ctrl-C to stop
08:27:19 css.1  |
08:27:19 css.1  | Rebuilding...
08:27:19 css.1  | Done in 183ms.

コンソールのログをみると web.1とcss.1の両方のログが流れているのが分かるでしょうか。
これは、web というのはrails s、css というのはビルドが走っていることになります。

css の開発サーバーと rails サーバーが同時に立ち上がって、tailwind のスタイル追加の都度、ビルドが走るようになります。
ホットリロードではないためブラウザの更新ボタンを自分で押す必要はありますが、毎回ビルドコマンドを叩かなくてもビルドが実行されるようになります。

試しに赤文字となる Tailwind CSS クラスを追加してみましょう。

https://tailwindcss.jp/docs/text-color

.text-red-500というクラスを指定してみましょう。

app/views/home/top.html.erb の h1 要素に追加してみました。

app/views/home/top.html.erb

<div>
  <h1 class="font-bold text-4xl text-red-500">Home#top</h1>
  <p>Find me in app/views/home/top.html.erb</p>
</div>

この時、 bin/devを起動させていたターミナルで再ビルドが走っていることがわかります。

...
08:38:02 css.1  |
08:38:02 css.1  | Rebuilding...
08:38:02 css.1  | Done in 59ms.

このように、毎回手動でのビルドが不要であるため開発がスムーズです。

さて、再度 http://127.0.0.1:3000/home/top して確認してみます。

赤文字になってますね！

終わったので一旦ターミナルの bin/devは Ctrl + C で停止しておきましょう。

変更をコミット

ここまでの変更をコミット、およびプッシュしておきます。

$ git add .
$ git commit -m "Tailwind CSSクラスを適用"
$ git push