Zenn
💨

【超初心者】Tailwind CSSインストール

2024/09/07に公開
Tailwind CSS
tech

はじめに

この記事では、Tailwind CSSのインストール手順について、超初歩のステップの備忘録です。JavaScriptのプロジェクトに効率的にTailwind CSSを導入したいと考えているフロントエンド開発者向けの内容です。具体的には、npmを使ったインストールから設定ファイルの作成、基本的なスタイルの適用方法までをカバーしています。

公式link
Installation

1) npmを使用してtailwindcssをインストールし、tailwind.config.jsファイルを作成します。

Tailwind CSSをプロジェクトにインストールするためには、npm（Node Package Manager）というツールを使用します。npmは、JavaScriptパッケージを管理・インストールするためのツールです。npm installというコマンドでTailwind CSSをプロジェクトにインストールし、-Dオプションを使うことで、開発環境用の依存関係としてインストールします。

tailwind.config.jsというファイルは、Tailwind CSSの設定ファイルです。ここで使用するカスタムスタイルや、スキャンするファイルの場所を設定します。npx tailwindcss initコマンドを実行することで、この設定ファイルを自動的に作成できます。

npm install -D tailwindcss
npx tailwindcss init

コマンドの説明:

  • npm install -D tailwindcss: Tailwind CSSをプロジェクトにインストールします。-Dは「開発用の依存関係」としてインストールすることを意味します。
  • npx tailwindcss init: Tailwindの設定ファイル tailwind.config.jsを作成します。このファイルで、どのテンプレートファイルをスキャンするかなどの設定を行います。

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

次に、Tailwind CSSがスタイルを適用するファイル（HTMLやJavaScriptファイル）のパスを指定する必要があります。これを行うことで、Tailwindはどのファイルをチェックしてスタイルを適用するかを知ることができます。たとえば、./src/**/*.{html,js}という指定は、srcフォルダ内のすべてのHTMLおよびJavaScriptファイルを対象にすることを意味します。

tailwind.config.js

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

contentオプションの意味:

  • "./src//*.{html,js}"：srcフォルダ内にあるすべてのHTMLファイルとJavaScriptファイルを対象にします。*は「すべてのファイル」を指し、/*は「すべてのサブフォルダ内のすべてのファイル」も含めるという意味です。

3) Tailwindの各レイヤー用に、@tailwindディレクティブをメインのCSSファイルに追加します。

次に、Tailwind CSSの基本スタイルやユーティリティクラスを使用できるように、CSSファイルにTailwindのディレクティブを追加します。ディレクティブとは、特定の命令を意味し、@tailwind base;などをCSSファイルに記述することで、Tailwindの基本的なスタイル（base）、コンポーネント（components）、そしてユーティリティクラス（utilities）をインポートします。

src/input.css

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

ディレクティブの役割:

  • @tailwind base;：すべての要素に標準のリセットスタイルを適用します。これは、各ブラウザによるデフォルトのスタイルの違いを均一にする役割があります。
  • @tailwind components;：再利用可能なコンポーネント用のスタイル（ボタンやカードなど）を適用します。
  • @tailwind utilities;：Tailwind CSSのユーティリティクラス（text-centerやbg-blue-500など）を適用します。

4) CLIツールを実行してテンプレートファイル内のクラスをスキャンし、CSSをビルドします。

次に、CLIツールを使って、テンプレートファイル（HTMLやJavaScriptファイル）内で使用されているTailwindのクラスをスキャンし、必要なスタイルをoutput.cssというファイルにビルドします。--watchオプションを付けると、ファイルが変更されるたびに自動的に再ビルドされるようになります。

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

コマンドの説明:

  • -i ./src/input.css：input.cssファイルを入力として読み込みます。
  • -o ./src/output.css：output.cssという名前で生成されたCSSファイルを出力します。
  • --watch：ファイルの変更を監視し、変更があった際に自動的に再ビルドします。

5) コンパイルされたCSSファイルを<head>に追加し、Tailwindのユーティリティクラスを使ってコンテンツをスタイルします。

生成されたoutput.cssをHTMLファイルにリンクし、Tailwindのユーティリティクラスを使ってスタイルを適用します。たとえば、text-3xlは大きなテキストを表示し、font-boldは太字にし、underlineはテキストに下線を引くためのクラスです。

src/index.html

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

クラスの説明:

  • text-3xl: テキストのサイズを3倍にします。
  • font-bold: テキストを太字にします。
  • underline: テキストに下線を引きます。

以上！

Discussion