Hello I am trying to use tailwind backgorund colors inside a next js project. Background color is not being applied to components with nextJS.

Here is tailwind.config.css.

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'background-dark': '#121212',
        menubar: '#181818',
        'secondary-text': '#B3B3B3',
        'primary-text': '#FFFFFF',
        'gray-dark': '#273444',
        gray: '#8492a6',
        'gray-light': '#d3dce6',
      },
    },
  },
  plugins: [],
};

I got this code sinppet from tailwind with custom color pallete.

MainLayout props to add default custom bg color to all the pages.

type MainLayoutProps = {
  children: React.ReactNode;
};

export const MainLayout = ({ children }: MainLayoutProps) => {
  return <div className="bg-background-dark">{children}</div>;
};

I have added this to the _app.tsx like so.

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MainLayout>
      <Header />
      <Component {...pageProps} />
    </MainLayout>
  );
}

export default MyApp;

The custom colors for the heading and Layout works. But the form is not taking colors.

"tailwindcss": "^3.0.23",

type FormData = {
  email: string;
  password: string;
};

export const LoginForm = () => {
  const { register, handleSubmit } = useForm<FormData>();

  const onSubmit = (data: FormData) => console.log(data);
  return (
    <div className="flex h-screen justify-center items-center">
      <form className="bg-red-300 h-32  m-auto" onSubmit={handleSubmit(onSubmit)}>
        <InputField type="text" label="Email" registration={register('email')} />
        <InputField type="password" label="Password" registration={register('password')} />
        <button className="bg-black" type="submit">
          Submit
        </button>
      </form>
    </div>
  );
};

The form is not taking the color bg-red-300.