So I am working with Tailwind CSS is not compiling my HTML CSS mentions.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./public/logs.html"
],
theme: {
extend: {},
},
plugins: [],
}
Add a comment
|
2 Answers
Could you post other files as well such as your package.json, and the .html file where you are either importing the compiled CSS or where you are importing the CSS file with the @tailwind decorators?
Options
- You can either run
npx tailwindcss -i ./path_to_input.css -o ./path_to_output.css --watchwhile you are developing and make sure to import the outputted CSS file in your.htmlfile. - If you are developing with some sort of build system, then you can just add the below line to your
.htmlfile.
<link href="path_to_output.css" rel="stylesheet" />
In the case you are doing option 2, make sure your output.css file looks something like this:
@tailwind base;
@tailwind components;
@tailwind utilities;
3 Comments
koen1711
<div class="bg-gray-600"> <fieldset id="userinfo"> <img src="" id="userinfo" alt="" class=""> <p class="username" id="username">Hi!</p> </fieldset> </div> And, /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./public/logs.html" ], theme: { extend: {}, }, plugins: [], }
Daniel B. Papp
Right, but where are you importing your tailwind CSS file? I’d suggest you look over the installation instructions and see if you have created and imported your CSS file. Link to Tailwinds installation docs: here
Mihai
Hey, did you had ever an issue with the tailwind components and tailwind utilities not getting compiled into CSS? On project I have this issue while on another no
i had the same problem all i did was restart vscode and reinstalled npx tailwindcss -i ./path_to_input.css -o ./path_to_output.css --watch
1 Comment
Community
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.