Tailwind CSSとは？Tailwind CSSをプロジェクトに導入する方法を解説

なやむくん

Tailwind CSSをプロジェクトに導入したい…。

なやむさん

Tailwind CSSを使ったメリットって何？

などの疑問や悩みを解決してまいります。

Table of Contents

Tailwind CSSとは

Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。

なやむさん

「ユーティリティファースト」って何ですか…？

みつた

ユーティリティファースト（Utility First）とは、「使いやすさを優先する」といった意味があります！

Tailwind CSSは汎用的なクラス（ユーティリティクラス）を利用するため、カスタマイズ性に優れており、HTMLコードにクラスを記述するだけで直接スタイルを適用することができます。

Tailwind CSS主なメリット

Tailwind CSSを利用するメリットをピックアップしました。

なやむくん

どんなメリットがあるんだろう…？

CSSファイルを記述する必要がない

Tailwind CSSは、用意されているユーティリティクラス（text-4xl、text-blue-500、mt-10など）を用いてスタイルを適用させていくため、手動でCSSを記述する必要がなくなるため、単純に開発時間が短縮されます。

レスポンシブデザインも簡単にスタイルを適用させることができるので、モバイルファーストのプロジェクトにも安心してTailwind CSSを利用することができます。

チーム開発に適している

チーム開発を行う際にコーディングルールが徹底されていればいいのですが、コーディングルール自体が浸透していなかったり、開発者の人数が多いほどコードの記述方やデザインルールを統一するのが難しくなります。

しかし、Tailwind CSSは用意されたクラスでスタイルを適用させていくので、一貫した同じスタイルでコーディングを行う事ができます。

パフォーマンスを向上させる機能

Tailwind CSSには、未使用のCSSを削除してくれたり、minify化を自動で行ってくれる機能などのパフォーマンスの向上に繋がる機能が揃っています。

手動で行うにはどうしても手間がかかってしまいますし、時間効率も良くないので、このような機能が充実している点も大きなメリットです。

UIテンプレートを利用して爆速コーディング

Tailwind CSSは利用者が多いだけに、多くの情報がネット上に転がっています。

中でも無料で利用できるUIテンプレートを掲載しているサイトもあり、コードをコピペするだけでおしゃれなコンポーネントを簡単に実装することができるのでコーディングスピードが格段に上がります。

Tailwind CSSを導入する方法

それではTailwind CSSをプロジェクトに導入する方法を解説します。

前提条件

Tailwind CSSを利用するには以下の前提条件を満たしておく必要があります。

前提条件

Node.jsがインストールされている
npmがインストールされている

インストールされているかどうかは、以下のコマンドで確認ができます。

// Node.jsがインストールされているか確認
node -v
// v22.2.0

// npmがインストールされているか確認
npm -v
// 10.7.0

プロジェクトディレクトリを作成

まだプロジェクトディレクトリがない場合は以下コマンドで作成します。

// tailwind-projectフォルダを作成
mkdir tailwind-project

// tailwind-projectフォルダに移動
cd tailwind-project

みつた

既に作成しているのであればこの項はスキップでOKです！

プロジェクトの初期化

以下のコマンドでプロジェクトの初期化を行い、package.jsonを作成します。

npm init -y

コマンドを実行したらプロジェクトディレクトリ内にpackage.jsonが作成されているはずですので確認してください。

Tailwind CSS のインストール

次に、Tailwind CSS とその関連ツールをインストールします。

npm install -D tailwindcss postcss autoprefixer

Post CSSとは

CSSファイルを解析し、プラグインを介してCSSを変換するツールです。
Tailwind自体がPostCSSプラグインであり、CSSをパージ（未使用のスタイルを削除）、最適化、生成する際にPostCSSを使用しています。

Autoprefixerとは

CSSにベンダープレフィックス（-webkit-など）を自動的に追加してくれる、Post CSSのプラグインです。

設定ファイルの生成

Tailwind CSSを利用するためには専用の設定ファイルが必要になります。

必要な設定ファイル

tailwind.config.js　→　Tailwind CSS
postcss.config.js　→　Post CSS

以下のコマンドでTailwind CSSの設定ファイルを生成します。

npx tailwindcss init -p

このコマンドを実行することでtailwind.config.js と postcss.config.jsが生成されます。

tailwind.config.jsとは？

Tailwind CSS 専用の設定ファイルで、主に Tailwind のカスタマイズを行います。

postcss.config.jsとは？

PostCSS の設定ファイルで、他のPost CSSプラグインと一緒に使う場合にこのファイルに記述します。

Tailwind CSS の設定

それでは生成された、各設定ファイルを以下のように編集します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

content: ["./src/**/*.{html,js}"] は、src内すべてのhtmlおよびjsファイルを対象に処理や最適化を行う設定です。

postcss.config.jsは、ファイルが生成されたままの内容で問題ありません。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

CSS ファイルの作成

srcフォルダを作成し、その中にstyle.cssとindex.htmlを作成します。

mkdir src && cd src && touch style.css && touch index.html

みつた

本記事では、src内のファイルが開発用となります。

作成したstyle.cssにTailwind のディレクティブを追加します。

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

index.htmlには以下のように記述し、Tailwind CSSを反映させます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Project</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body class="bg-gray-100 text-center">
    <h1 class="text-4xl text-blue-500 mt-10">Hello, Tailwind CSS!</h1>
  </body>
</html>

Tailwind CSS のビルド

package.jsonのscripts内に以下のコードを追加し、ビルド実行時の処理を設定します。

"build": "npx tailwindcss build src/style.css -o dist/style.css && cp src/index.html dist/index.html"

以下コマンドでビルド実行します。

npm run build

すると、Tailwind CSSがsrc/style.cssから指定されたスタイルを読み込み、最終的なCSSがdist/style.cssに生成されます。
またsrc内のindex.htmlがdist内にコピーされます。

みつた

dist内のファイルが本番用になります。

現時点でのディレクトリ構成は以下のようになっているはずです。

├── package-lock.json
├── package.json
├── postcss.config.js
├── dist // 本番用
│   ├── index.html
│   └── style.css
├── src // 開発用
│   ├── index.html
│   └── style.css
└── tailwind.config.js

ローカルサーバーの立ち上げ

それでは実際にTailwind CSSのユーティリティクラスが反映されているか実際に確認してみましょう。

以下のコマンドを実行してローカルサーバーと立ち上げるための環境を構築します。

npm install -g http-server

npm install -g live-serverは、簡単なHTTPサーバーを立ち上げて指定されたディレクトリ内のファイルをリアルタイムでホストするツールです。

インストールが完了したら、以下のコマンドでローカルサーバーを立ち上げます。

http-server dist

よろこびくん

これだけでローカルサーバーを立ち上げることができるのは手軽でいいですね！

http-serverのあとにホストしたいディレクトリを指定します。今回はdist内のファイルが本番用のファイルとしているので、distと記述しています。

これでhttp://127.0.0.1:8080にアクセスができるようになったはずですので、テキストにスタイルが反映されているか確認してください。

minify化

とにかくコードを圧縮したい！という場合は、package.jsonのbuildに--minifyオプションを追加することで簡単にminify化させることができます。

"build": "npx tailwindcss build src/style.css -o dist/style.css --minify && cp src/index.html dist/index.html"

みつた

縮小をさらに詳細にカスタマイズしたい場合は、PostCSSのプラグインcssnanoがおすすめです。

まとめ

Tailwind CSSとは何か、Tailwind CSSの導入方法について解説しました。

Tailwind CSSをプロジェクトに導入することは個人、チーム開発関係なく大きなメリットがあり、プラグインと組み合わせることでより便利に利用することができます。

この記事を参考にぜひTailwind CSSをプロジェクト開発に活用していただけると幸いです。