2025-05-09
CSSTailwind CSS

【初心者向けに画像付きで丁寧に解説】ゼロからnpmプロジェクトにTailwind CSSを導入する方法

Featured image of the post

はじめに

ゼロから素のnpmプロジェクトにTailwind CSSを導入する方法を解説する😊

（基本は公式ドキュメントの手順どおりでOKだが、少し詰まるポイントがあったので、この記事ではより丁寧に手順を解説する。）

💡
Tailwind CSS v4時点の情報です。

ゴール

最小限のHTML、CSSでTailwind CSSを使える環境を構築する。

（ViteやReactやNext.jsは使わない）

手順

【手順1】プロジェクトを作成

✅まず新規のnpmプロジェクトを作成する。

  1. 任意の場所に空のフォルダを作成する。

    （例：C:\dev\TailwindSample）

  2. VSCodeで上記のフォルダを開く。
    Image in a image block

  3. VSCodeでターミナルを開き（ctrl + J）、npmプロジェクトを初期化する。
    npm init -y

    Image in a image block

【手順2】Tailwind CSSをインストール

✅コマンド1つでインストールできる。

npm install tailwindcss @tailwindcss/postcss postcss

Image in a image block

【手順3】設定ファイルを作成

✅Tailwind CSSを使うために必要な設定ファイルを作成する。

  1. 手動で空のpostcss.config.mjsファイルを作成する。
    Image in a image block

  2. postcss.config.mjsファイルに設定を記載。

    （コピペでOK）

    export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

【手順4】CSSファイルを作成

✅Tailwind CSSを読み込むためのCSSファイルを作成する。

  1. 空のstyles.css（任意のファイル名）を作成する。
    Image in a image block

  2. styles.cssにTailwind CSSを読み込ませる。

    （コピペでOK）

    @import "tailwindcss";

    Image in a image block

【手順5】HTMLファイルを作成

✅テスト用のHTMLファイルを作成する。

  1. 空のindex.html（任意のファイル名）を作成する。
    Image in a image block

  2. index.htmlにサンプルコードを書く。

    （コピペでOK）

    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- ✅CSSを読み込む（まだこのファイルは存在しない。後で作成する。） -->
    <link rel="stylesheet" href="./dist/styles.css">
</head>
<body>
    <!-- ✅Tailwind CSSを使ったサンプルコード -->
    <h1 class="text-3xl font-bold underline text-red-500">Hello world!</h1>
</body>
</html>

【手順6】ビルドする

✅CSSファイル（styles.css）をビルドして、実際に使用するCSSファイル（dist/styles.css）を生成する。

  1. package.jsonにビルドコマンドを追記する。

    package.json

    {
  "scripts": {
    "build": "postcss styles.css -o dist/styles.css"
  },
}

    →style.cssをビルドして、dist/styles.cssに出力するコマンド。

    Image in a image block

  2. ビルドに必要なパッケージをインストール。
    npm i -D postcss-cli

    Image in a image block

  3. ビルドを実行
    npm run build

    Image in a image block

    dist/styles.cssが出力されていれば成功！

    Image in a image block

⚠️
【注意】

HTMLを書き換えたら再度ビルドが必要。

理由：CSSファイルには必要最小限のTailwind CSSのクラスのみ記載されているため。今回の場合はtext-3xl font-bold underline text-red-500などのクラスが記載されている。

【手順7】表示を確認

✅きちんとTailwind CSSのクラスが効いているか確認する。

  1. 先ほど作ったHTMLファイル（C:\dev\TailwindSample\index.html）をブラウザで開く。
    Image in a image block

  2. スタイルが適用されていれば成功！
    Image in a image block

まとめ

手順は7つあるが、ややこしい作業はなく簡単にTailwind CSSが使えるようになった！

画像付きで手順をまとめたのでこのとおりやれば環境構築できるはず✨

Tailwind CSSの細かい使い方は需要があれば別途まとめます🌱

参考サイト