Having simple html:
public/index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body class="text-red-600">
some text
</body>
where the css was obtained from tailwindcss -i src/styles.css -o public/styles.css
src/styles.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
the red color from <body>
tag does not apply. Are default tailwind classes imported into public/styles.css
?
2
Answers
It seems like the
public/index.html
file is not covered by thecontent
file globs in your Tailwind configuration. You must ensure that source code files that use Tailwind classes are covered by thecontent
file globs, otherwise Tailwind will not scan these files and will not generate CSS rules for class names present. Consider reading the documentation on configuringcontent
.You have mentioned
**content: ["./src/**/*.{html,js}"]**
in the tailwind.config.js file .So it will apply css for file inside the src directory with html and js extension. so html file should be inside thesrc
folder. Therefore Folder structure should besrc/index.html
.But if you want apply css without src folder then you have to mentioned that path in
tailwind.config.js
file like this.