【これは便利】Tailwind CSSの使い方【開発が劇的にスピードアップするCSSフレームワーク】

Tailwind CSSはHTMLの各タグにclassNameという属性を設定することで、デザインを調整することができるCSSフレームワークです。もちろんレスポンシブデザインにも対応しています。

よく比較されるBootstrapとの違いは次の通り。

このTailwind CSSを使うとCSSファイルをほとんどいじらずに綺麗なデザインが作れてしまうので、最近では企業の求人でも必要なスキルセットとして条件に挙げられることが多くなりました。

個人的にはBootstrapよりTailwind CSSの方が好きかも…。

ところが普通のCSSと違って環境構築が少し手間だったり、ある程度は用意されているクラスを覚えておく必要があったりと、扱うのにちょっとしたコツが必要であることは確かです。

本記事では誰でも簡単にTaiwind CSSを扱えるように、環境構築から実際に扱う際のコツに至るまで網羅的に解説していきます。

Tailwind CSSのインストールと設定

Tailwind CSSを使う際の最初のハードルが環境構築です。

コマンドごとの説明もできるだけ詳しくお伝えしていきます。

インストール

まずはTailwind CSSと併用すると便利なVite（ヴィート）をインストールします。
» 参考：Tailwind CSS公式ページ 

npm create vite@latest frontend

このコマンドにより、frontendディレクトリ配下にVite関連のファイル一式が作成されます。

Viteは開発中に発生したコードの変更を即座に反映する強力なサポートツールです。この機能はホットモジュールリプレイスメント（HMR）と呼ばれ、コード全体ではなく変更箇所のみをリロードします。そのため、動作が高速なのが特徴。

この後フレームワークやライブラリの選択が求められますが、今回は”React”と”Javascript”を選択していきます。

続いて、次のコマンドを実行してTailwind CSS、PostCSS、autoprefixerの3つのパッケージをインストールします。

npm install -D tailwindcss postcss autoprefixer

-Dフラグは、本番環境ではこれら3つのパッケージを除外するオプションです。

この三つのパッケージは開発〜ビルドプロセスまでの間のみ利用されます。
ビルドプロセスによりTailwind CSSクラスは生のCSSに変換されるので、これらはデプロイ後に必要なくなります。
そのため、-Dフラグをつけるというわけです。

次に、Tailwind CSSの設定ファイルとPostCSSの設定ファイルを生成するためのコマンドを実行します。

npx tailwindcss init -p

tailwindcss initコマンドによりtailwind.config.jsが、オプションの-pフラグによりpostcss.config.jsファイルが生成されます。

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

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

contentにはTailwind CSSクラスを使われたが書かれるファイルを指定していきます。これにより、デプロイ時にTailwind CSSクラスで書かれたコードが生のCSSに変換されることになります。

なお、contentプロパティはPurgeCSSという設定の一部です。
PurgeCSSは実際には使用されていないCSSファイルを削除する役割があるので、デプロイの際には使われていないTailwind CSSクラスは生のCSSには反映されないことになります。

続いてindex.cssに次のディレクティブを書きます。（元々書いてあったコードは削除してOK）

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

これらはTailwind CSSを正しく動作させるための基本設定なので、とりあえずこの通りに書いておけば問題なしです。

最後にビルドプロセスを実行します。

npm run dev

これによりローカルで開発サーバーが立ち上がります。
デフォルトではhttp://localhost:5173/にアクセスすることで、変更なども即時反映されるページにアクセスできるはずです。

あとはsrcディレクトリ配下にあるApp.jsxなどに変更を加えてHTMLを作り込んでいくことになります。

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (<h1 className="text-red-900">Hello, World</h1>)
}

export default App

上記の場合、7行目のreturnの引数にTailwind CSSクラスで構築したHTMLを渡すことでページを作っていくことができます。ガンガン開発していきましょう！

基本的な使い方

ここからは主にTailwind CSSで用意されているクラス（classNameとして指定する属性）についての説明をしていきます。

僕が実際によく使うものを中心に解説していきますので、やや癖はあるかもしれませんがTailwind CSSの勘所を掴む際の参考にしてみてください！

すべてのクラスを参照したい方は公式ドキュメント をご参照ください！

テキストの装飾

テキストの装飾でよく使うものをまとめます。

特にdurationはハイパーリンクをホバーした時に、徐々に変化させる場合に便利です。

<button className='hover:bg-green-600 duration-300'>Some Button</button>

サイズや太さのバリエーションはVisual Studio Codeの拡張機能であるTailwind CSS IntelliSenseを入れることで変換候補として表示されますし、公式ドキュメントにあたることでも確認できます。

Tailwind CSSで使える色の種類は次のようなバリエーションがあります。

各色には50から900までの輝度があり、50刻みで設定することができます。

レスポンシブ対応

Tailwind CSSは”モバイルファースト”の設計思想に基づいています。そのため、特に指定のない場合にはモバイル用（一番狭い画面幅）の挙動を表すことになっています。

つまり、特定の画面幅以上の場合のスタイルを適用したい場合には次のように書きます。

md:text-red-400

この場合、md（768px以上）の画面幅の場合に文字色を赤に変更するという意味になります。

基準となる画面幅（ブレークポイント）は次のように定義されているので、必要に応じて使い分けるようにしてください。

間隔の調整

通常はCSSで定義するmarginやpaddingもTailwind CSSではclassNameに属性を指定するだけで簡単に調整できます。

まずはmarginの設定方法からご紹介します。
marginは要素の外側の空白幅を指定するプロパティです。

続いてpaddingの設定方法をご紹介します。
paddingは要素の内側の空白幅を設定するプロパティです。

マージン、パディングを上手に使うことで、要素間のゆとりを持たせることができます。

より便利に使いこなすためのアドバンスな使い方

デフォルトで用意されたユーティリティクラス（classNameで設定する項目）だけでもかなり便利ではあるのですが、さらに一歩進んで次のような使い方もできます。

いずれもTailwind CSSの一歩進んだ活用方法になりますので、詳しく解説していきたいと思います。

コンポーネントの作成

例えば.original-buttonに対して統一して複数のユーティリティクラスを使う場合、次のように@applyディレクティブを使って定義できます。

.btn {
  @apply py-2 px-4 bg-blue-500 text-white text-sm font-medium rounded;
}

追記先は通常、srcディレクトリ内のstyle.cssやmain.cssです。

独自にコンポーネントを定義することにより、プロジェクト内で共通のスタイルパターンを簡単に管理できたり、仕様変更の時の保守がしやすくなるメリットがあります。

一方で、Tailwind CSSでは小さな単一目的のクラスを組み上げてスタイルを表現する設計思想をとっています。そのため、コンポーネントにまとめることで個々のクラスを隠蔽してしまうので、この設計思想とは相容れないものと考えられることもあります。

とはいえ、デメリットをメリットが上回ることは頻繁にあるため、チーム内で同意の上であればコンポーネントを使うことはほとんど問題がないというのが僕の意見です。

カスタムユーティリティの作成

既存のユーティリティクラスでは実装が賄いきれない場合、tailwind.config.jsファイル内の設定を変えることでカスタムユーティリティを定義できます。

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    }
  },
  variants: {
    extend: {
      backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    },
  },
}

Tailwind CSS実装の際に参考になるサイト