VS Code中Tailwind CSS类样式不生效问题求助

我正尝试在项目中使用Tailwind CSS，但Tailwind类未按预期应用样式。使用内联style属性设置样式时完全正常，但像bg-red-600这类Tailwind工具类无法生效。

最简配置示例 #

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="bg-red-600">
  <center><h1>Hello world!</h1></center>
</body>
</html>

tailwind.config.js配置 #

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

文件路径结构 #

已完成的排查步骤 #

• Tailwind安装：已在项目中完成Tailwind CSS的安装与引入。
• CSS文件配置：input.css文件已包含完整的Tailwind指令：

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

• 编译流程：使用npx tailwindcss -o output.css命令完成CSS编译。
• 文件路径验证：HTML中link标签指向的output.css路径正确。
• 浏览器缓存清理：已清除浏览器缓存并尝试强制刷新页面。

尽管完成以上所有步骤，bg-red-600类仍无法为页面添加红色背景，但使用style="background-color: red;"这类内联样式时可正常生效，恳请各位提供解决思路！

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