Tailwind CSSをインストールするための3つの方法とチュートリアル動画紹介

Tailwind CSS 3つのインストール方法（CDNを除く）

Tailwind CSSをインストールする方法としては、CDNを除くと下記の3つ。

各種フレームワークのガイドにしたがってインストール
Post CSSのプラグインとしてインストール
Tailwind CLIを利用してインストール

しまぶーさんは1および2の方法を推奨。私が受講したUdemyの動画では3の方法が推奨されていました。

個人的には3の”Tailwind CLIを利用するインストール方法”で良いのではないかと思います。

以下、3つのインストール方法それぞれについて簡単に紹介と補足説明をしていきます。

1, 2の方法については注意点などに触れる程度で、3については詳細を解説します。

1. 各種フレームワークガイドにしたがってインストールする方法

Next.jsなど。

Installation: Framework Guides - Tailwind CSS

2. Post CSSのプラグインとして使用

Post CSSのプラグインとしてTailwind CSSを利用する方法とのこと。

Installation: Using PostCSS - Tailwind CSS

下記コマンドでpost CSSの設定ファイルを含む、設定ファイルを作ることができる。

$ npx tailwindcss init -p

npmでのビルドがうまく働かないときは、Post CSSではなく、Post CSS CLIを利用する。

$ npm uninstall postcss
$ npm i -D postcss-cli

■ Tailwind CSS Ver.3でのインストール手順

v3で色々と方法が変わっているので注意。下記動画がもっとも最新版に準拠している。

Installation: Using PostCSS - Tailwind CSS

公式ステップ3の”Configure your template paths”で、テンプレートファイルを指定していなかったところが詰まったポイント。

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

contentのテンプレートファイルのところには、*.html のように、HTMLファイルすべてを指定するとよい。

また、変更を即時反映させたい場合には開発時にビルドをかけておく。

■ Node.jsのインストールとアップデート

Node.js のバージョンアップ手順【Mac】 | たろのプログラミング日記

3. Tailwind CLIを用いてインストール

受講したUdemyの講座ではTailwind CLIの利用を推奨されていました。私はこちらの方法でインストールしています。

Tailwind CSS From Scratch | Learn By Building Projects | Udemy

www.udemy.com

基本的にはTailwind CSS公式Docsにしたがいます。

Installation: Tailwind CLI - Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

tailwindcss.com

Installation: Tailwind CLI - Tailwind CSS

公式Docsにはありませんが、最初にターミナルから下記を実行しましょう。

■ package.jsonを生成

インストールしたパッケージの情報などを書き出したpackage.jsonが自動生成されます。

$ npm init -y
// # npm = Node Package Manager

package.jsonを自動生成

あとは公式Docsの通りに実行。

$ npm install -D tailwindcss
or
$ npm i -D tailwindcss

-Dはdev Dependenciesの意味。

■ tailwind.config.js（Tailwind設定ファイル）を生成。

// # tailwind.config.jsを生成
$ npx tailwindcss init

tailwindクラスをもつJavaScriptファイルを監視する先のパスを設定します。

Add the paths to all of your template files in your tailwind.config.js file.

公式Docsでは下記。

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

tailwind.config.js

srcフォルダを作成しない場合、たとえば下記のようにプロジェクトディレクトリ直下（ルート直下）のhtmlおよびjsを監視するようにします。

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

tailwind.config.js

■ input.cssを手動作成し、Tailwindディレクティブを記述します。

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

input.css

■ Tailwind CLIビルドプロセスを開始

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

公式Docsより

各オプションの意味:

-i: インプット先パス
-o: アウトプットする先のパス
—watch: インプット先の変更を監視し、変更があれば随時アウトプットする

起動する際、上記コマンドを毎回打ってもよいですが、package.jsonにnpmスクリプトを作成しておくことで任意のスクリプト名から実行できます。

// buildスクリプトとwatchスクリプトを作成。
// -i, -oの指定パスは、変更したい場合には任意のパスを指定
"scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css",
    "watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  },

package.json

作成したbuildスクリプトを実行して、ビルドプロセスを実行。（1回きり）

$ npm run build

TailwindによってビルドされたCSSがアウトプット先の ./dist/output.css として書き出されます。

■ htmlファイルを作成して確認（任意）

下記のようなテストhtmlを作成して確認。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <!-- アウトプット先のパスをCSS参照先に指定 -->
    <link rel="stylesheet" href="css/style.css" />
    <title>Simple Tailwind Starter</title>
  </head>
  <body>
		<!-- Tailwindクラスを指定して確認 -->
    <h1 class="text-3xl bg-red-100">Simple Tailwind Starter</h1>
  </body>
</html>

index.html

package.jsonに作成したnpmスクリプトであるwatchスクリプトを実行して、監視ビルドプロセスを立ち上げます。

$ npm run watch

別のterminalタブでlive-serverを立ち上げます。適宜Tailwindクラスを変更してブラウザから確認。

$ live-server

またはVS Code Extensionのlive-serverでもOK。

Live Server - Visual Studio Marketplace

Live Server loves 💘 your multi-root workspace Live Server for server side pages like PHP. Check Here Launch a local development server with live reload feature for static & dynamic pages. [NOTE: In case if you don't have any .html or .htm file in your workspace then you have to follow method no 4 & 5 to start server.]