tailwind not working after trying every solution online

I have done absolutely everything from the documation, and I have searched and tried everything three times while trying to fix this beautiful tailwind but still, no success. Some classes just won’t work. I a have the config file and the html, css files in the same folder.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}




<link rel="stylesheet" href="./tailwind/output.css" />
<link rel="stylesheet" href="styles.css" />

<div class="flex w-screen h-auto justify-center">
  <div class="flex flex-row flex-wrap gap-[20px]"> <-- not working
    <div class="w-[200px] border-2 border-white">Div1</div>  <-- not working
    <div class="w-[200px] border-2 border-white">Div2</div> <-- not working
    <div class="w-[200px] border-2 border-white">Div3</div> <-- not working
  </div>
</div>

styles.css:

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

@apply won’t work

also ran

npx tailwindcss -i styles.css  -o ./dist/output.css --watch      

>Solution :

The stylesheet is not in the right folder:

npx tailwindcss -i styles.css  -o ./dist/output.css --watch      
                                    👆

                                 👇
<link rel="stylesheet" href="./tailwind/output.css" />