Tailwind 实用程序类仅在 css 文件中工作，而不是内联

Question

我正在使用 electron、react（网络）、typescript 和顺风。现在，目前我面临的问题是 tailwind 仅适用于 .css 文件，但不适用于内联。请参阅下面的示例

在 .css 文件中（有效）

.navbar {
    @apply border-2 border-red-900;
}

在.tsx文件中

<div className="navbar">
    </div>

就在 .tsx（不起作用）

<div className="border-2 border-red-900">
</div>

我的 tailwind.config.js 已正确定义 content：

module.exports = {
  mode: "jit",
  content: ["./src/**/*.{js, jsx, ts, tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

此外，在编译时，我收到以下警告：

no utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configurat

并且 index.css 包含以下内容：

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

Answer 1

你应该将其添加到 public/index.html 文件

<script src="https://cdn.tailwindcss.com"></script>

Answer 2

顺风content-configuration

Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, then generating all of the corresponding CSS for those styles.

In order for Tailwind to generate all of the CSS you need, it needs to know about every single file in your project that contains any Tailwind class names

使用 * 匹配除斜杠和隐藏文件以外的任何内容
使用**匹配零个或多个目录
在 {} 之间使用逗号分隔值来匹配选项列表

怀疑你的 content 配置路径是错误的，所以仔细检查路径以确保它扫描所有包含 Tailwind class 名称的源文件。

Tailwind 实用程序类仅在 css 文件中工作，而不是内联

Tailwind utility classes only working in css file and not inline

css

reactjs

tailwind-css

Tailwind 实用程序 类 仅在 css 文件中工作，而不是内联

Tailwind utility classes only working in css file and not inline

css

reactjs

tailwind-css

Tailwind 实用程序类仅在 css 文件中工作，而不是内联