安装TailwindCSS后检测不到工具类的问题求助

触发的警告信息 #

warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

已将Node.js升级至20.3.1版本，VSCode中也安装了TailwindCSS插件，严格按照官方文档步骤操作，但仍无法检测到工具类，上述警告反复出现。

终端操作记录 #

PS C:\Users\anura\Desktop\Tailwind CSS> npm install -D tailwindcss

added 83 packages in 9s

14 packages are looking for funding
  run `npm fund` for details
PS C:\Users\anura\Desktop\Tailwind CSS> npm fund
Tailwind CSS
├── https://github.com/sponsors/sindresorhus
│   └── @alloc/quick-lru@5.2.0
├─┬ https://paulmillr.com/funding/
│ │ └── chokidar@3.5.3
│ └── https://github.com/sponsors/jonschlinkert
│     └── picomatch@2.3.1
├─┬ https://opencollective.com/postcss/
│ │ └── postcss@8.4.24, postcss-js@4.0.1, postcss-load-config@4.0.1, postcss-nested@6.0.1
│ └── https://github.com/sponsors/ai
│     └── nanoid@3.3.6
├── https://github.com/sponsors/ljharb
│   └── resolve@1.22.2, is-core-module@2.12.1, supports-preserve-symlinks-flag@1.0.0
├── https://github.com/sponsors/feross
│   └── run-parallel@1.2.0, queue-microtask@1.2.3
└── https://github.com/sponsors/isaacs
    └── glob@7.1.6

PS C:\Users\anura\Desktop\Tailwind CSS> npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js
PS C:\Users\anura\Desktop\Tailwind CSS> npx tailwindcss -i ./src/style.css -o ./dist/style.css --watch     

Rebuilding...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

Done in 207ms.

当前tailwind.config.js配置 #

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

项目文件结构 #

问题核心在于tailwind.config.js的content路径配置错误：

1. 调整扫描路径
   Tailwind需要扫描源文件（你编写工具类的文件），而非编译输出的dist目录。当前配置指向./dist/index.html，但你的源HTML文件应该在项目根目录或src目录下。

   修改content配置为源文件路径，示例：

   • 若HTML在项目根目录：

     content: ["./index.html"],
     

   • 若HTML在src目录，同时要扫描JS文件：

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

2. 重启监听命令
   修改配置后，关闭当前的watch进程，重新执行：

   npx tailwindcss -i ./src/style.css -o ./dist/style.css --watch
   

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