My tech stack includes electron, react (web), typescript, and tailwind.
Currently, I am encountering an issue where tailwind only applies styles in .css files but not inline. See the 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>
Despite having the content defined correctly in my tailwind.config.js:
module.exports = {
mode: "jit",
content: ["./src/**/*.{js, jsx, ts, tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
During compilation, I receive a warning stating:
no utility classes were detected in your source files. If this is unexpected, double-check the
contentoption in your Tailwind CSS configuration
The index.css includes the following:
@tailwind base;
@tailwind components;
@tailwind utilities;