Hello, I have used old version and it run well until new version come out. I follow instruction to install new version, however I get error:

...\node_modules\@material-tailwind\react\index.js:1
export * from "./components/Accordion";
^^^^^^
SyntaxError: Unexpected token 'export'
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at [email protected]/react (...\.next\server\pages\_app.js:216:18)

Here is my _app.js code:

import '../styles/globals.css'
import 'tailwindcss/tailwind.css'
import '@material-tailwind/react'
import React from 'react';
import App from 'next/app';
import MainLayout from '../components/mainlayout';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const Layout = Component.Layout || Component.DefaultLayout;

    return (
      <MainLayout>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </MainLayout>
    );
  }
}

export default MyApp;

this is tailwind.config.js

const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './src/layouts/**/*.{html,js}',
    './src/index.html',
    { raw: '<div class="font-bold">', extension: 'html' },
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

Expected Behavior

Should be able to use in TS project without any errors saying it Could not find a declaration file for module@material-tailwind/react/*`.

Current Behavior

I cannot use it in TS project as seen here:

Possible Solution

Add native TS support or create typings.

Steps to Reproduce (for bugs)

1. Create empty NextJS/React app with TS support
2. Install material-tailwind
3. Import material component

Your Environment

Current version of material-tailwind. NextJS TS project.

Hello,

I'm sorry but I don't really understand how can I add a color to the button's list color

type color = | "blue-gray" | "gray" | "brown" | "deep-orange" | "orange" | "amber" | "yellow" | "lime" | "light-green" | "green" | "teal" | "cyan" | "light-blue" | "blue" | "indigo" | "deep-purple" | "purple" | "pink" | "red";

I've created a "primary color" in my tailwind.config.js file ( primary: '#369BB0',)

I now 'd like to add this color to the list of color of button component but don't know how.

Thank you !

I am working on Next JS and trying to add an Icon to my page. I started with an example given on the page

import { Button, IconButton } from "@material-tailwind/react";
import React from "react";

const Header = () => {
  return (
    <div
      className="flex items-center sticky top-0 
    z-50 px-4 py-4 shadow-md bg-white"
    >
      <IconButton>
        <i className="fas fa-heart"></i>
      </IconButton>
      <h1>Docs</h1>
    </div>
  );
};

export default Header;

Do I need to add any dependencies or Am I missing any obvious reference? I added font awesome but it did not help.

In that file props interface was created but was never used to type define the component props.

My first pull request....still learning hope the thing i did was correct

Hello,

I id like to customize the Chip component in order to use my own colors, etc. I use react and typescript. I receive an error due to my customization "TypeError: Cannot convert undefined or null to object"

I, firstly, created a customChip component based on Chip component from Material-tailwind :

interface CustomChipProps extends Omit<ChipProps, "color"> { variant?: "filled" | "gradient"; className?: string; value: string; color?: | "primary" | "secondary" | "warning" }

export default function CustomChip(props: CustomChipProps) { return <Chip {...(props as any)} />; }

then I create a baseChip component based on my CustomChip component :

export const BaseChip: React.FC<React.PropsWithChildren<CustomChipProps>> = ( props: React.PropsWithChildren<CustomChipProps> ): JSX.Element => ( <CustomChip variant={props.variant} color={props.color} value={props.value} /> );

on my theme file, i added the chip component, I think the problem is here, my I did an error but i don't know how to custom each part :

chip: { defaultProps: { variant: 'filled', color: 'primary', show: true, size: 'sm', }, valid: { variants: ['filled'], colors: ['primary', 'secondary', 'warning', 'dark'], }, styles: { base: { position: "relative", }, variants: { filled: { primary: { background: 'bg-primary', color: 'text-white', }, secondary: { background: 'bg-secondary', color: 'text-dark', }, }, }, closeButtonColor: { filled: { primary: { color: 'text-white', }, secondary: { color: 'text-dark', }, warning: { color: 'text-white', }, }, }, },

Thank you Kilian`

I appologize in advance if I don't understand exactly how is supposed to be done or couldn't find the proper solution in the docs, feel free to close issue with an answer or a link, but I don't think the input and checkbox components have props to be controlled, the input doesnt have a value prop nor the checkbox has a checked prop.

Any ways to control them? There is neither a prop to pass { ...props } to the inside component as they often are wrapped in a div or a label inside a div, how would we go about this?

In trying to use the Popover component in a Nextjs codebase,

import Popover from '@material-tailwind/react/Popover'
...
<Popover placement='left' ref={targetRef}>
  <PopoverContainer>
    <PopoverHeader>{prop.title}</PopoverHeader>
    <PopoverBody>{prop.description}</PopoverBody>
  </PopoverContainer>
</Popover>

I get the following error in Nextjs:

wait  - compiling...
error - ./node_modules/tippy.js/dist/svg-arrow.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@material-tailwind/react/Popover.js

Nextjs doesn't like it when a package is importing a CSS file from another module. See: https://nextjs.org/docs/messages/css-npm

> Build error occurred
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/react-merge-refs/dist/index.mjs not supported.
Instead change the require of /home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/react-merge-refs/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/@material-tailwind/react/components/Dialog/index.js:1:695)
    at Object.<anonymous> (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/@material-tailwind/react/index.js:1:504)
    at Object.4715 (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:207:18)
    at __webpack_require__ (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/webpack-runtime.js:25:[42](https://github.com/floriaaan/meet-at-cesi/runs/7578053972?check_suite_focus=true#step:5:43))
    at /home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:18:82
    at Function.__webpack_require__.a (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/webpack-runtime.js:103:13)
    at Object.2491 (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:11:21)
    at __webpack_require__ (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/webpack-runtime.js:25:42)
    at __webpack_exec__ (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:378:39)
    at /home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:379:78
    at Function.__webpack_require__.X (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/webpack-runtime.js:190:21)
    at /home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:379:[47](https://github.com/floriaaan/meet-at-cesi/runs/7578053972?check_suite_focus=true#step:5:48)
    at Object.<anonymous> (/home/runner/work/meet-at-cesi/meet-at-cesi/.next/server/pages/auth/login.js:382:3)
    at Object.requirePage (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/server/require.js:[48](https://github.com/floriaaan/meet-at-cesi/runs/7578053972?check_suite_focus=true#step:5:49):12)
    at Object.loadComponents (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/server/load-components.js:58:23)
    at /home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/build/utils.js:584:[52](https://github.com/floriaaan/meet-at-cesi/runs/7578053972?check_suite_focus=true#step:5:53)
    at Span.traceAsyncFn (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/trace/trace.js:79:26)
    at Object.isPageStatic (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/build/utils.js:580:29)
    at execFunction (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2826)
    at execHelper (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2484)
    at execMethod (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2[57](https://github.com/floriaaan/meet-at-cesi/runs/7578053972?check_suite_focus=true#step:5:58)2)
    at process.messageListener (/home/runner/work/meet-at-cesi/meet-at-cesi/node_modules/next/dist/compiled/jest-worker/processChild.js:1:1282)
    at process.emit (node:events:527:28) {
  type: 'Error',
  code: 'ERR_REQUIRE_ESM'
}

I don't even use Dialog component.

Node version: 16.14.2

package.json

"dependencies": {
    "@headlessui/react": "^1.6.4",
    "@heroicons/react": "^1.0.6",
    "@material-tailwind/react": "^1.1.0",
    "@next-auth/prisma-adapter": "^1.0.3",
    "@prisma/client": "^3.15.2",
    "@supabase/supabase-js": "^1.35.3",
    "classnames": "^2.3.1",
    "formik": "^2.2.9",
    "framer-motion": "^6.5.1",
    "next": "12.1.6",
    "next-auth": "^4.5.0",
    "next-pwa": "^5.5.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "yup": "^0.32.11"
  }

Hi,

One of the thing I always need is the required attribute for fields. In MUI, addind a "required" prop also appends an asterisk after the label.

I struggled a bit to be able to append it myself as "required" is not a prop here and I couldn't pass element for the label. The "after" pseudo element is already taken for the focus animation, so the only workaround I found was to use the before element and play with TW classes such as :

 <Input
variant='standard'
label='Téléphone portable'
labelProps={{
   className: "required-input-field-label peer-placeholder-shown:text-base before:content-['*'] before:text-red-500 peer-placeholder-shown:before:left-[148px] before:absolute before:left-[102px] peer-focus:before:left-[102px]"
}}
className='text-base text-grey-800'
/>

.required-input-field-label {
    &:before {
      transition-property: left;
      transition-timing-function: ease-out;
      transition-duration: 150ms;
    }
  }

As you can see, it's pretty ugly because the TW JIT dynamic values only match with the current label length. I think it would be nice to be able to either pass a custom element as label or to support the required attr. and auto add the usual asterisk element. Or just tell me if you have already figured out a way to solve this problem..

Otherwise, happy to get rid of the original cumbersome MUI lib 👍

Expected Behavior

After starting a fresh project with the next.js tailwindCSS starter template and installing the material-tailwind package as per the docs, I created a heading which I expect to be aligned to the left from medium screens and up.

The code used is as follows:

<h1 className="text-center text-3xl md:text-left">Hello</h1>

Current Behavior

Instead I get the text centered at all screen sizes (breakpoints). This happens with multiple components within my fresh application.

Possible Solution

The only way I can get the application to work as intended is to remove the line importing the material tailwind CSS in the _app.js file and keep the tailwindcss/tailwind.css style import.

My _app.js file is as follows:

import Head from 'next/head';
import 'tailwindcss/tailwind.css';
// removing the below line makes the breakpoints work as intended
import '@material-tailwind/react/tailwind.css';

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Head>
                <link
                    href="https://fonts.googleapis.com/icon?family=Material+Icons"
                    rel="stylesheet"
                />
            </Head>
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

Steps to Reproduce (for bugs)

1. npx create-next-app -e with-tailwindcss my-project
2. npm install -D [email protected] [email protected] [email protected]
3. npx tailwindcss init -p
4. npm i -E @material-tailwind/react
5. Import the material CSS file so your _app.js looks like so:

import Head from 'next/head';
import 'tailwindcss/tailwind.css';
import '@material-tailwind/react/tailwind.css';

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Head>
                <link
                    href="https://fonts.googleapis.com/icon?family=Material+Icons"
                    rel="stylesheet"
                />
            </Head>
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

6. In index.js create a component as follows:

export default function Home() {
    return (
            <div>
                <h1 className="text-center text-3xl md:text-left">Hello</h1>
            </div>
    );
}

7. Once you view it in your browser and resize, you can see that text does not realign.

Context

I was watching a live coding session on YT and I saw the programmer run into this problem and not resolve it so I just had a quick look.

Your Environment

• Version used: ^0.3.4
• Browser Name and version: Chrome version 91.0.4472.114
• Operating System and version (desktop or mobile): Mac
• Link to your project:

Hello, currently the documentation is a bit too confusing(kinda empty) about how to use the theming ficture of the librarie, can someone explain what are the propertys i need to pass on the theme vaue object? thx.

Will Material Tailwind get full support for nextJS 13 and Reacts server components? To utilise server components and MTW we would need to make every component as a client component.

since material-tailwind components make use of the web animations API (which seems to be unsupported by jsdom) I think quite a few users might run into issues when testing interactions with components that use this component library.

Maybe it would make sense to include a little section about how to set up get jest working with material-tailwind?

E.g. by hinting to https://www.npmjs.com/package/jsdom-testing-mocks#mock-web-animations-api (no affiliation, but seems to work for me)

I like the ease of using this with Remix. So far, so good.

Would like to request: DateField, TimeField (and combo of those). Also would love to see Calendar Picker (bonus: with Date Range)