为什么部分Tailwind CSS类生效其余类不生效？附相关配置

问题现象 #

按照Tailwind安装流程完成操作、关联所有相关文件后，仅部分Tailwind样式生效：

• 页面字体被Tailwind默认样式重置
• header元素的bg-slate-400背景色可正常渲染
• 给任意元素添加flex、字重类等其他Tailwind类名时，完全无样式效果
• 编写Tailwind指令的input.css文件中，所有@tailwind前缀的代码均标红下划线，疑似故障根源

相关代码片段 #

index.html 核心代码 #

<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">
    <link href="./assets/css/dist/output.css" rel="stylesheet">
    <link href="./assets/css/src/input.css" rel="stylesheet">
    <title>Room-3</title>
</head>
<body>
    <!-- Class "flex" isnt working -->
    <header class=" flex bg-slate-400">
        <h1>Room-3</h1>
        <p id="what-we-do">What We Do</p>
        <button>Get Started</button>
    </header>
    <script src="./tailwind.config.js"></script>
</body>

tailwind.config.js 配置代码 #

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

input.css 源文件代码 #

备注：文件中每一处@tailwind都标红显示下划线，怀疑问题与该文件有关

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

修复方案 #

按以下顺序调整即可解决问题：

1. 修正Tailwind配置的扫描路径
   当前tailwind.config.js中content配置值为["./"]，没有明确指定需要扫描类名的文件规则，Tailwind构建时无法识别到HTML中书写的flex等类名，不会生成对应样式。将content字段修改为：

content: ["./**/*.{html,js}"],

确保构建流程会扫描根目录下所有html、js后缀文件中出现的Tailwind类名。

2. 移除未编译的input.css引入
   head标签中同时引入了编译产物output.css和源文件input.css，@tailwind是Tailwind构建工具识别的专属指令，浏览器本身无法解析该语法，这也是input.css中指令标红的直接原因。直接删除head中引入./assets/css/src/input.css的link标签，仅保留编译后output.css的引入即可。

3. 移除页面中对tailwind.config.js的引入
   tailwind.config.js是供Tailwind构建工具读取的本地配置文件，不需要通过script标签在前端页面加载，直接删除body中引入该文件的script标签。

4. 重新执行Tailwind构建命令生成新的output.css文件，强制刷新浏览器缓存后即可看到所有Tailwind类名正常生效。

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