Tailwind CSSアプリを作成する
ここからは、CSSフレームワークにTailwind CSSを使用する例を紹介します。Tailwind CSSについての説明は必要最小限になりますので、詳細は下記を参照してください。
土台のアプリケーションを作成する
まず、土台となるRailsアプリケーションを作成します。作成するアプリケーションは、第2回で紹介したもの（importmap-rails＋React）をカスタマイズしたものとします。Tailwind CSSは、RailsのRakeタスクとして組み込まれNode.jsに依存しないので、Import Mapsと組み合わせるのに適しているからです。具体的なアプリケーション作成手順については第2回を参照していただき、以下を変更してください。
- アプリケーション名はtailwind_appにする。
- rails newコマンドに-c tailwindオプションを指定する。
第2回の内容も含めてアプリケーションが作成できたら、動作確認として実行してみましょう。実行は、bin/devコマンドです。
第2回の実行例と異なり、メッセージ「こんにちは やまうちなお さん！」が見出しに並びました。これは、Tailwind CSSによる既定のレイアウトによるものですが、これについては後ほど見ていきます。
アプリケーションの構成を見てみる
関連するファイルの多くは第2章で紹介済みですが、Tailwind CSSのインストールとアプリケーションの実行によって生成された、あるいは改変されたファイルに絞ってここで見ておくことにしましょう。
tailwind_app
├── app
│ └── assets … アセットファイルを置くフォルダ
│ ├── builds … ビルドされたアセットが置かれるフォルダ
│ │ └── tailwind.css … ビルドされたCSSファイル※
│ └── stylesheets … CSSファイルを置くフォルダ
│ └── application.css … アプリケーション共通のスタイルシート
│ └── application.tailwind.css … Tailwind独自のスタイルシート※
└── config
└── tailwind.config.js … Tailwind CSSの設定ファイル
注目すべきは※が付いた2つです。application.tailwind.cssがビルドされた結果が、tailwind.cssとして生成されます。application.tailwind.cssには、Tailwind CSSの使用に必要ないくつかの文が記述されています。
@tailwind base; @tailwind components; @tailwind utilities; …略…
@tailwindというCSSの標準にはない文があるように、拡張子が.cssとはいえTailwind CSS専用です。このファイルをtailwind.cssとしてビルドすることで、アプリケーションでTailwind CSSのスタイルが使用できるようになります。
config/tailwind.config.jsはTailwind CSSの設定ファイルです。このファイルの主な目的は、テーマのカスタマイズです。あらかじめ用意されているデフォルトテーマを、アプリケーションの要求に合わせてカスタマイズするというときには、このファイルを修正することになります。詳細は、以下のページを参照してください。
Theme Configuration - Tailwind CSS
［NOTE］アセットパイプライン
ビルド結果のtailwind.cssについて、アセットパイプラインの働きによって公開フォルダ（public/assets）にコピーされるのは第2回、第3回と同様なので、ここではその処理内容については触れません。app/assets以下のファイルがどのように扱われるかということについては、第2回と第3回を参照してください。
デフォルトのレイアウトを見てみる
Tailwind CSSをインストールすると、ビューにTailwind CSSの使用を前提としたスタイルがいくつか設定されています。まずはアプリケーション共通のレイアウトファイル、そしてReact#topのビューファイルであるapp/views/layouts/application.html.erbを見てみます。
<!DOCTYPE html>
<html>
…略…
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> (1)
…略…
<body>
<main class="container mx-auto mt-28 px-5 flex"> (2)
<%= yield %>
</main>
</body>
</html>
（1）はビルド後のTailwind CSSのスタイルシートtailwind.cssを読み込む指定です。さらに（2）に注目です。yieldメソッドがmainタグで囲まれ、クラスがいくつか指定されています。このクラスがTailwind CSS独自のもので、先ほどの図のような見た目を作り上げています。これらのクラスは頻繁に使われる基本的なもので、それぞれ以下のような意味となっています。
- container：コンテナクラス。この場合は横幅100％。
- mx-auto：横方向のマージン（margin x）。この場合は自動（auto）。
- mt-28：上方向マージン（margin top）。この場合は7rem。
- px-5：横方向パディング（padding x）。この場合は1.25rem。
- flex：子要素にFlexboxレイアウトを指定。
Tailwind CSSでは、このような細かな役割を持ったクラス（ユーティリティクラス）を積み上げて、目的のスタイルを実現します。既定値では、コンテンツは左右中央に配置、Flexレイアウトを使う、上方向マージンは7rem、横方向パディングは1.25remということになります。アプリケーション共通のレイアウトを変更したい場合には、このmain要素のクラスを変更、追加、削除していくことになります。
次に、React#topのビューファイルであるapp/views/react/hello.html.erbを見てみます。このコンテンツが、上記のコンテナの内部に配置されます。
<div> <h1 class="font-bold text-4xl">React#hello</h1> ★ <p>Find me in app/views/react/hello.html.erb</p> </div> <div id="app"></div>
★の付いた行に注目です。h1要素に、クラスがいくつか指定されています。これもTailwind CSS独自のものです。
- font-bold：フォントウェイトはboldで（font-weight: 700;相当）。
- text-4xl：フォントサイズは4xlで（2.25rem）。
これらのクラスはh1要素の見出しの強さを指定するものですが、div要素が2つあることにも注意してください。これらのブロックは、コンテナにflexクラスが指定されていたので、Flexboxレイアウトとなりコンテナ内でフローします。そのため、横に並んでいたのです。このレイアウトを変える例は次で紹介します。
レイアウトを変えてみる
既定のレイアウトに、簡単に手を入れてみましょう。行うのは2点、Flexboxレイアウトを解除して通常のブロックレイアウトにすること、メッセージ「こんにちは やまうちなお さん！」の背景を透かしてマウスポインタのホバーによって色を変えることです。まずは、Flexboxレイアウトの解除です。application.html.erbにあるmain要素のクラスflexをblockに変更します。これで、Flexboxでなくブロックによるレイアウトになります。
<main class="container mx-auto mt-28 px-5 block"> ←flexをblockに変更 …略… </main>
そして、メッセージ「こんにちは やまうちなお さん！」の見た目と挙動の変更です。hello.html.erbにある2つめのdiv要素にスタイルを追加します。
<div id="app" class="mt-4 bg-white bg-opacity-50 hover:font-black hover:text-blue-500"> ←class属性を追加 </div>
追加したクラスの内容は以下の通りです。
- mt-4：見た目を整えるため上マージンを1remに。
- bg-white、bg-opacity-50：背景を白くして透明度を50％に。
- hover:font-black、hover:text-blue-500：マウスポインタのホバーでフォントウェイトをfont-weight: 900;相当、色をcolor: #4299e1;（薄いブルー）相当に。
Tailwind CSSでは、hover疑似クラスをクラス名に前置きすることで、ホバー時にのみ適用するクラスを指定することが容易になっています。
Pumaサーバを起動して、図のようなページが表示されれば成功です。マウスポインタをメッセージに乗せて挙動を試してください。
