通过npm安装Tailwind CSS后工具类无法生效的问题求助

我通过npm安装了Tailwind CSS，执行构建命令后成功生成了output.css文件，但测试时发现页面中的Tailwind工具类完全没有生效。

相关配置与代码 #

package.json中的scripts配置 #

"scripts": {
  "build:css": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
  "test": "echo \"Error: no test specified\" && exit 1",
  "devserver": "live-server public",
  "start": "npm-run-all --parallel build:css devserver"
}

目录结构 #

项目根目录/
├── src/
│   └── input.css
├── public/
│   └── index.html
├── dist/
│   └── output.css
├── tailwind.config.js
└── package.json

src/input.css内容 #

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

tailwind.config.js内容 #

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

public/index.html内容 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/output.css">
</head>
<body>
    <button class="bg-sky-500 hover:bg-sky-700 text-white font-bold py-2 px-4 rounded">Save changes</button>
</body>
</html>

问题表现 #

浏览器中显示的按钮仅为默认原生样式，没有应用Tailwind定义的背景色、圆角、字体加粗等效果。

问题分析与解决方案 #

核心问题：CSS文件路径错误 #

启动live-server public后，服务器的根目录是public文件夹。此时index.html中用../dist/output.css引用CSS文件，会指向服务器根目录之外的位置，浏览器无法加载到正确的样式文件，导致工具类不生效。

修复步骤 #

1. 调整CSS输出路径：修改package.json中的build:css命令，将编译后的CSS文件输出到public目录下：

"build:css": "npx tailwindcss -i ./src/input.css -o ./public/output.css --watch"

2. 更新HTML中的CSS引用：将路径改为服务器根目录下的相对路径：

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

3. 重启开发服务：停止当前运行的npm start，重新执行命令，确保新的CSS文件被正确生成并加载。

额外验证点 #

• 确认tailwind.config.js的content配置正确：当前"./public/*.html"能正确扫描到HTML中的工具类，无需修改。
• 检查构建命令运行状态：执行npm run build:css后，查看public/output.css文件，确认其中包含Tailwind生成的工具类样式，且控制台无报错。

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