Why is tailwind CSS not applying psuedo classes such as hover to my HTML elements?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <!--link rel="stylesheet" href="output.css" CDN FOR SO Purposes-->
</head>

<body class="bg-gray-100">
  <main>
    <div class="flex justify-center items-center min-h-screen">
      <div class="grid-flow-row max-w-[330px] w-full bg-white p-8 rounded-lg shadow-lg">
        <div class="mx-auto">
          <img class="" src="../src/img/logo.gif" alt="logo">
        </div>
        <div class="border w-full"></div>
        <div class="grid justify-items-center content-center">
          <form class="grid justify-items-center content-center">
            <input class="border mt-2 rounded-md p-1" type="text" id="username" placeholder="Username" autocomplete="username">
            <input class="border mt-2 rounded-md p-1" type="password" id="password" placeholder="Password" autocomplete="current-password">
          </form>
          <button class="rounded bg-gray-300 mt-4 text-white font-bold h-8 w-1/2" onclick="">Submit</button>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

On the button when I add hover:bg-gray-400 nothing happens when you hover over it. It keeps the bg-gray-300 class and is not overidden but does not style with the psuedo class as expected. I’m trying to get psuedo classes to work but I just can’t seem to figure it out

file structure is as follows

SRC↓
   |>dist>[index.html, output.css]
   |>node_modules>[lots of stuff]
   |>src>[img>[logo.gif], input.css]
   |>package-lock.json
   |>package.json
   |>tailwind.config.js

Below is my config file. 

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