Tailwind CSS を新規でインストールする（v3系版）

Tailwind CSS もバージョンを重ね、記事を書いている現在で version 3 までリリースされています。今回の記事では、Tailwind CSS v3 系のインストールの仕方について文章を書いていきたいと思います。

:::note warn
注意
v3系の [Tailwind CSS 公式ドキュメント](https://tailwindcss.com/docs/installation) のインストール方法に沿って記事を解説しています。バージョンの更新によりコマンドの書き方が変わることがあるので、最新のインストール方法については 公式ドキュメントをご覧ください。
:::

# あたなは、npm？CDN？どっち派？

Tailwind CSS のインストール方法として大きくわけて２種類の方法があります。npm 経由でインストールする方法、そしてもう１つは、CDN 経由でインストールする方法です。

# npm 経由でインストール

npm 経由で Tailwind CSS をインストールして CSS のビルド作業を行う場合は、`Tailwind CLI ツールを使用するケース` もしくは `Tailwind CSS を PostCSS のプラグインとして使用するケース` の２通りがあります。

## Tailwind CLI ツールを使用するケース

npm 経由で Tailwind CSS をインストールする場合は、個人的にですが、Tailwind CLI ツールを実行し CSS ファイルを出力する方法が一番簡単だと思います。以下のコマンドにそって Tailwind CSS のインストール、及び CLI ツールを使用しての CSS ビルド作業が可能です。

### 1, Tailwind CSS をインストール

```
npm install -D tailwindcss@3
npx tailwindcss init
```

上記のコマンドを入力すると `tailwind.config.js` というファイルが生成されます。

### 2, Tailwind CSS を適応するファイルパスの指定

`tailwind.config.js` を開いていみると

```js:tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

上記のようになっていると思います。ここでは、Tailwind CSS を適応するファイルへのパスを設定してあげます。そうすることで、Tailwind CSS が必要外の場所でファイルが読み込まれてしまうことを防ぎます。例えば、`tailwind.config.js` と同じ階層に `src` フォルダを作成し、その `src` フォルダ内の `html` か `js` ファイルを適応したい場合は以下のような設定とします。

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

`content: [],` の部分を編集したのが分かると思います。このような感じで、Tailwind CSS を適応するファイルパスを指定可能です。

### 3, CSS に Tailwind ディレクティブを追加

`src` フォルダの中に `input.css` を作成して、`@Tailwind ディレクティブ` を CSS ファイルに追加します。以下のような感じで書き込みます。

```css:src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### 4, Tailwind CLI を使用してビルドプロセスを実行する

以下のコマンドで CLI ツールを実行します。`tailwind.config.js` の `content` で指定したファイルをスキャンして ビルドされた CSS ファイルを出力します。

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

コマンドを見ると、だいたい予想できると思うのですが、出力される CSS のファイル名は `./dist/output.css` となっています。

### 5, HTML に 出力された CSS を読み込む

出力された CSS ファイルを HTML ファイルに読み込んで一通りの作業は完了です！今回は `src` フォルダに `index.html` を作成し、以下のようにコードを記述し保存してみてください。前回のコマンドの `--watch` オプションにより `src` フォルダ内が常に監視状態になっているため `src` フォルダ内でファイルを保存すると自動的に CSS ファイルを出力してくれます（監視を解除する際は「Ctrl + C」で解除してください）。これで Tailwind CSS を体験できます！

```html:src/index.html
<!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>
```

# CDN 経由でインストール

より簡単に Tailwind CSS を体験するには CDN 経由でのインストールがお勧めです！以下のように `script タグ` を使用して Tailwind CSS を読み込むことができます。

```diff:index.html
<!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 の公式プラグインを CDN 経由で使用する

Tailwind CSS の公式プラグインを使用することで、より多彩な表現が可能になります。プラグインを使用しない場合と CDN の書き方が少し異なりますのでご注意ください（以下のコード参照）。使い方に関しては [Tailwind CSS の公式ドキュメント](https://tailwindcss.com/docs/plugins) をご覧ください。

```diff:index.html
<!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?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
  <div class="prose">
    <!-- ... -->
  </div>
</body>
</html>
```