0
1.1K
VistasTailwind css colors no funciona con los siguientes componentes js. ¿Cómo se aplica el color bg?
Hola, estoy tratando de usar colores de fondo de viento de cola dentro de un próximo proyecto js. El color de fondo no se aplica a los componentes con nextJS.
Aquí está 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: [], };Obtuve este código sinppet de Tailwind con una paleta de colores personalizada .
Accesorios de MainLayout para agregar color de fondo personalizado predeterminado a todas las páginas.
type MainLayoutProps = { children: React.ReactNode; }; export const MainLayout = ({ children }: MainLayoutProps) => { return <div className="bg-background-dark">{children}</div>; }; He agregado esto a _app.tsx así.
function MyApp({ Component, pageProps }: AppProps) { return ( <MainLayout> <Header /> <Component {...pageProps} /> </MainLayout> ); } export default MyApp;Los colores personalizados para el encabezado y el diseño funcionan. Pero la forma no está tomando colores.
"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> ); }; El formulario no toma el color bg-red-300 .
1 Respuestas
Responde la pregunta0
Encontré la respuesta, todas las configuraciones estaban bien.
Creé una carpeta adicional llamada features y no la agregué a tailwind.config.css .
Esta es mi estructura de carpetas.
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.tsxEs inusual que los proyectos normales tengan esta estructura y no agregué esa parte a la configuración.
Después de agregar la carpeta de features al content de tailwind.config.css , ahora funciona.
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: [], };