本地Tailwind CSS项目样式失效求助：无颜色与布局效果

我正尝试本地搭建一个简单的Tailwind CSS项目，在Tailwind Playground中或使用以下CDN脚本时，页面显示完全正常：

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

但移除该脚本标签，改为引入本地编译的Tailwind文件：

<link href="./output.css" rel="stylesheet">

后，所有样式全部丢失——页面显示为Times New Roman字体，无颜色及Tailwind类样式效果。

项目结构与配置文件 #

📁 project/
├── 📦 package.json
├── ⚙️ tailwind.config.js
├── 📄 index.html
├── 📄 styles.css
├── 📄 output.css
├── 📂 img/
│   └── 🖼️ hfu_logo.svg

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 class="min-h-screen flex flex-col">
  <header class="w-full flex justify-between items-center p-4 bg-gray-200">
    <div class="text-4xl text-left">
      <span class="font-bold">Info</span><span class="font-thin">Kiosk</span>
    </div>
    <img class="w-1/10" src="./img/hfu_logo.svg" alt="HFU_Logo" >
  </header>

  <main class="flex-grow grid grid-cols-4 grid-rows-2 gap-10 p-4">
    <div class="col-span-2 row-span-1 bg-green-700 p-4 text-white text-center rounded-lg">C1</div>
    <div class="col-span-1 row-span-1 bg-green-700 p-4 text-white text-center rounded-lg">C2</div>
    <div class="col-span-1 row-span-1 bg-green-700 p-4 text-white text-center rounded-lg">C3</div>
    <div class="col-span-1 row-span-1 bg-green-700 p-4 text-white text-center rounded-lg">C1</div>
    <div class="col-span-1 row-span-1 bg-green-700 p-4 text-white text-center rounded-lg">C2</div>
    <div class="col-span-2 row-span-1 bg-green-700 p-4 text-white text-center rounded-lg">C3</div>
  </main>

  <footer class="w-full p-4 bg-gray-200 text-center">
    Kleiner Text Mittig
  </footer>
</body>
</html>

styles.css #

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

tailwind.config.js #

module.exports = {
  content: ["./**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

package.json #

{
  "name": "infoterminal",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tailwindcss -i ./styles.css -o ./output.css --watch"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.0.7"
  }
}

执行的命令 #

npm install
npm run build

随后通过VSCode的Live Server打开页面，但始终无法正常显示样式。我已找到类似问题的解决方案，但对我无效。

我已按照官方文档搭建本地Tailwind CSS项目：

• 执行了npm install，创建了包含@tailwind指令的styles.css
• 配置tailwind.config.js以包含所有.html和.js文件

执行npm run build后，我期望本地的output.css能包含所有必要的Tailwind类，使页面显示效果与Playground一致。但打开index.html时，所有Tailwind样式均丢失——页面显示为Times New Roman字体，无背景颜色及其他样式。

内容的提问来源于stack exchange，提问作者Aphrodite