Tailwind elements in next js

[Deepakpradhan7]

i have installed tailwind elements (npm i tw-elememts) after this i have added the plugin in tailwind config file like this

/** @type {import('tailwindcss').Config} */

module.exports = {
content: [
"./app//*.{js,ts,jsx,tsx}",
"./pages//.{js,ts,jsx,tsx}",
"./components/**/.{js,ts,jsx,tsx}",
"./node_modules/tw-elements/dist/js//*.js/cjs",
"./src//*.{js,ts,jsx,tsx}"
],
theme: {
screens: {
'sm': '360px',
// => @media (min-width: 360px) { ... }

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

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

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

    '2xl': '1536px',
    // => @media (min-width: 1536px) { ... }
  }

},

// plugins: [require("tw-elements/dist/plugin")]
plugins: [require("tw-elements/dist/plugin.cjs")],
}

after this i thought the dynamic components like dropdown,accordin etc will run but it's not working
i have also use
useEffect(() => {
const importTE = async () => {
(await import("tw-elements")).default;
};
importTE();
}, []);
in app.js page

where should i change or where i am wrong?Please help me out

[Trochonovitz]

Hi, please check out our tutorial for integration tutorial for Next with Tailwind Elements.