I have installed TailwindCSS through CLI but my classes are not working. I am not working with any framework and simply learning Tailwind.
In my style.css the code is
@tailwind base;
@tailwind components;
@tailwind utilities;
In my tailwind.config.js the code is
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html"],
theme: {
extend: {},
},
plugins: [],
};
The package.json file’s code is
{
"name": "mega-project-2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.4.3"
}
}
The output.css file is properly linked with index.html and here is the code for index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind Project</title>
<link rel="stylesheet" href="output.css" />
</head>
<body>
<div id="parent" class="flex justify-items-center items-center gap-2">
<div class="bg-red-500 h-8 w-8"></div>
<div class="bg-blue-700 h-8 w-8"></div>
<div class="bg-yellow-400 h-8 w-8"></div>
</div>
</body>
</html>
My folder structure is in below image
Folder Structure
Things I already tried by checking similar other problems on Stack Overflow are here:
I tried runing npm run build but got error.
I also tried to change
From
@tailwind base;
@tailwind components;
@tailwind utilities;
To
@import "tailwind/base";
@import "tailwind/components";
@import "tailwind/utilities";
but still my classes didn’t work.