I installed tailwind css with npm, and then I build the css to get the output.css file but when testing it the classes are not working.
Here are the scripts I use :
"scripts": {
"build:css": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
"test": "echo "Error: no test specified" && exit 1",
"devserver": "live-server public",
"start": "npm-run-all --parallel build:css devserver"
}
Directory file path :
(https://i.sstatic.net/JpmsHz52.png)
in src/input.css,
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
in tailwind.config.js;
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/*.html"],
theme: {
extend: {},
},
plugins: [],
};
in public/index.html,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../dist/output.css">
</head>
<body>
<button class="bg-sky-500 hover:bg-sky-700 text-white font-bold py-2 px-4 rounded">Save changes</button>
</body>
</html>
The browser result
(https://i.sstatic.net/jt3LSdnF.png)