I'm using Nextjs. Separating the theme config makes tailwind not work.

[bank188950]

The way I did it, tailwind worked.

1 I write tailwind first, such as bg-blue-500 hover:bg-blue-600 in the div, then the button config section with this color will work.

2 I take the part Put the configuration in page.tsx and the configuration will work.

This is code in github https://github.com/bank188950/flowbite-test.git

Below is the code that has the problem.

----- [pase.tsx]

import { Flowbite, Button } from 'flowbite-react'; import { customTheme } from '@/configs/customTheme';

export default function Home(): React.ReactElement { return ( <Flowbite theme={{ theme: customTheme }}>

Click me 1

  <Button color="secondary">Click me 2</Button>
  <Button color="base-1">Click me 3</Button>

  <Button color="warning">Click me 4</Button>
  <div className="bg-green">1111</div>
  <div className="bg-dark-green">1111</div>
  <div className="bg-blue-500 hover:bg-blue-600">2222</div>
  <div className="bg-sky-500 hover:bg-sky-600">3333</div>
</Flowbite>

); }

----- [customTheme.ts]

import type { CustomFlowbiteTheme } from 'flowbite-react'; export const customTheme: CustomFlowbiteTheme = { button: { base: 'focus:!ring-0 dark:focus:!ring-0', color: { primary: 'bg-sky-500 hover:bg-yellow-600', secondary: 'bg-blue-500 hover:bg-blue-600', accent: 'bg-orange-500 hover:bg-orange-600', neutral: 'bg-gray-500 hover:bg-gray-600', info: 'bg-blue-500 hover:bg-blue-600', success: 'bg-green-500 hover:bg-green-600', warning: 'bg-yellow-500 hover:bg-yellow-600', error: 'bg-red-500 hover:bg-red-600', 'base-1': 'bg-light-green hover:bg-gray-200', 'base-2': 'bg-gray-300 hover:bg-gray-400', 'base-3': 'bg-gray-500 hover:bg-gray-600', }, }, };

[bank188950]

From import { customTheme } from '@/configs/customTheme';

The solution is to put this code in tailwind.config.ts "./src/configs/*.{js,ts,jsx,tsx,mdx}",

const config: Config = { content: [ "./src/pages//*.{js,ts,jsx,tsx,mdx}", "./src/components/*/.{js,ts,jsx,tsx,mdx}", "./src/app//.{js,ts,jsx,tsx,mdx}", "./src/configs/.{js,ts,jsx,tsx,mdx}", "./node_modules/flowbite/*/.js", "./node_modules/flowbite-react/lib/esm/*/.js", ], theme: { extend: { colors: { "light-green": "var(--light-green)", green: "var(--green)", "dark-green": "var(--dark-green)", }, }, }, plugins: [require("flowbite/plugin")], }; export default config;

[tulup-conner]

Hey there, I'm not really following this - what exactly is going wrong?

[SutuSebastian]

I assume he is pointing the fact that unless he places the path of customTheme.ts in the tailwind.config.js content, custom theme is not working.