Hello, I am a newcomer to Next.js and currently working on a project using Tailwind/Flowbite. I copied and pasted the Flowbite search input with dropdown code from , but unfortunately, the dropdown is not functioning as expected.
I have followed the documentation to configure Tailwind CSS and the Flowbite library properly.
Here is the content of my tailwind.config file:
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
"./node_modules/flowbite/**/*.tsx"
],
theme: {
screens: {
'xs': '350px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
},
colors:{
primary:{
100: "#f6931d"
},
secondary:{
100: "#fff"
},
// Other color settings omitted for brevity
},
extend: {
fontFamily: {
poppins: ["Poppins", "sans-serif"],
roboto: ["Roboto", "sans-serif"],
},
},
},
plugins: [
require('flowbite/plugin')
],
}
In addition, here is the content of my _app.tsx file:
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '../components/Layout'
import 'flowbite'
import { ThemeProvider } from 'next-themes'
const MyApp = ({ Component, pageProps}: AppProps) => {
return (
<>
<ThemeProvider attribute='class'>
<Layout>
<Component {...pageProps} />
</Layout>
</ThemeProvider>
</>
)
}
export default MyApp
Lastly, here is the contents of my global.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;