[TAILWIND CSS] output.css not rebuilding after making changes in my main html file
Whenever I make changes and save those changes in my main HTML file, windtail does not automatically rebuild the output.css file to adapt to the changes and build the new classes. Is there something I am missing? I am pretty sure everything is setup the right way. If you know what could cause this issue please let me know, thanks!
118 Replies
In the screenshots above you can see the 'rebuilding' but this only happened after I re-saved the tailwind.config.js file or when i stopped the command and executed it again
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watchcontent:["*.html", "*/index.html", "*/**/index.html"],
use this @jonasvlalright
It still refuses to rebuild by itself
Im really confused what could cause this, i googled it and some were kinda having the same issue and it had something to do with it not being able to 'watch' the html file cause of some limitations? Is there some other thing i should need for this to work propperly?
try to add this in the beginning
"*"
@jonasvl
can you show the Package.json and input.css and output.css and the Whole File Structure
This happened to me before i solved it by doing this I want to check themalright give me a sec
try this once
did u mean to put 'html' in front of it?
no no
content:["*", "*.html", "*/*.html", "*/**/*.html"], i did this now and it is only building the css file when i save or re execute the cmd
could this be a conflict with some kind of extension i have perhaps?yews
and also do this
npm init -y
in the package.json file you will see a script named test inside that paste this
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
and in terminal use this npm run test
this just runs the command as an alias
and npm init -y added a lot more dependencies in my package.json file
yes
thats right
it might be needed
below dependncies
but it's still not 'looking over' the file and update it by itself
ye i have it there
show me what your browser showing
its working
it only applies the 'tailwindcss' if i manually rebuild it but it should auto rebuild right?
or am i just dumb and do you actually have to rebuild it every time
paste this and check
okay so i will just add this to my html and not rerun the cmd to rebuild
can you make a new project just for once
wym? just make a new folder and try everything again?
paste this first
yeah
alright
then this
then
npx init -y
inside the test script
use this
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watchu meant npm right
in the first one
yes
both works right
?
npx init -y didn't work
only npm did
okay np
we both are learning lmao
yea all good
before this command i'll make a input css file right
create SRC folder and input.css
yea
yea
the output one will be auto created
when you run the script
then just link it
with html
link:css one and just tab
damn you are playing with VS Code
yes
but it still refuses to auto build
wait bro
yes
it is not recognising the path thats why its not working
are u sure? bcs if that would be the case it couldn't build it in the first place right?
check the css link by cliking on ctrl and left click
that works
on the css path
okay
whats inside the css file then?
the output?
yes
show a pic of the project (pls make it bigger)
did you put this
so it's the basic output file + this bcs i added
<h1 class="text-teal-600">Hello</h1> in the index.html file and did ctrl+s in tailwind.config.js to rerun the command so i manually built it and that works
yes
everything works except for the fact that it's not rebuilding
on it's own
use --watch
or vite
what are those
by npm install vite
okay
--watch to watch the file for changes
put in the script
yes
just
--watch?
i installed vite btw
if this works then no need of vite
i have this
lmao
have this instead bro
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
ahh i see
then npm run test
yes that's the command that we have been using the whole time
npm run test
did you do this??
i did run it now
and it perfectly rebuilds the css file
which is great
but it's not rebuilding it automatically
what
show the conole
and i never runs again after making changes to my html file
it should show this
does yours rebuild after making changes?
yes
well
then and there after saving
idk what the hell i am doing wrong
i have the latest version of nodejs
i have everything done like the guide
and it still does not work
https://www.youtube.com/watch?v=h9Zun41-Ozc&t=887s&pp=ygUUdGFpbHdpbmRzcyBzZXR1cCAzLjA%3D
check this vid once
Thirus
YouTube
Install Tailwind CSS v3 - CDN vs CLI vs PostCSS
Tailwind CSS released it’s major version 3.0 on December 9th. If you’re new to Tailwind or front end development, you might wonder how to install and start working with this latest version of Tailwind CSS in simple projects that don’t use any of the frameworks listed in the documentation.
In this video I’ll show you three ways - via CDN, using ...
all three ways
did you restart you computer after npm install
?
i'll check that vid out
and no haven't restarted my pc after doing npm install -D tailwindcss
check this
have some fresh memes
wtf lmao hahahaa
it's good ngl
yeah
okay i now what im gonna do
so i will use the cdn
and when i am done
to publish i will build the css
so i don't have to use the link in my html file in production
tyvm for all your help
have a nice rest of your day
Np
@jonasvl Does every thing works okay?
https://dev.to/narottam04/free-tailwind-components-for-your-next-project-2gka?signin=true
if any thing needed like components then check this
DEV Community
Free Tailwind Components For Your Next Project.
Tailwind UI is a beautiful UI component library that you can use, to make beautiful websites in just...
ah okay
well on my laptop it does everything normal, haven't gotten back on my main pc
oh okay
Are you still having tailwind issues @jonasvl ?
on my main pc yes
can't do anything on it rn tho
Ohhh..okay
Can you please let me know when you have access to it?
yes, once i get back to my main pc i will let you know everything
Please
I'm having the same problem rn
Did you ever fix the problem?
nope
i forgot about it tbh
aww man
like you just moved pass it or did you forget how to fix it?
moved pass it
i looked it up and it probably was some small internal thingy
but i had no clue how to get it fixed
im still tryna fix it rn
im in the tailwind server lookin in forums
good luck
thx
hey, this issue resolved?
yea
im using the Live Preview extension with these settings
so you are not facing rebuilding problem after this setting?
i have applied same but still i have to build it manually
and you're using --watch?
yeah
doesn't rebuild by itself
im guessing its the tailwimd comfig idk
im not a pro