Tailwind CSSはParcelの組み合わせると作業しやすい

Tailwind CSSのインストール手順
Parcel＆Tailwind CSSのインストール手順
以上の手順でParcel＆Tailwind CSSが使える

Tailwind CSSのインストール手順

Tailwind CSSをTailwind CLIで導入するには以下の手順でインストールできる。

1. Tailwind CLIでインストール

mkdir -p my-tailwindcss/src
cd my-tailwindcss
touch src/index.html src/input.css
npm init -y
npm i -D tailwindcss
npx tailwindcss init

2. tailwind.config.jsにcontentを追加

tailwind.config.jsファイルのcontentに、すべてのテンプレートファイルへのパスを追加します。

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

3. CSSに@tailwindディレクティブを追加

Tailwind CSSが使えるよう@tailwindディレクティブをメインのCSSファイルに追加する。

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

4. HTMLを用意する

以下はinput.cssをoutput.cssで書き出す場合の例。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Tailwind CLIで作成したサンプル</title>
<link href="./dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
</body>
</html>

5. Tailwind CLIでCSSファイルをビルド

Tailwind CLIでCSSファイルをビルドする。

コマンドは以下のようになる。

--watchを付けているので修正するたびにinput.cssからoutput.cssが書き出される。

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

作成したHTMLとCSSをサーバーにアップロードすると下記のリンク先のような見た目になります。

Tailwind CLIで作成したサンプル

しかし、単純にTailwind CLIだけで作成すると以下の問題が発生するので個人的にはParcelを併用して利用することを推奨します。

Tailwind CLIだけで制作する問題点

Webページが自動更新されないので確認しにくい
Sass (SCSS)が別途使用できない
CSSのキャッシュがクリアされない
ビルド後のHTMLとCSSの場所が別ディレクトリになる
etc.

Parcel＆Tailwind CSSのインストール手順

1. ParcelとTailwind CSSをインストール

mkdir -p my-parcel/src
cd my-parcel
touch .postcssrc src/index.html src/index.css
npm init -y
npm i -D parcel tailwindcss postcss
npx tailwindcss init

2. .postcssrcでtailwindcssを有効化

.postcssrcファイルに以下のコードを書くことでtailwindcssが有効になります。

{
  "plugins": {
    "tailwindcss": {}
  }
}

3. tailwind.config.jsにcontentを追加

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

4. .postcssrcでtailwindcssを有効化

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

5. package.jsonにsourceとscriptsを追加する

{
  "name": "my-parcel",
  "version": "1.0.0",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel --open",
    "build": "rm -r ./dist/; parcel build"
  },
  "devDependencies": {
    "parcel": "^2.5.0",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.24"
  }
}

6. HTMLファイルを作成する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Parcel＆Tailwind CLIで作成したサンプル</title>
<link href="./index.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
</body>
</html>