Tailwind css colors not working with next js components. How do u apply bg color?

Question

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.

Answer 1

I found the answer, all the configs was okay.

I made an additional folder called features and did not add it to the tailwind.config.css.

This is my folder structure.

components
.
??? Form
?   ??? FieldWrapper.tsx
?   ??? Input.tsx
?   ??? __test__
?   ?   ??? Input.test.tsx
?   ??? index.tsx
??? Layout
    ??? Header.tsx
    ??? MainLayout.tsx
    ??? __test__
    ?   ??? Header.test.tsx
    ??? index.tsx
features
.
??? auth
?   ??? components
?       ??? LoginForm.tsx
?       ??? __test__
??? index.tsx
pages
.
??? _app.tsx
??? api
?   ??? hello.ts
??? index.tsx
??? login.tsx

It is unusual for normal projects to have this have this structure and I missed to add that part to the config.

After adding features folder to tailwind.config.css content it works now.

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