Tailwind CSS をインストールする

heroImage

1. はじめに

Tailwind CSS は，FLOSS で開発されているユーティリティ指向の CSS フレームワークです。Bootstrap や UIkit などのコンポーネント指向の CSS フレームワークと比較すると知名度は高くないですが，新しいパラダイムの CSS フレームワークとして注目され初めています。

本記事は，Tailwind CSS の公式ドキュメントに記載されている 3 つのインストール方法について詳しく解説しています。また，Tailwind CSS のカスタマイズ方法や最適化の方法についても記述しています。

本記事内で行っている作業は以下の環境下で実行したものです。npm や npx はインストール済みの前提で記述しており，インストール手順は割愛していることをご了承ください。

2. インストール

Tailwind CSS の公式ドキュメントでは，Tailwind CSS をインストールする方法として，3 つのパターンが記載されています。1 つ目が，PostCSS Plugin として Tailwind CSS をインストールする方法。2 つ目が，Tailwind CLI を用いて Tailwind CSS をインストールする方法。3 つ目が，CDN 経由で Tailwind CSS をインストールする方法です。

2.1. PostCSS Plugin

PostCSS Plugin として Tailwind CSS をインストールする方法が最もスタンダードであり，公式ドキュメントでも推奨されています。まずは，初期化処理で package.json を生成した後，動作に必要な 3 つのパッケージ (tailwindcss，postcss，autoprefixer) をインストールします。次に，PostCSS の設定ファイルである postcss.config.js と Tailwind CSS の設定ファイルである tailwind.config.js，動作確認用の index.html を生成します。

Terminal window
1
$ npm init -y
2
$ npm install tailwindcss@latest postcss@latest autoprefixer@latest
3
$ touch postcss.config.js
4
$ npx tailwindcss init
5
$ touch index.html
6
$ ls
7
index.html    package-lock.json  postcss.config.js
8
node_modules  package.json       tailwind.config.js

上記で生成した package.json と postcss.config.js，index.html を，それぞれ以下のように書き換えます。

1
{
2
  "scripts": {
3
    "start": "tailwindcss build -o tailwind.css"
4
  },
5
  "dependencies": {
6
    "autoprefixer": "^10.1.0",
7
    "postcss": "^8.2.1",
8
    "tailwindcss": "^2.0.2"
9
  }
10
}
postcss.config.js
1
module.exports = {
2
  plugins: {
3
    tailwindcss: {},
4
    autoprefixer: {},
5
  },
6
}
1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Document</title>
7
    <link href="tailwind.css" rel="stylesheet" />
8
  </head>
9


10
  <body class="bg-black text-white">
11
    Hello world
12
  </body>
13
</html>

最後に，ビルド処理を行い，tailwind.css を出力します。index.html を任意の Web ブラウザで開き，黒背景に白文字が表示されれば，正常に Tailwind CSS がインストールされています。

Terminal window
1
$ npm start
2


3
> tailwindcss build -o tailwind.css
4


5
   tailwindcss 2.0.2
6


7
   🚀 Building from default CSS... (No input file provided)
8


9
   ✅ Finished in 2.3 s
10
   📦 Size: 3.74MB
11
   💾 Saved to tailwind.css
12


13
$ ls
14
index.html    package-lock.json  postcss.config.js   tailwind.css
15
node_modules  package.json       tailwind.config.js

2.2. Tailwind CLI

PostCSS Plugin として Tailwind CSS をインストールする方法の他に，Tailwind CLI を用いて Tailwind CSS をインストールする方法があります。PostCSS Plugin として Tailwind CSS をインストールする方法とは異なり，Autoprefixer 以外の PostCSS Plugin と組み合わせることが出来ませんが，依存関係のパッケージをインストールすることなく Tailwind CSS を出力することが出来ます。そのため，Autoprefixer 以外の PostCSS Plugin を使用する予定が無い場合は，このインストール方法がオススメです。

インストール手順は非常に簡単です。まず初めに，2.1 節で生成した動作確認用の index.html を任意のディレクトリに保存します。次に，Tailwind CSS の設定ファイルである tailwind.config.js を生成します。次に，ビルド処理を行い，tailwind.css を出力します。最後に，任意の Web ブラウザで index.html を開き，黒背景に白文字が表示されれば，正常に Tailwind CSS がインストールされています。

Terminal window
1
$ ls
2
index.html
3
$ npx tailwindcss-cli@latest init
4


5
   tailwindcss 2.0.2
6


7
   ✅ Created Tailwind config file: tailwind.config.js
8


9
$ npx tailwindcss-cli@latest build -o tailwind.css
10


11
> tailwindcss build -o tailwind.css
12


13
   tailwindcss 2.0.2
14


15
   🚀 Building from default CSS... (No input file provided)
16


17
   ✅ Finished in 2.3 s
18
   📦 Size: 3.74MB
19
   💾 Saved to tailwind.css
20


21
$ ls
22
index.html  tailwind.config.js  tailwind.css

2.3. CDN

Bootstrap や UIkit などの CSS フレームワークと同じく，Tailwind CSS も CDN 経由で配布されています。しかし，カスタマイズや最適化が行えないなどの理由から，公式ドキュメントでは非推奨のインストール方法となっています。そのため，Tailwind CSS の学習やモックアップの作成など，カスタマイズや最適化などを行う必要がない場合にのみ採用する，限定的なインストール方法になります。インストール方法は最も簡単で，ビルド済みの tailwind.min.css を読み込むだけです。

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Document</title>
7
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
8
  </head>
9


10
  <body class="bg-black text-white">
11
    Hello world
12
  </body>
13
</html>

3. カスタム CSS

2 章で記述したインストール方法では，Tailwind CSS が公開しているデフォルトの CSS をベースに tailwind.css が出力されていました。Tailwind CSS では，ベースとなる CSS をユーザーがカスタマイズ出来る機能が提供されています。

btn クラスを追加する手順とサンプルコードを以下に示します。これ以外にも様々なカスタマイズを行うことが出来ますが，本記事の範囲を超えるため割愛します。詳しく知りたい人は，基本スタイルの追加やコンポーネントの抽出，新しいユーティリティの追加などのドキュメントを参照して下さい。

Terminal window
1
$ mkdir src dist
2
$ touch ./src/tailwind.css
3
$ tree
4
.
5
├── dist
6
└── src
7
    └── tailwind.css
8


9
2 directories, 1 file
./src/tailwind.css
1
@tailwind base;
2
@tailwind components;
3


4
.btn {
5
  @apply rounded bg-blue-600 px-4 py-2 text-white;
6
}
7


8
@tailwind utilities;
Terminal window
1
$ npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css
2


3
   tailwindcss 2.0.2
4


5
   🚀 Building: src/tailwind.css
6


7
   ✅ Finished in 2.26 s
8
   📦 Size: 3.74MB
9
   💾 Saved to dist/tailwind.css
10


11
$ tree
12
.
13
├── dist
14
│   └── tailwind.css
15
└── src
16
    └── tailwind.css
17


18
2 directories, 2 files

4. 最適化

上記で出力された tailwind.css のサイズを確認すると 3.74MB という膨大なサイズになっていることがわかります。そのため，Tailwind CSS を本番環境にデプロイする場合，必ず最適化処理を行う必要があります。

幸いなことに，最適化処理機能は Tailwind CSS に含まれているため，プラグインなどで拡張する必要はありません。手順も非常に簡単であり，tailwind.config.js の purge に，Tailwind CSS のクラス名を使用しているファイルを指定するだけです。

2.2 節で構築した環境を例に，最適化処理の手順を以下に示します。tailwind.config.js の purge に，Tailwind CSS のクラス名を使用している index.html のパスを追加します。以下の例では，正規表現を用いてパスを指定しています。

tailwind.config.js
1
module.exports = {
2
  purge: ['*.html'],
3
  darkMode: false, // or 'media' or 'class'
4
  theme: {
5
    extend: {},
6
  },
7
  variants: {
8
    extend: {},
9
  },
10
  plugins: [],
11
}

最適化処理を行う際は，NODE_ENV に production を設定してビルドする必要があります。以下に，最適化処理を行っていない場合と行った場合のビルド結果を，それぞれ示します。出力された tailwind.css のファイルサイズを比較すると，3.74MB → 10.67KB と，大幅にサイズが削減されていることが確認できます。

Terminal window
1
$ ls
2
index.html  tailwind.config.js  tailwind.css
3
$ npx tailwindcss-cli@latest build -o tailwind.css
4


5
   tailwindcss 2.0.2
6


7
   🚀 Building from default CSS... (No input file provided)
8


9
   ✅ Finished in 2.28 s
10
   📦 Size: 3.74MB
11
   💾 Saved to tailwind.css
12


13
$ NODE_ENV=production npx tailwindcss-cli@latest build -o tailwind.css
14


15
   tailwindcss 2.0.2
16


17
   🚀 Building from default CSS... (No input file provided)
18


19
   ✅ Finished in 1.94 s
20
   📦 Size: 10.67KB
21
   💾 Saved to tailwind.css

5. おわりに

ここまで，Tailwind CSS の公式ドキュメントに記載されている 3 つのインストール方法について詳しく解説してきました。また，Tailwind CSS のカスタマイズ方法や最適化の方法についても記述してきました。Tailwind CSS の公式ドキュメントでは，React や Vue などの有名な JavaScript フレームワークに Tailwind CSS をインストールする方法が詳しく記述されているので，本記事と合わせて活用して下さい。