1

hello i am newbe to nextjs, i am using tailwind/flowbite in project, i just copy and pasted flowbite search input with dropdown code from https://flowbite.com/docs/forms/search-input/, dropdown is not working.

i have configured tailwind css and flowbite library as per documention.

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',
      // ...defaultTheme.screens,
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }
    },
    colors:{
      primary:{
        100: "#f6931d"
      },
      secondary:{
        100: "#fff"
      },
      gray:{
        100:"#C0C0C0"
      },
      black:{
        100: "#000000"
      },
      white:{
        100:"#ffffff"
      },
      light:{
        100: "#E8E8E8"
      },
      dark:{
        100: "#B0B0B0"
      },
      orange: {
                DEFAULT: 'hsl(26, 100%, 55%)',
                pale: 'hsl(25, 100%, 94%)',
            },
            blue: {
                'very-dark': 'hsl(220, 13%, 13%)',
                'dark-grayish': 'hsl(219, 9%, 45%)',
                grayish: 'hsl(220, 14%, 75%)',
                'light-grayish': 'hsl(223, 64%, 98%)',
            },
            white: {
                DEFAULT: 'hsl(0, 0%, 100%)',
            },
            black: {
                DEFAULT: 'hsl(0, 0%, 0%)',
            },
    },
      extend: {
        fontFamily: {
          poppins: ["Poppins", "sans-serif"],
          roboto: ["Roboto", "sans-serif"],
        },
    },
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

_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

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;
shazim ali
  • 360
  • 4
  • 18
NASIR ALI
  • 109
  • 1
  • 7
  • Tell us what you want to do, show what you tried, and show or describe the results. No one can debug code they can't see. –  Apr 01 '22 at 18:38
  • hi i resolved the problem, actually i was fetching data by using SWR in LAYOUT component, which blocked flowbite javascript. removed SWR call from LAYOUT component , now its working fine. – shazim ali Mar 12 '23 at 20:15
  • how to remove SWR sir? – Herahadi An Aug 03 '23 at 06:23

1 Answers1

3

Tailwind does not come with a built in drop down. You can use HeadlessUI from them to have components like that.

hvalette
  • 106
  • 5