Okay, here’s the weird thing. The site looks perfect in Dark Mode. Everything works the way it’s supposed to. The default light-mode doesn’t work. It works when I test it locally. I’ve followed all of the directions on how to use Tailwind CSS. No background colors appear when I’m not in Dark Mode.
Even stranger, is how finicky the JavaScript functionality is. My first thought was that maybe it was reading the z-index wrong. So, I swap out the “z-[100]” in the navigation toolbar for “z-100” instead. Even though that doesn’t touch the JavaScript in literally any way, and I’m only adjusting the class in the navigation toolbar, all of the JavaScript breaks completely until I put “z-[100]” back in the navigation toolbar’s class.
What in the world is going on here? I tweak one thing, and something completely unrelated breaks entirely. It works perfectly as a local file, it’s just the hosted version that doesn’t work. The dark mode works, but the identical component that isn’t attached to dark mode, implemented the exact same way, does not function at all. I reload the page multiple times, nothing happens. I check the console on Firefox, no errors. Just… What?!
Does anybody have any clue why this is breaking at this point? This seems like it shouldn’t be this difficult.
your site looks fine from my end while in light mode. make sure you build the site properly with tailwind before uploading, as tailwind only generates the classes used in your html
Please note that CSS and Javascript are completely rendered in the browser. There is no server side functionality that manipulates your CSS or Javascript code.
When I look at the rendered page, the nav element does not have any background or background-color attribute on it. Enabling dark mode gives is the darker background, but there is no similar CSS for the light mode version.
The only thing that could be relevant hosting wise is that our servers enforce quite strong browser cache by default. So after uploading new code, you may want to clear your browser cache or open it in a fresh Incognito Mode window to make sure you’re actually fetching the latest version.
Everything else is just your CSS and your HTML. If it doesn’t display the way you want, it means there is a problem in your code. If it works locally but not on your live site, it could simply mean you didn’t upload all the updated files.
We’re not manipulating your HTML or CSS or injecting our own code that could cause conflict. What you see is all your code.
I think I have it figured out. The bit about updating all of the relevant files was what helped me figure it out.
It took a bit to realize, but since TailwindCSS generates a custom CSS file for the page, every single edit and adjustment I make required me to re-upload the CSS file as well. Since I was mostly testing things locally, my computer was naturally able to detect the updated files. I’ve never used Tailwind before, so that was what was tripping me up so badly. And of course, since I’ve never published a website before, let alone one using Tailwind, I was having trouble understanding what the difference was between the two copies of the site that I was testing.
I apologize if the way that I worded my issue made it sound like I was blaming the hosting service for my issue. I was getting frustrated after spending a majority of the day troubleshooting to no avail. As I said, I’m new to this, so my troubleshooting ends up searching for if there’s an option I needed to set on my hosting account, if there’s something wrong with the files I uploaded, if I misunderstood how Tailwind works, etc.
Again, thank you very much for the help. Funny enough, the article I read that was recommending InfinityFree for hosting had complained that support was very slow and difficult to deal with. I’ve honestly had nothing but good experiences with getting help with my issues (even when the number of said issues must be exasperating to deal with, and for that I apologize). I really don’t know why the author of that article had the problems he claimed he did.