TailwindCSS Building does not reflect config changes

I am using Tailwind in a create-react-app and when I add a new color to the config file, it is not reflected when building, for example:

tailwind.config.js

module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extends: {
      color: {
        main: "#56435F",
      },
      textColor: {
        main: "#56435F",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

In styles folder I have two css files, one is output.css and the other is tailwind.css the tailwind.css contains:

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

And I am building with:

postcss -w src/styles/tailwind.css -o src/styles/output.css

But whenever I add new things to the tailwind.config.js file, nothing gets rebuilt, no changes are actually reflected.

I feel like I am missing a piece of the puzzle, but I don't know what?