PHP file in subdirectory is not loading the linked tailwindcss styles.css files located somewhere else

Question

I am trying to learn how to make a website with php and tailwindcss.

I am able to get tailwindcss working when open the index file like this: [http://localhost:8888/ab/index.php]

this what I have in my index.php, and that is working.

<?php include "public/header.php"; ?>


    <div class="container xl mx-auto">
        <h3 class="text-2xl font-bold text-black py-4 px-4">Our Soups</h3>
     
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
            
        <?php foreach ($soepen as $soep) { ?>
             <div class="p-6 bg-white rounded-xl shadow-lg">
                <h4 class="font-bold text-black"><?php echo htmlspecialchars(
                  $soep["soepnaam"]
                ); ?></h4>
                <div class="text-slate-500"><?php echo htmlspecialchars(
                  $soep["soepingredienten"]
                ); ?></div>
                <div class="flex justify-center py-4">
                    <a href="#" class="px-6 py-3 font-bold text-white bg-red-600">More Info</a>
                </div>
             </div>
            <?php } ?>
            
        </div>
   </div>

 <?php include "public/footer.php"; ?>

My site structure looks like this.

ab
├── assets
├── node_modules
├── templates
└── public
    ├── header.php
    ├── footer.php
    ├── styles.css
    ├── test│   
        └── mytestfile.php
├── add.php
├── index.php
├── package-lock.json
├── package.json
├── styles.css
└── tailwind.config.js

but when I try to load the header.php and footer.php in the mystestfile.php in the test folder under the public folder the styles.css are not loading, the page is loading and php works.

I have been testing around and only this loading the mystestfile.php properly but not the tailwindcss output in public/styles.css

<?php
include "../../public/header.php"; ?>
<?php  ?>
<p>bla</p>
<?php  ?>

<?php include "../../public/footer.php"; ?>

This is the code in my tailwind config file:

module.exports = {
  content: [
    "./**/*.{html,js,php}"
  ],
  theme: {
    extend: {},
  },
};

Why is not loading the styles.css in the header in mytesfile.php

Hope someone can assist or explain. Thanks. B.