0
1K
ViewsTailwind class is not working after installed
I try to use CSS, im just install the tailwindcss with npm, and then i build the css and provide the output.css. But, when i use the bg-black class in button for testing, it's still not working.
build command that i use
tailwindcss -i ./src/style.css -o ./dist/output.css i put it into script in package.json
Directory file path:
in src/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
in tailwind.config.js
theme: {
extend: {
// ...
},
},
plugins: [],
}
in dist/index.html
<!DOCTYPE html>
<html lang="en">
<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 rel="stylesheet" href="output.css">
<title>Learn Tailwind</title>
</head>
<body>
<div class="container">
<button class="bg-black">Awesome</button>
</div>
</body>
</html>
The HTML in browser result:
3 answers
Answer question0
I see you import "output.css" in your code but you necessarily need to import your tailwind css file. Ex:
<link rel="stylesheet" href="src/style.css">
0
I had the same issue. it is to do with your tailwind.config.js Make sure you have the content list pointing to your html files that are using tailwind. (see code below to look at all files with html at one level down)
Then run the command:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Ensure you don't get any warning messages about invalid paths.
module.exports = {
content: ['./*/*.html', ],
theme: {
extend: {},
},
plugins: [],
}
0
I see you are using build command and put it in your package.json, that is right. But did you run npm run build then?