出来る限り短く説明する React + Tailwind CSS 入門（忙しい人向け）

VTeacher 所属の Satomi です。
※各項目をできるだけ3行以内にまとめています。
（出来る限り短く説明するReactJS入門 に合わせて書いています）

昨年（2021年）くらいから Tailwind CSS の話題が増え出し、最近はReactと一緒に使われる場面が増えてきたと思います（私も昨年から使い始めました）。

• Vercel

https://twitter.com/vercel/status/1484237807262613510

• Next.js as the React framework / NextAuth.js for authentication
• Vercel for deployment
• PlanetScale as the database (MySQL)
• Prisma as the ORM for database access
• Tailwind for CSS styling 👈

本投稿は、React + Tailwind CSS の基礎知識をさらっと確認できるようにしたものです。
忙しい人向けです。

※ちなみに Tailwind は追い風という意味です。

Tailwind CSS

公式サイトはこちらです。
https://tailwindcss.com/

React で Tailwind CSS を使用する

既存プロジェクトへの導入はノウハウが必要だと思いますが、Create React App でのプロジェクト作成後であれば、かんたんに導入できます。

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init

これだけです。
あとは自分の環境に合わせて設定ファイルをいじります。

学習ポイント

Tailwind CSS の学習ポイントは、公式サイトに最初に書かれている、次のことだと思います。

A utility-first CSS framework packed with classes like flex , pt-4 , text-center and rotate-90 that can be composed to build any design, directly in your markup ...

（翻訳）
flex、pt-4、text-center、rotate-90などのクラスがパックされたユーティリティファーストのCSSフレームワークであり、マークアップで直接、任意のデザインを構築するために構成できます...

🤔　　🤔　　🤔

Tailwind CSS は 「ユーティリティファースト」 の CSSフレームワーク

実はこのポイントを押さえないと、Tailwind CSS のメリットがボヤけます（私はボヤけました）。今、 Tailwind CSS は「流行っている」、「イケてる感がある」という部類のテクノロジーになっています。「なんとなく」が採用理由になっていて、他のCSSフレームワーク・ライブラリとの比較が難しかったのです。

では、ユーティリティファーストって何？

CSSの設計手法のひとつです。
ユーティリティクラスと呼ばれるCSSのclassを、予め複数個を用意しておき、それを組み合わせてデザインを決定します。

Tailwind CSS のコード例

• text-white（文字色を白にする）
• bg-black（背景色を黒にする）
• w-20（横幅を規定の20に指定する）

<p class="text-white bg-black w-20">Hello world!</p>

• ブラウザで見たとき

これを見ると、「Bootstrapと似ている？」と思うのではないでしょうか？

Bootstrap のコード例

• https://getbootstrap.com/docs/5.1/components/buttons/

<button class="btn btn-dark" type="button">Dark</button>

• ブラウザで見たとき

開発者目線だと、 Tailwind CSS と Bootstrap は大差がないように見えますね。あながち間違ってはいません。Tailwind CSS は Bootstrap の Sizing のような、便利なCSSクラスが大量に用意されているイメージです。

Bootstrap の Sizing のコード例

• https://getbootstrap.jp/docs/4.1/utilities/sizing/

<div class="w-25 p-3">Width 25%</div>

• ブラウザで見たとき

Memo:

インラインスタイルのCSSによく似た形で、予め用意されたCSSを組み合わせることで、最終的なデザインを決定する点は、Tailwind CSS も Bootstrap も同じです。

• Bootstrap では、ある意味「デザイナーいらず」で、デザインの知識がなくても、用意されたUIパーツのCSSを使うことで、それなりのものを制作できました。
• Tailwind CSS は、 Bootstrap と比較するとデザインの幅は広がりますが、ある意味「デザイナー必須」または「デザインもできるエンジニア必須」と言えます。
  • Tailwind CSS 製のUIパーツPluginとして daisyUI があります。

以前はBEM（Block Element Modifier）が流行っていた

10年前くらいから流行り始めた手法で、Block、Element、Modifierという3つの構成の頭文字をとった「BEM」というCSS設計手法があります。

https://en.bem.info/methodology/

	役割	説明
B	Block	ヘッダー/サイドバー/メインコンテンツ等の大枠(Block)を決める。
E	Element	Blockの中に置くElement(ボタンなど)を洗い出す。
M	Modifier	Elementの状態変化(アクティブ、非アクティブ等)を洗い出す。

B/E/Mに分割、CSSの命名規約は .block__element--modifier とする
例: .main-content__entry-button--active
（ブロック＋アンダーバー2つ＋エレメント＋ハイフン2つ＋モディファイア）

BEMはエンジニアとデザイナーの間に齟齬が生じやすい

BEMはとてもわかりやすいし、CSSの設計がしやすいと思いますが、
コンポーネント指向（React等）で開発する際に、

• エンジニア側のコンポーネント分割単位
• デザイナー側の Block / Element 分割単位

で、ズレが生じやすく、管理が煩雑になるという欠点がありました。

※ユーティティファーストは昨今のコンポーネント指向開発に寄せたCSS設計手法とも言えます。

https://tailwindcss.jp/docs/utility-first

Tailwind CSS を書いてみる

「ユーティティファースト」を頭の片隅に入れたら、実際に手を動かしてみましょう！

とりあえずさわってみる（公式のPlayground）

Tailwind CSS のお試し場所はこちらです。
https://play.tailwindcss.com/

HTMLタブを選択し、中身を消した後、次のコードを貼り付けてください。

<p class="text-3xl font-bold underline">Hello world!</p>

下線付きで Hello world! と表示されたと思います。

おめでとうございます！
最初の Tailwind CSS ができましたね。

では、次に文字の色を青にしてみます。
text-blue-500 を追記します。
下記のようにしてください。

<p class="text-blue-500 text-3xl font-bold underline">Hello world!</p>

文字の色が青に変わったと思います。

ユーティリティクラスの種類

このような、text-blue-500 / text-3xl / font-bold / underline を Tailwind CSS のユーティリティクラスと呼び、Tailwind CSS が予め大量に用意してくれています。
※カラーだけでも200種類近くあります。

※Tailwind CSS のユーティリティクラス一覧はこちらをご参照ください。
https://tailwindcss.com/docs/text-color

これらのユーティリティクラスを組みあわせてデザインを決めていきます。
ユーティティファーストですね。

もう少し試してみたいユーティリティクラス

• text-white（テキスト色が白）
• bg-black（背景色が黒）
• w-20（横幅の指定）

<p class="text-white bg-black w-20">
  Hello world!
</p>

プロジェクトで Tailwind CSS を使う

CDN経由で Tailwind CSS を使う

CDN経由の使用の場合、Tailwind CSS の全ての機能を使用できませんが、手軽に試してみたい場合は有用です。

https://cdn.tailwindcss.com

• 公式サイトのチュートリアル
  https://tailwindcss.com/docs/installation/play-cdn

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

インストールして Tailwind CSS を使う

結局のところ、インストールして使うことが多いと思います。

https://tailwindcss.com/docs/installation

• Tailwind CSS をインストール

$ npm install -D tailwindcss

• 初期設定（ tailwind.config.js を生成）

$ npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

※ --full オプションを付けると、完全なコンフィグファイルが生成されますが、defaultの構成（最小限の構成）が推奨されています。

• tailwind.config.js を修正
  • Tailwind CSS の適用範囲（場所、拡張子）を指定。最小構成でビルドしてくれます。
    （公式サイトではパスが間違っていたので注意）

module.exports = {
  content: ["./src/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

• Tailwind CSS を使用する html ファイルを作成する

src/index.html を作成して、下記のようにする。
※ コード内に記述した dist/output.css は、後ほど作成

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="../dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

• Tailwind のcssファイルを作成（後でこのファイルをビルドする）

src/input.css を作成して、下記のようにする。

@tailwind base;
@tailwind components;
@tailwind utilities;

• ビルドして生のCSSを（ dist/output.css という名前で）出力する

$ npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Doneと表示されたらOKです。
自動終了しないので不安になりますが、そのまま起動しておくことで、ファイル編集を感知して自動ビルドして新しいCSSを出力してくれます（ホットリロード的な）。

• 出力された dist/output.css の内容

tailwind.config.js の content で対象範囲を指定しましたが、その対象範囲内で使われているユーティリティクラスが自動で記述されます。

/*
! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
*/

（中略）

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.font-bold {
  font-weight: 700;
}

.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

• さきほどのhtmlファイルをブラウザで開く

ブラウザで表示すると、 Hello world! に下線が付いた状態で表示されると思います。

• 別のユーティリティクラスを使ってみる

<h1 class="text-3xl font-bold underline">

↑
試しに text-3xl を text-9xl に書き換えてみましょう。

※tailwindcssのビルドコマンドを停止してしまった場合は、下記のコマンドをもう一度打ちましょう。Doneと表示されたらOKです。そのまま起動しっぱなしで、ファイルの変更を自動検知してビルドしてくれます（ホットリロード的な）

$ npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

ブラウザをリロードしてみてください。
文字サイズが大きくなったと思います。

Tailwind CSS のカスタマイズ

スタイル再利用でカスタムクラスを作る(apply)

dekamoji を定義してみます。
名前の通り、デカい文字になるカスタムクラスです。

• src/input.css

さきほど <h1> の class に記述していた Tailwind CSSのユーティリティクラスを記述し、先頭に @apply を記述して適用します。@apply を付けることで、既存のユーティリティクラスを再利用できます。

@tailwind base;
@tailwind components;
@tailwind utilities;

.dekamoji{
  @apply text-9xl font-bold underline;
}

これで、↓と

<h1 class="text-9xl font-bold underline">
  Hello world!
</h1>

↓は同じデザインになります。

<h1 class="dekamoji">
  Hello world!
</h1>

さらに hademoji を定義してみましょう。
名前の通り、派手な文字になるカスタムクラスです。

@tailwind base;
@tailwind components;
@tailwind utilities;

.hademoji {
  @apply text-9xl font-bold underline;
  color: pink;
}

<h1 class="hademoji">
  Hello world!
</h1>

このように @apply と通常のCSSを組み合わせることができます。

既存のユーティリティクラスを変更(override/extend)

• tailwind.config.js ファイルを修正

  • theme に 定義すると、既存のユーティリティクラスを上書きできます。
    下記の例の場合、 colors の blue-50 という既存ユーティリティクラスの色を変更（上書き）しています。
  • extend で、独自のユーティリティクラスとして登録できます。
    下記の例の場合、colors に hoge という新規ユーティリティクラスを登録しています。

• 例

module.exports = {
  content: ["./src/*.{html,js}"],
  theme: {
    colors: {
      'blue-50': '#0000ff',
    },
    extend: {
      colors: {
        hoge: '#777777',
      },
    },
  },
  plugins: [],
}

• 下記のコードをブラウザで見てみましょう。

<h1 class="bg-blue-50">Override Blue Color!</h1>
<h1 class="bg-hoge">Hoge Color!</h1>
<h1 class="bg-red-50">Red Color!</h1>

注意点

注意点ですが、上記の方法は、ユーティリティクラスの使用を制限する場合の書き方です。つまり、上記の例ですと、 color は blue-50 と hoge しか利用できなくなります。変更のないユーティリティクラス（例えばred-50）は使用できません。

変更のないcolorのユーティリティクラスを、そのまま利用できるようにする場合は下記のようにしてください。

• 例

const colors = require('tailwindcss/colors')
module.exports = {
  theme: {
    colors: {
      ...colors,
      'blue-50': '#0000ff',
    },
    extend: {
      colors: {
        ...colors,
        hoge: '#777777',
      },
    },
  },
  plugins: [],
}

上の例はJavaScriptのスプレッド構文を使用しています。
JavaScriptを含めたくない場合は、下のように extend だけの使用を検討してください。

• 例：既存のカラーパレットを全部使用できる ＋ blue-50 を変更 ＋ hoge が使える

module.exports = {
  theme: {
    extend: {
      colors: {
        'blue-50': '#0000ff',
        hoge: '#777777',
      },
    },
  },
}

Tailwind CSS 以外のCSSを併用する

特別な設定不要で併用できます。
が、Tailwind CSS の導入が無意味になるような使用（濫用）はやめておきましょう。
とくにユーティティファーストの方針を崩さないように注意しましょう。

• 例

<style>
  .hello {
    color: red
  }
</style>

<p class="hello bg-black w-20">Hello world!</p>

React で使用する

導入手順は公式サイトにあります。
https://tailwindcss.com/docs/guides/create-react-app

Create React App を使用しますので、Nodeのバージョンを確認します。

Node >= 14.0.0 and npm >= 5.6

$ cat .node-version 
14.18.1
$ nodenv versions
$ nodenv install 14.18.1
$ node -v
v14.18.1

• Create React App を使用して新しいReactプロジェクトを作成し、作成したプロジェクトに移動します。

$ npx create-react-app my-project

$ cd my-project

• tailwindcss と postcss 、autoprefixer をインストールします。
  • Post CSS
    JavaScriptでCSSを変換するためのツール
    https://postcss.org/
  • autoprefixer
    CSSルールに追加するPostCSSプラグイン
    https://github.com/postcss/autoprefixer

$ npm install -D tailwindcss postcss autoprefixer

• initコマンドを実行して、 tailwind.config.js と postcss.config.js を生成します。

$ npx tailwindcss init

• tailwind.config.js に Tailwind CSS の適用範囲を指定します。

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

• ./src/index.css に Tailwind CSS の適用範囲を指定します。

./src/index.css は、Create React App により生成されるファイルで、既に存在するので、ファイルの先頭に下記の Tailwind CSS のコードを記述します。

@tailwind base;
@tailwind components;
@tailwind utilities;

• Reactアプリケーションを起動します。

$ npm run start

• 準備が整いましたので、Tailwind CSS を試すために src/App.js を変更してみましょう。

import './App.css';

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
    </div>
  );
}

export default App;

ブラウザで確認する。

• http://localhost:3000/

下線付きで Hello world! が表示されたと思います。
（ついでに text-green-500 も追加してみましょう）

Next.js で使う

公式サイトに手順が紹介されています。
https://tailwindcss.com/docs/guides/nextjs

カスタマイズ方針

デザインによっては一度に多くのユーティリティクラスを記述することになります。

• 実務レベルのコード例（ Tailwind UI の場合 ）

<button class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false" type="button">
  <span class="sr-only">Open main menu</span>
</button>

https://tailwindui.com/components/marketing/sections/heroes

これを（うーん} 🤔 と感じる場合、UIパーツ単位で さきほど説明したカスタムクラス を作成（ @apply を使用）することを検討してみましょう。UIパーツ単位ですので、daisy UI や Bootstrap のような書きごこちになると思います。

※ daisy UI は Tailwind CSS 製なので、カスタマイズ方針が参考になると思います。
https://daisyui.com/docs/customize/

まとめ

• 実用的に整理されたCSSクラスをユーティリティクラスと言い、ユーティリティクラスを組み合わせてデザインすることを「ユーティリティファースト」と言います。
• ユーティリティファーストのデザイン設計は、Reactなどのコンポーネント指向の開発と相性が良いと言われています。
• ユーティリティファーストを実現できるCSSフレームワークに、Tailwind CSS があり、モダンなCSS周りのテクノロジーが取り入れられています。