Can anyone help me integrate Tailwind elements into my NextJs project using JavaScript instead of TypeScript? I tried following the documentation, but the navbar component's expand button doesn't work. It seems like all components are having some issues.
Here is a snippet from my tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
"./node_modules/tw-elements/dist/js/**/*.js",
],
theme: {
fontFamily:{
roboto:['Roboto']
},
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
boxShadow:{
'nav':["[13px 25px 22px 5px #00000024,3px -4px 22px 31px #00000024]"]
}
},
},
plugins: [
require("tw-elements/dist/plugin.cjs")
],
}
And here is my Navbar.jsx file:
const NavBarv2 = () => {
useEffect(() => {
const init = async () => {
const { NavBar, Input, initTE, Collapse, Dropdown } = await import("tw-elements");
const myInput = new Input(document.getElementById("navbar"));
const myNavBar = new NavBar(
document.getElementById("navbar"),
);
}
init();
}, []);
return(//Navbar from tailwind elements)