I’m trying to use Tailwind CSS in my project, but the Tailwind classes are not applying styles as expected. Here’s a minimal example of my setup:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body class="bg-red-600">
<center><h1>Hello world!</h1></center>
</body>
</html>
Here is my tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/*.{html}"],
theme: {
extend: {},
},
plugins: [],
}
And here is my File Pathing:
However when I use Style="" it works completely fine.
-
Tailwind Installation: I have Tailwind CSS installed and included in my project.
-
CSS File: The
input.cssfile includes the Tailwind directives:@tailwind base;
@tailwind components;
@tailwind utilities;
-
Build Process: I am using
npx tailwindcss -o output.cssto compile the CSS. -
File Path: The path to
output.cssin the<link>tag is correct. -
Cache: I’ve cleared my browser cache and tried a hard refresh.
Despite these steps, the bg-red-600 class is not applying the red background color. When using inline styles like style="background-color: red;", it works fine.
Any help would be greatly appreciated!
8