Tailwind CSS not loading on deployed site

Hi Netlify Community,

I’ve been having issues with CSS on my NextJS site. The project is a Web3 blockchain website if it helps to know. It works great locally, but for some reason, the CSS doesn’t seem to work on the deployed live site on all pages. Also, there are some videos on the home page(right under the “Top Assets” section but they do not show at all. However, when I inspect the page elements, I see them there.

There are no errors when deploying the site, but it shouldn’t look the way it currently does.

My netlify site is here and my github repo link is here .

I’ve done all I can but to no avail.

Please anyone able to help me with this?

Thank you!

Hey there, @Chester :wave:

It looks like you have two topics open about a related site. We ask that folks keep related questions to one thread so that we can streamline our support. Are you still encountering Tailwind CSS issues? If so, let’s keep the conversation going on the thread I am linking below.

Hi, @Hillary. The websites are 2 different websites and are not related. Thanks to @Luke and with the help he gave, I’ve been able to fix the issue with the topic: " Unable to deploy NextJS Web3 Blockchain website Support " so now it works perfectly! So we can close that issue/topic.

However, the topic “Tailwind CSS not loading on deployed site” is still not fixed and I’m still actively looking for a solution from the community.

Thanks,
Chester

Hi, @Chester. There is a problem with the site itself which is that it is using copyrighted images and logos. Here is a screenshot to demonstrate:

It also has a title of “Amazon Web3” which again appears to be a use of a registered trademark.

Now, I could be wrong but I am guessing that you do not have legal documentation to prove you have been granted the right to use these trademarks and copyrighted images by Amazon. If you do not have that legal documentation, then this site is a violation of our terms of use.

So, before anything else, you will need to remove any copyrighted or trademarked content that you do not have legal permission to use. If the content is not removed we will have no choice but to suspend your account. Again, if I’m mistaken and Amazon has given you permission, that is another story. If that is the case, you will need to provide that proof to Netlify to keep the site online.

Another issue is that this appears to be a site about NFTs. We strongly recommend upgrading to an Enterprise plan if you intend to host NFT sites here. If you do not use an Enterprise plan you will likely exceed the bandwidth limits for the Starter plan. Bandwidth charges for a successful NFT site can be many hundreds or even thousands of dollars per monthly billing cycle. If you continue to host NFT sites on Netlify you are agreeing to pay any and all bandwidth charges that your sites accrue. If you do not agree to pay these charges, you must remove them from Netlify. Again, if you continue to host NFT sites here, you cannot dispute your bandwidth charges as I’m warning you in advance.

For example, the inital pageload of your site is 137 MB. That is an outrageously large initial pageload. Keeping it under 6 MB is a fairly common industry standard. For example, if I load https://www.amazon.com/ the entire initial pageload is 3.3 MB. One pageload of your site is the equivalent of 41.5 pageloads of Amazon’s site.

The bandwidth for a Starter plan team is only 100 GB month. If you site gets only 1000 visitors in a month, you will exceed your bandwidth and be charged $55. However, I doubt you expect only 1000 pageloads. Let’s say only 1 in 1000 people that click buy. Lets also assume you are minting 5555 NFTs. This means you need 5.5M pageloads to sell all your NFTs. Now we take 5.5M and multiply that by the inital pageload.

137000000*5500000=753500000000000

Look at all those zeros. That should scare you.

And 753500000000000 divided by 1073741824 (the number of bytes in a gigabtye) we get 701751.6 GB. The bandwidth add-ons are $55/100GB. The initial 100 GB is included so this means that you will need 7017 add-on packs to pay for the bandwidth. So the charges would be 7017 times $55. That comes out to $385,935 in bandwidth charges. So, you must be prepared to pay that bill (or to reduce the size of your site to reduce the charges).

This is all just “back of the cocktail napkin” estimates but they should give you an idea of what you are getting into.

This is why we warn you. I don’t think you are prepared to pay hundred of thousands of dollars for bandwidth. We’ve seen a strong pattern of NFT site creators not being prepared to pay for what they use while also making enormous media intensive sites that consume huge amounts of bandwidth. Please don’t say we didn’t warn you. I’ve been quite clear about what your charges are likely to be.

Finally, back to your question about the CSS itself. The repo is private so I cannot debug it. I also don’t see any failures to load CSS files in the network tab of the browser’s dev tools. Personally, I cannot explain why your CSS isn’t working and I cannot debug further because the repo is private.

The question about your CSS not working is welcome here. You are encouraged to ask this here but it also isn’t something our support team can troubleshoot. Someone else on this support forum might have the resources to troubleshoot that code but even they will need access to your repo to do so.

As you state it is working locally, this support guide is a good starting place:

Good things to look for are difference between the local build and the build at Netlify. Once those differences are discovered, making modifications to get them to match is the next step. For example, maybe the build at Netlify is using a different version of Node.js. If so, you can change the version at Netlify to match your local build. There are multiple ways to control the version at Netlify and there is more documentation about how to do so here:

To summarize this reply:

  • Please remove any copyrighted content or we will be forced to suspend your account.
  • Please do not host NFT or cryptocurrency site on Netlify unless you are completely prepared to pay any and all bandwidth charges for those sites. (Again, we recommend upgrading to an Enteprise plan with the High-Performance Edge Network add-on for all crypto or NFT sites.)
  • Netlify cannot troubleshoot the code you write, only the code we write. However, we can and will help to debug differences in your local build and the build at Netlify.

If there are any questions about this reply, please let us know.

Hi, @Chester. I hope you understand that we cannot knowingly allow copyrighted content to remain active.

The copyrighted or trademarked content was not removed so I have suspended the site in question. I didn’t suspend your entire team, just this site. I can delete the site once you confirm we should do so but I cannot reactivate it.

Do not relink this repo to a new site at Netlify, unless you have removed the all copyrighted or trademarked content for doing so. It is against out terms of use to upload copyrighted or trademarked content without permission. If you do so again, we’ll suspend the account entirely (all services) and not just the one site.

I didn’t want to do this publicly so I’ve also made this topic “unlisted” which means it cannot be found by searching the forum and it won’t appear on lists on this site (but is still visible if you already have the URL). Once the site has been deleted from Netlify, we can delete this topic entirely and the URL will stop working completely to keep this all private.

Would you please confirm that we should delete the site above (dapper-madeleine-994043.netlify.app) entirely? If there are any questions about either of my replies here, please feel free to reply here anytime. If you do so, I’ll see it and respond.