Tailwind CSS

Tailwind CSS とは#

React のCSSスタイリングは長らく議論が続いており、今なお決定的なアプローチが存在しません。そんな中 CSSでのスタイリングから脱却し、クラス名でスタイルを制御するアプローチが注目を集めています。その代表として Tailwind CSS というCSSフレームワークがあります。

Tailwind CSS を使うことで以下のメリットがあります。

• CSS管理についての議論や設計が不要になる
• クラス命名規則について考えたりドキュメントにまとめる必要がなくなる
• 最終的なバンドルサイズが節約され、パフォーマンスが高くなる
• レスポンシブやダークテーマ対応が直感的にできる
• 従来のCSSフレームワークのように一辺倒な見た目にならない

PARSEとしては今後 Tailwind CSS がアプリケーション開発のスタンダードになると考えており、 Tailwind CSSをベースにスタイルの解説を行なっています。

インストール#

プロジェクトディレクトリで以下のコマンドを実行します。

ターミナル
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

次に生成された tailwind.config.js を以下のように編集します。

tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

content: の配列に加えたパスのファイルのみが Tailwind CSS のコンパイル対象となります。たとえば components に加えて layouts というディレクトリでもUIコンポーネントを実装する場合、 "./layouts/**/*.{js,ts,jsx,tsx}", を加える必要があります。

最後に styles/globas.css の中身をすべて削除し、以下に置き換えます。

styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

これで導入は完了です。

Tailwind CSS の仕組み#

Tailwind CSS は以下の要素から成り立ちます。

• ユーティリティクラス - スタイルパーツ
• 状態バリアント(Variants) - 適用条件

ユーティリティクラス#

ユーティリティクラスは角丸や太字などほとんど生のCSSプロパティに近いものの集合体です。BootStrapなどのCSSフレームワークでは btn というクラスを使えばボタンの見た目になりますが、そのような単位のクラスは存在しません。ボタンの見た目を作りたければ以下のように書きます。

<button className="text-bold px-3 py-2 rounded">ボタン</button>

上記は以下のユーティリティクラスを使っています。

• text-bold: 太字にする
• px-3: 左右に12pxの余白を作る
• py-2: 上下に8pxの余白を作る
• rounded: 角丸にする

ユーティリティクラスは公式ドキュメントにわかりやすくまとまっています。上部の検索バーからやりたいこと（太字の場合bold、線の場合 border）を入力することで目的のユーティリティクラスをすぐに見つけることができます。

はじめは覚えることが多くて大変と感じるかもしれませんがユーティリティクラスの命名が直感的なのですぐに覚えられます。

状態バリアント(Variants)#

バリアントはユーティリティクラスの適用条件です。前述の例でホバーした際に背景色をつけたい場合、以下のようにします。

<button className="text-bold px-3 py-2 rounded hover:bg-blue-50">ボタン</button>

hover:bg-blue-50 を追加しています。 hover: の部分をバリアントと言います。見ての通り、ホバーした際に背景を深度50の青する。という意味になります。

レスポンシブ#

レスポンシブも前述のバリアントで制御できます。Tailwind CSS のレスポンシブのコンセプトはモバイルファーストです。標準のスタイルをより大きな幅のスタイルで上書きしていく形になります。

以下の場合、モバイル幅では2カラムのグリッドですがPC幅以上では4カラムのグリッドになります。

<div className="grid grid-cols-2 lg:grid-cols-4">
...
</div>

ブレークポイントはデフォルトで以下の定義になっています。

つまり先ほどのクラス指定は以下の意味を持ちます。

"基本的に2カラムだが画面はばが 1024px以上であれば4カラムになる"

"スマホ幅の時のみスタイルを適用する"というバリアントはデフォルトで用意されていません（自分で作ることは可能です）スマホ幅 = バリアントなしの状態なので、スマホ幅の時のみ2カラムにしたい場合、前述した書き方で表現しています。

Tailwind CSS に限らずそもそもモバイルファーストでアプリケーションを設計することは現在主流となっているため、開発フローとしてもまずはスマホ幅で実装を行い、続いてそれ以上の幅での見え方を調整していくようにしましょう。

コンポーネント管理#

ボタンのように何度も登場するパーツがある場合、毎回以下のような長い記述をするのは苦痛です。

<button className="text-bold px-3 py-2 rounded hover:bg-blue-50">ボタン</button>

また、ボタンの見た目が途中で変更になった場合全箇所に変更を反映させる必要があります。Tailwind CSS はユーティリティクラスを自由に追加できるので btn というクラスを作ることが可能ですが、それをはじめてしまうと"クラス名や案件固有のルールに悩まされることがない"というTailwind CSSのメリットを失ってしまうのでできる限り避けましょう。

Tailwind CSS では JSフレームワーク等で汎用的なパーツをコンポーネントにすることを推奨しています。たとえば上記のボタンが何度も登場するのであれば以下のようにボタンコンポーネントを作成して再利用します。

components/button.tsx
const Button: FC = ({ children }) => {
  return <button className="text-bold px-3 py-2 rounded hover:bg-blue-50">{children}</button>
}

// 何度でも使える
<Button>ボタンA</Button>
<Button>ボタンB</Button>
<Button>ボタンC</Button>
...

クラス名の連結、切り替え#

Tailwind CSS ではユーティリティクラスを途中で分断することは禁止されています。クラス名の連結や切り替えは classnames のようなユーティリティ関数を使って行います。

たとえばプレミアム会員の文字色を緑から赤に変えたいとします。

// クラス名を途中で破壊している
<p classNames={`font-bold text-${user.premun ? 'red' : 'green'}-400`}>ユーザー名</p>

<p classNames={classNames('font-bold', user.premium ? 'text-red-400' : text-green-400)}>ユーザー名</p>

任意の値を使う#

Taiwind CSS では実際の値がマジックナンバーとして定義されています。ボーダー以外は数字の4倍が実際のピクセル数になります。たとえば w-4 は width: 16px になります。ボーダーに関しては数字=実際のピクセル数になります。また、すべての値がマジックナンバーとして用意されているわけではありません。たとえば Width のリストを参照すると w-13 が用意されていないことがわかります。

では4の倍数以外を使いたい場面や、そもそも用意されていないマジックナンバーを使いたい場合どうすれば良いでしょう？

その値が頻繁に登場する場合カスタムユーティリティを作成すべきですが、その場面でのみ必要である場合以下の書き方で任意の値を使うことができます。

<div class="w-[52px]">
  <!-- ... -->
</div>

これは幅に限らずほとんどすべての属性で使えますが、任意の値を増やすほど最終的なCSSが肥大化するので基本的には使わないようにしましょう。

デザイナーやクライアントのこだわりが強く、1px単位で調整が必要な場合の切り札として考えてください。また、任意の値に変数を使うことはできないので注意してください。

カスタマイズの詳細は公式ドキュメントを参照してください。

プラグイン#

Tailwind CSS には便利なプラグインが用意されています。

プラグインはインストール後に設定ファイル(tailwind.config.js)のpluginsに追加します。

ターミナル
npm install @tailwindcss/line-clamp

tailwind.config.js
  plugins: [
    require('@tailwindcss/line-clamp'),
  ],

Q&A#

オリジナルのユーティリティは作れる？#

作れますが非推奨です。たとえば px-2 は padding-left: 4px; と padding-rigth: 4px が合体したものです。この要領で btn というユーティリティクラスを作ってボタンに関連するスタイルをまとめることは可能ですが、Next.js を使うのであればコンポーネント化することを強く推奨します。ユーティリティクラスを増やせば途中から入ったメンバーや将来の自分にプロジェクト固有のクラス名をキャッチアップすることを強いることになります。

設定ファイルは触らないほうがいい？#

上記の理由と同じくプロジェクト固有のカスタマイズを大量に施すとメンテナンス性が下がりコミットの参入障壁が上がるため可能な限り設定は触らないほうが良いです。著者の経験上設定ファイルをまったく触らずに中〜大規模のプロジェクトをリリースすることは十分に可能です。