Using material tailwind - tabs I am seeing weird behavior that does not match the example page

Question

As mentioned in the title I am seeing weirdness when i use material tailwind. When switching between tabs I see like an artifact or something at the top of the page. Also, the styles do not match which makes me think i am missing some css in my implementation. See the video to see the issue.

Documentation: https://www.material-tailwind.com/docs/react/tabs#tabs

https://drive.google.com/file/d/1cQz5GTYjBvtUL6T5dOOKucqTgHs3O3Mb/view?usp=sharing

Answer 1

In order to get a code sample I created a new react project (maybe not necessary but seemed like the best way). In the process of setting up that project I found my mistake. Basically I wasn't following the tailwind material steps correctly. I was missing some additional configuration in the tailwind.config file. Specifically wrapping the export in the mt function as documented in the below link. https://www.material-tailwind.com/docs/react/guide/cra

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

module.exports = withMT({
 content: ["./src/**/*.{js,jsx,ts,tsx}"],
 theme: {
   extend: {},
 },
 plugins: [],
})