Tailwind CSS not Rendering in Docker Desktop Extension – Blancer.com Tutorials and projects

I am developing a Docker Desktop extension and I am able to get it running locally as desired, but when I create the actual extension, i.e. the Docker image, the Tailwind CSS I am using does not render correctly.

What could be the reason for this?

This is my simple index.html file,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Title</title>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div id="root">
      <div class="relative flex w-full content-center min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 items-center ">
        <svg class="animate-pulse"  width="94" height="52" viewBox="0 0 94 52" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- paths -->
        </svg>
        <p class="mt-6 text-zinc-800">Hang tight! The service is starting..</p>
      </div>
    </div>
  </body>
</html>

My index.css looks like this,

@tailwind base;
@tailwind components;
@tailwind utilities;

I have a simple JavaScript function that checks if the service at my address is running and redirects the user to that address when it is,

function checkServer() {
    fetch('http://my-address')
      .then(response => {
        if (!response.ok) {
          throw new Error('Server not ready');
        }
        document.getElementById('loader').style.display = 'none';
        window.location.href = 'http://my-address';
      })
      .catch(error => {
        // Server not ready yet. Wait for 2 seconds and try again
        setTimeout(checkServer, 2000);
      });
  }

  window.onload = checkServer;

I have used this guide to install and configure Tailwind CSS and all of the generated files are included in my Docker image (tailwind.config.css and postcss.config.css are included within the ui directory).

Finally, this is my Dockerfile,

FROM node:18-alpine
#labels

COPY docker-compose.yaml .
COPY metadata.json .
COPY ui ui

RUN cd ui && npm install

The rest of my code is within the src/ui directory.When I cd into my ui directory and run npm run dev, the service runs without any problem. However, when I create a container out of it and run it as an extension on Docker Desktop, it does not work. In fact, I realized that the JavaScript function I have is not correctly routing the application to my address either.

Prior to adding Tailwind CSS, this worked fine; both locally and on Docker Desktop.