Tailwind utility classes only working in css file and not inline-CodePudding

I'm using electron, react (web), typescript and tailwind. Now, currently I'm facing the problem that tailwind only works in .css files but not inline. See example below

In .css file (works)

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

In .tsx file

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

Just in .tsx (does not work)

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

My tailwind.config.js has content defined correctly:

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

Further, when compiling, I get the following warning:

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

And index.css has following included:

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

CodePudding user response：

you should add this into public/index.html file

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

CodePudding user response：

Following tailwind 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

Use * to match anything except slashes and hidden files
Use ** to match zero or more directories
Use comma separate values between {} to match against a list of options

Suspectedly your content config path is wrong, so double check the path to make sure it scan all source files contain Tailwind class names.