Tailwind CSS Styles not applying – Blancer.com Tutorials and projects

Tailwind CSS Styles not applying using Live Server or no Live Server. The builds are working and I think the paths are already good. What else am I missing?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/script/output.css">
</head>
<body>
    <div class="bg-red-500"> Testing </div>
</body>
</html>

INPUT CSS

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Package JSON FILE

{
  "devDependencies": {
    "tailwindcss": "^3.4.17"
  },
  "scripts": {
    "build": "npx tailwind -i ./input.css -o ./output.css --watch"
  }
}

Tailwind Config File

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

folders/directory

I tried the input.css changes where I added tailwindcss to the base and that’s mostly it.