'Tailwind utility classes only working in css file and not inline

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;
cssreactjstailwind-css


Solution 1:[1]

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.

Solution 2:[2]

you should add this into public/index.html file

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 nos nart
Solution 2 Ensar

Related Questions