I haven't found a solution that works. I followed the steps on the Tailwind installation page. I've linked everything. I know that Tailwind is being applied to the index.html since the font is different and I'm able to style the background color of the header. But that's all that has worked so far. If I try to add any additional classes (ex. flex, font-weight), to the header or anything else, there's no change.
My HTML head and header:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./assets/css/dist/output.css" rel="stylesheet">
<link href="./assets/css/src/input.css" rel="stylesheet">
<title>Room-3</title>
</head>
<body>
<!-- Class "flex" isnt working -->
<header class=" flex bg-slate-400">
<h1>Room-3</h1>
<p id="what-we-do">What We Do</p>
<button>Get Started</button>
</header>
<script src="./tailwind.config.js"></script>
</body>
My tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./"],
theme: {
extend: {},
},
plugins: [],
}
My input.css:
Note: @tailwind is red and underlined in each instance, so I suspect the problem has something to do with this file
@tailwind base;
@tailwind components;
@tailwind utilities;
It is supposed to work fine.If the background is working then the rest should work as well
There may be mistakes in the class names.
Try this code:
The output goes like: