Tailwind css 颜色不适用于下一个 js 组件。如何应用背景颜色？

Question

您好，我正在尝试在下一个 js 项目中使用顺风背景颜色。背景颜色未应用于 nextJS 的组件。

这是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: [],
};

我从Tailwind 中使用自定义颜色调色板获得了此代码 sinppet 。

MainLayout 属性向所有页面添加默认的自定义背景颜色。

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

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

我已经将其添加到_app.tsx类似的内容中。

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

export default MyApp;

标题和布局的自定义颜色有效。但形式不带颜色。

"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>
  );
};

形式不带颜色bg-red-300。

Answer 1

我找到了答案，所有配置都没有问题。

\n

我创建了一个名为的附加文件夹features，但没有将其添加到tailwind.config.css.

\n

这是我的文件夹结构。

\n

components\n.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Form\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 FieldWrapper.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Input.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 __test__\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Input.test.tsx\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.tsx\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Layout\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Header.tsx\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MainLayout.tsx\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 __test__\n    \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Header.test.tsx\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.tsx\nfeatures\n.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 auth\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 LoginForm.tsx\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 __test__\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.tsx\npages\n.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 _app.tsx\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 api\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 hello.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.tsx\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 login.tsx\n

\n

对于常规项目来说，具有这种结构是不寻常的，我错过了将该部分添加到配置中的情况。

\n

添加features文件夹后tailwind.config.css content，它现在可以工作了。

\n

components\n.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Form\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 FieldWrapper.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Input.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 __test__\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Input.test.tsx\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.tsx\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Layout\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Header.tsx\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MainLayout.tsx\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 __test__\n    \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Header.test.tsx\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.tsx\nfeatures\n.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 auth\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 LoginForm.tsx\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 __test__\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.tsx\npages\n.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 _app.tsx\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 api\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 hello.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.tsx\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 login.tsx\n

\n