Tailwind CSS の準備をしよう

さて、いよいよ Tailwind CSS を使う準備をしていきましょう。この章では、Tailwind CSS を使うために必要な環境を整え、実際に Tailwind CSS を使って簡単なスタイルを適用するまでの手順を、ステップバイステップで解説していきます。

1. 必要なもの（エディタ、Node.js、npm）

まず、Tailwind CSS を使うために必要なものを確認しておきましょう。

コードエディタ: HTML や CSS を書くためのエディタが必要です。おすすめは Visual Studio Code (VS Code) です。無料で高機能、かつ Tailwind CSS との相性も抜群です。もちろん、使い慣れたエディタがあればそれでも構いません。
Node.js: Tailwind CSS は Node.js という JavaScript の実行環境上で動作します。Node.js をインストールすると、一緒に npm (Node Package Manager) もインストールされます。npm は、Tailwind CSS などのパッケージを管理するためのツールです。
ターミナル/コマンドプロンプト: コマンドを使って、Tailwind CSS のインストールや設定を行います。Windows の場合はコマンドプロンプトや PowerShell、macOS や Linux の場合はターミナルを使います。

Node.js のインストール方法

Node.js の公式サイト（https://nodejs.org/）にアクセスします。
「LTS」（長期サポート版）と書かれた緑色のボタンをクリックして、インストーラーをダウンロードします。
ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールします。
インストールが完了したら、ターミナル/コマンドプロンプトを開き、node -v と npm -v というコマンドを実行して、それぞれバージョン番号が表示されることを確認します。

2. プロジェクトを作成しよう

次に、Tailwind CSS を使うためのプロジェクトを作成しましょう。ここでは、シンプルな HTML ファイルを一つだけ作成します。

任意の場所に新しいフォルダーを作成します。例えば、デスクトップに tailwind-practice という名前のフォルダーを作成します。
作成したフォルダーを VS Code で開きます。
VS Code のメニューから「ファイル」>「新規ファイル」を選択し、index.html という名前でファイルを保存します。
index.html に以下のような基本的な HTML を記述します。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Practice</title>
</head>
<body>
    <h1>Tailwind CSS の練習</h1>
</body>
</html>

3. Tailwind CSS をインストールしよう

それでは、いよいよ Tailwind CSS をインストールしましょう！

VS Code のメニューから「表示」>「ターミナル」を選択して、ターミナルを開きます。
ターミナルで、先ほど作成したプロジェクトのフォルダー（例：tailwind-practice）に移動します。
以下のコマンドを実行して、Tailwind CSS をインストールします。

bash

npm install -D tailwindcss

npm install は、パッケージをインストールするためのコマンドです。-D オプションは、開発時にのみ必要なパッケージとしてインストールすることを意味します。

インストールが完了すると、package.json と package-lock.json というファイルと node_modules というフォルダーが作成されます。

次に、Tailwind CSS の設定ファイルを作成するために、以下のコマンドを実行します。

bash

npx tailwindcss init

このコマンドを実行すると、tailwind.config.js というファイルが作成されます。

4. 設定ファイル（`tailwind.config.js`）って何？

tailwind.config.js は、Tailwind CSS の設定をカスタマイズするためのファイルです。このファイルを使って、色、フォント、余白などのデフォルト値を変更したり、独自のユーティリティクラスを追加したりすることができます。

最初は、tailwind.config.js の中身は以下のようになっています。

javascript

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

重要なのは content の部分です。ここに、Tailwind CSS を適用するファイルを指定します。今回は、index.html だけなので、"./*.html" となっています。

5. 動作確認！簡単な HTML を書いてみよう

それでは、Tailwind CSS が正しくインストールされているか確認してみましょう！

まず、CSS ファイルを作成します。

プロジェクトフォルダーに src という名前のフォルダーを作成します。
src フォルダーの中に、input.css という名前のファイルを作成します。
input.css に以下の内容を記述します。

css

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

これは、Tailwind CSS の基本的なスタイルを読み込むための記述です。

次に、package.json を編集して、Tailwind CSS のビルドコマンドを追加します。

package.json を開き、scripts の部分を以下のように変更します。

json

"scripts": {
  "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
},

これは npm run build というコマンドで、input.css をもとに output.css を生成するようにするためのものです。 --watch オプションをつけることで、ファイルの変更を監視し、自動的に再ビルドするようにします。

最後に、index.html を編集して、生成された CSS ファイルを読み込み、Tailwind CSS のクラスを適用してみましょう。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Practice</title>
    <link rel="stylesheet" href="./dist/output.css">
</head>
<body>
    <h1 class="text-3xl font-bold underline">Tailwind CSS の練習</h1>
</body>
</html>

link タグで output.css を読み込み、h1 タグに text-3xl font-bold underline という Tailwind CSS のクラスを追加しました。

ここで、ターミナルで以下のコマンドを実行します。

bash

npm run build

このコマンドを実行すると、dist フォルダーが作成され、その中に output.css が生成されます。

index.html をブラウザで開いてみましょう。h1 タグのテキストが大きくなり、太字になり、下線が引かれていれば、Tailwind CSS が正しく動作しています！

また、npm run build を実行したターミナルは閉じずに、そのままにしておいてください。--watch オプションのおかげで、index.html や input.css を変更するたびに、自動的に output.css が更新されます。

これで、Tailwind CSS を使う準備が整いました！