Tailwind CSS 类在我的项目中不起作用

Question

这是我的 HTML 链接 https://play.tai​​lwindcss.com/fbB4GCL0ht

Visual Studio Code 设置图片

Tailwind.Config.js

全部文件

warn - 在源文件中未检测到实用程序类。如果这是意外情况，请仔细检查contentTailwind CSS 配置中的选项。
警告 - https://tailwindcss.com/docs/content-configuration 在 320 毫秒内完成。

这显示了我的 Visual Studio Code 终端。我应该怎么办？我还添加了基本组件和实用程序。

Answer 1

此错误是由于 Tailwind 在它“认为”的 HTML 代码目录中找不到任何可扫描的类。

文件中的此部分tailwind.config.js确定哪些文件将被扫描并由 Tailwind CSS 处理：

  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],

这为我纠正了这个问题。

官方文档：内容配置

Answer 2

我面临着同样的问题。经过一些测试，我找到了解决方案，但我不知道正确的解决方案或为什么会发生这种情况，所以如果有人有线索，请告诉我们。

content: [
    './pages/**/*.tsx',
    './components/**/*.tsx',
  ],

或者

content: [
        './pages/**/*.jsx',
        './components/**/*.jsx',
      ],

Tailwind 无法识别 {} 之间的选项，因此我只是指定我正在处理的类型，.tsx或.jsx。我走错了路，所以也检查一下。

Answer 3

虽然我在tailwind.config中添加了内容，但它仍然发出警告。

我正在运行命令来构建输出：

npx tailwindcss -i ./input.css -o ./build/output.css

将 -cli 添加到命令中，它对我有用：

npx tailwindcss-cli -i ./input.css -o ./build/output.css

Answer 4

我也遇到了这个问题，但我可能已经解决了。我的文件中的原始内容tailwind.config.js如下所示：

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

我注意到我的 App.js 文件实际上是 App.jsx，所以我只是在该行中插入了单个字母“x”：

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

似乎已经奏效了。

Answer 5

您的tailwind.config.js文件无法\xe2\x80\x99 找到您的index.html文件。

\n

在 Tailwind CSS 配置文件中将文件路径添加到内容数组中'./index.html',

\n

您必须将文件路径定义为如下内容：

\n

module.exports = {\n  content: ["./src/**/*.{html,js}",\n\n  '*.{html,js}'], // Like this\n\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n

\n

顺便说一句，如果您有不同的文件扩展名，例如 .ts、.jsx 等，则必须在中定义文件扩展名content: ['./*.{html,js,ts,jsx}']

\n

Answer 6

不要使用花括号；相反，请指定以下内容。

module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './public/**/*.html',
    './public/**/*.js'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}