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 were 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 regular projects to have this structure and I missed adding that part to the config.

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

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // Add the following lines here with the custom folder name✅
    './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: [],
};