Tailwind CSS をWindows11Proの環境にインストール

Tailwind CSS の公式ドキュメントのインストール方法を手元の開発環境で実行した際のメモ。今回はTailwind CSS v3.1.8 をインストールしました。

※npmを使用してインストールする想定です。予めNode.js及びnpmのインストールが必要です。

npmコマンドでインストールする
1. コマンド
2. 実行結果
npxコマンドで初期化実行
1. コマンド
2. 実行結果
パスを設定する
CSSファイルにTailwindCSSのディレクティブを追加する
ビルド
1. コマンド
2. 実行結果
ブラウザで表示テスト
動作環境情報

npmコマンドでインストールする

コマンド

npm install -D tailwindcss

実行結果

C:\Users\takuo\projects\tailtest> npm install -D tailwindcss

added 63 packages, and audited 64 packages in 4s

12 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

実行すると以下のディレクトリとファイルが生成されます。

node_modules/*
package-lock.json
package.json

npxコマンドで初期化実行

コマンド

npx tailwindcss init

実行結果

C:\Users\takuo\projects\tailtest> npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

実行すると “tailwind.config.js” が生成されます。

パスを設定する

“tailwind.config.js”を開くと以下のようになっています。

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

“content” に「”./src/**/*.{html,js}”」を追加します。

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

CSSファイルにTailwindCSSのディレクティブを追加する

“src”ディレクトリを作成しその中に “input.css” を作成します。

作成したCSSファイルに以下３行のディレクティブを追加します。

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

ビルド

コマンド

ビルドコマンドに「–watch」オプションを付加して変更を監視するようにします。変更を検知するとリビルトされビルド時と同様に “dist”ディレクトリに配置されます。

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

実行結果

C:\Users\takuo\projects\tailtest> npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Rebuilding...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
Done in 119ms.

ブラウザで表示テスト

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/dist/output.css" rel="stylesheet">
    <title>Tailwind CSS 表示テスト</title>
</head>
<body>
    
    <h1 class="text-5xl font-bol">Tailwind CSS 表示テスト</h1>
    <div class="text-red-500">
        テキストカラー表示テスト。テキストカラー表示テスト。
    </div>
</body>
</html>

動作環境情報

"Windows" 11 Pro 
"Node.js" 16.17.0 
"npm" 8.19.1 
"TailwindCSS" 3.1.8