TailwindCSSが機能しない(npm run buildしているが

前提・実現したいこと

TailwindCSS初学者です。
TailwindCSSが機能しない

node_moduleディレクトリがある上の階層に入り、そこで「npm run build」しています。
がうまくいきません。

原因がわからず、お伺いしました。

下記のコードを書き、TailwindCSSの練習を行なっています。

発生している問題・エラーメッセージ

HTML
1

該当のソースコード

package.json
1{
2  "name": "tutorial_shincode",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1",
8    "build": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
9  },
10  "keywords": [],
11  "author": "",
12  "license": "ISC",
13  "devDependencies": {
14    "tailwindcss": "^3.2.4"
15  }
16}
17```ディレクトリ構図
18↓src配下↓
19   [drwxr-xr-x take     staff            128]  .
20
21├── [-rw-r--r-- take     staff            596]  index.html
22└── [-rw-r--r-- take     staff             59]  input.css
23└── [-rw-r--r-- N     staff            197]  tailwind.config.js
24
25
26↓チュートリアル配下↓(全体像)
27※文字制限により、一部抜粋
28
29├── [-rw-r--r-- N     staff          48716]  package-lock.json
30├── [-rw-r--r-- N     staff            367]  package.json
31      [drwxr-xr-x take     staff            128]  src
32          ├── [-rw-r--r-- N     staff            596]  index.html
33          └── [-rw-r--r-- N     staff             59]  input.css
34└── [-rw-r--r-- N     staff            197]  tailwind.config.js
35


```HTML
<!DOCTYPE html>
<html lang="en">
<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">
  <title>TailwindCSS</title>
</head>
<body>
  <header class="bg-blue-400">
    <nav class="flex justify-between mx-auto container items-center">
      <div>code.com</div>
      <div class="space-x-12 font-bold">
        <a href="">ホーム</a>
        <a href="">ブログ</a>
        <a href="">お問合せ</a>
      </div>
    </nav>
  </header>
  
</body>
</html>

試したこと

参照したサイト
公式(環境設定時に参照)

エラー内容で調査

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答2件

ベストアンサー

掲載されているソースコードindex.htmlには、下記のlinkタグが抜けているように見受けられます。
<link href="/dist/output.css" rel="stylesheet">

以下のようにlinkタグを追加後、ブラウザで表示を確認してみては如何でしょうか？

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

投稿2022/12/10 02:48