Tailwind CSS もバージョンを重ね、記事を書いている現在で version 3 までリリースされています。今回の記事では、Tailwind CSS v3 系のインストールの仕方について文章を書いていきたいと思います。
注意
v3系の Tailwind CSS 公式ドキュメント のインストール方法に沿って記事を解説しています。バージョンの更新によりコマンドの書き方が変わることがあるので、最新のインストール方法については 公式ドキュメントをご覧ください。
あたなは、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
npx tailwindcss init
上記のコマンドを入力すると tailwind.config.js というファイルが生成されます。
2, Tailwind CSS を適応するファイルパスの指定
tailwind.config.js を開いていみると
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
上記のようになっていると思います。ここでは、Tailwind CSS を適応するファイルへのパスを設定してあげます。そうすることで、Tailwind CSS が必要外の場所でファイルが読み込まれてしまうことを防ぎます。例えば、tailwind.config.js と同じ階層に src フォルダを作成し、その src フォルダ内の html か 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 ファイルに追加します。以下のような感じで書き込みます。
@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 を体験できます！
<!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 を読み込むことができます。
<!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 の公式ドキュメント をご覧ください。
<!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>