Parcel で Tailwind CSS をインストール

Parcel プロジェクトでの Tailwind CSS のセットアップ。

プロジェクトの作成

まだプロジェクトをセットアップしていない場合は、新しい Parcel プロジェクトを作成することから始めます。最も一般的なアプローチは、Parcel を開発依存関係としてプロジェクトに追加することです。詳細については、こちらの入門ガイド.

ターミナル

mkdir my-project
cd my-project
npm init -y
npm install parcel
mkdir src
touch src/index.html

Tailwind CSS のインストール

@tailwindcss/postcss とそのピア依存関係を npm 経由でインストールします。

ターミナル

npm install tailwindcss @tailwindcss/postcss

PostCSS の設定

プロジェクトルートに .postcssrc ファイルを作成し、@tailwindcss/postcss を有効にしますプラグイン。

.postcssrc

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Tailwind CSS のインポート

./src/index.css ファイルを作成し、Tailwind CSS の @import を追加します。

index.css

@import "tailwindcss";

ビルドプロセスの開始

npx parcel src/index.html でビルドプロセスを実行します。

ターミナル

npx parcel src/index.html

プロジェクトで Tailwind を使い始める

CSS ファイルを <head> に追加し、Tailwind のユーティリティクラスを使ってコンテンツのスタイルを設定し始めます。

index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./index.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>