CODEWITHSUNDEEP
cssreactjstailwind-css
Scorpia
Scorpia

Reputation: 455

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;

Upvotes: 2

Views: 5373

Answers (2)

nart
nart

Reputation: 1858

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.

Upvotes: 5

Ensar
Ensar

Reputation: 25

you should add this into public/index.html file

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

Upvotes: -1

Related Questions