Tailwind CSS样式未生效求助：已按教程操作仍无效

1. 移除多余的CSS文件引用 #

你的HTML同时引入了编译产物dist/output.css和源文件src/input.css，这是错误的——src/input.css是用来编译的入口文件，不需要直接在页面里引用，只保留编译后的产物引用即可。

修正后的HTML代码：

<!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>
  <div class="text-red-400 bg-slate-300 text-xl">
    Hello world!
  </div>
  <div class="bg-slate-600">
    Testing
  </div>
</body>
</html>

2. 修正Tailwind配置的content路径 #

你的tailwind.config.js存在两处路径错误：

• 不应将dist/output.css加入content数组——content是用来扫描HTML/JS文件提取Tailwind类名的，CSS文件不属于此类范围；
• 你的index.html在根目录，但配置里写的./main/index.html路径错误，需改为./index.html。

修正后的配置文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{html,js}" // 若src目录下无HTML/JS文件，可直接删除这一行
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 重新执行编译命令 #

从你的output.css截图看，文件内容未正确生成，需重新执行编译命令：

• 开发环境（自动监听文件变化）：

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

• 生产环境（压缩代码）：

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

执行命令后，检查dist/output.css是否生成了完整的Tailwind样式代码，刷新页面即可看到效果。

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