Tailwind CSS无效果求助：编译后提示未检测到工具类

1. 修复input.css的语法错误 #

你当前的input.css存在两处错误：

• 拼写错误：@tailwind based 应该改为 @tailwind base（是base不是based）
• @import语法错误：正确的导入格式需用单引号包裹路径，且路径应为tailwindcss/xxx，不是斜杠开头。

正确的input.css代码二选一即可：

方式一：使用@tailwind指令 #

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

方式二：使用@import导入 #

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

2. 检查tailwind.config.js的content配置 #

警告的核心原因是Tailwind未检测到项目中使用了它的工具类，这通常是content配置路径不正确导致的。

打开项目根目录下的tailwind.config.js，确保content数组包含所有你会写Tailwind类的文件路径（比如HTML、JS、JSX、Vue等文件）。示例配置如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,vue}", // 匹配src下所有子目录的html/js/jsx/vue文件
    "./public/index.html" // 匹配根目录public下的index.html
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

根据你项目的实际文件结构调整路径，确保覆盖所有用到Tailwind类的文件。

3. 重新执行构建命令 #

修改完上述内容后，重新运行你的构建命令：

tailwind -i ./src/input.css -o ./public/output.css

之后在你的HTML文件中确保正确引入了生成的output.css，比如：

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

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