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

【问题标题】：Tailwind CSS classes is not working in my project?Tailwind CSS 类在我的项目中不起作用？
【发布时间】：2022-05-01 02:37:42
【问题描述】：

这是我的 HTML 链接 https://play.tailwindcss.com/fbB4GCL0ht VS Code 设置图片 Tailwind.Config.js All files

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

这是显示我的 vs 代码终端请让我知道我应该做什么。我还添加了基本组件和实用程序。

【问题讨论】：

您是如何安装 Tailwind 的？您的项目中有tailwind.config.js 文件吗？不知道你做了什么以及你有什么文件，就无法诊断问题
是的，我有那个文件
编辑您的初始帖子以描述您如何安装 Tailwind，并添加该文件当前包含的内容。另外，您是否在主 CSS 文件中添加了 @tailwind base; @tailwind components; 和 @tailwind utilities;
如你所说，我刚刚添加请帮我解决这个问题。
github.com/ali09-github/Tailwind_project

标签： css class tailwind-css

【解决方案1】：

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

tailwind.config.js 文件中的此部分确定哪些文件被扫描以由 tailwind 处理

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

这为我解决了问题。

官方文档：https://tailwindcss.com/docs/content-configuration

【讨论】：

谢谢，兄弟让我试试你说的
github.com/ali09-github/Tailwind_project

【解决方案2】：

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

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

或

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

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

【讨论】：

遇到了同样的问题，确实很奇怪。

【解决方案3】：

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

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

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

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

似乎奏效了。

【讨论】：

【解决方案4】：

您可以像content: ["./src/index.html"],这样配置内容，也可以观看video这样的内容

【讨论】：

我尝试了所有方法，但仍然面临同样的问题
你关注那个视频了吗？
是的！兄弟，我也发现了同样的问题
@ayanali 你的节点是什么版本？如果你在github上分享你的项目会更好
github.com/ali09-github/Tailwind_project

【解决方案5】：

您的tailwind.config.js 文件找不到您的index.html。

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

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

module.exports = {
  content: ["./src/**/*.{html,js}",

  '*.{html,js}'], //like this

  theme: {
    extend: {},
  },
  plugins: [],
}

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

【讨论】：

【解决方案6】：

只需将其添加到 global.css 中

@tailwind 变体；

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

【解决方案7】：

文件tailwind.config.js中的配置

 content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

这取决于您正在处理的文件，例如，如果您正在处理 .js 和 .html 文件，那么您需要在 tailwind.config.js 文件中指定它，如下所示：

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

如果您还在处理 .jsx 文件，那么您只需将其添加到您的配置文件中：

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

【讨论】：

【解决方案10】：

您的项目中的路径可能已更改。检查您的路径并进行相应配置。例如，如果您已将页面和组件移动到 src 文件夹，请将以下内容添加到 Tailwind 配置文件中。

  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],

【讨论】：