Using MUI with Tailwindcss (and NextJS). How to fix transparent button problem while still keep using tailwindcss preflight

[ayush0402]

I am building a project over a NextJS template which uses TailwindCSS. The thing is I want to use MUI components with it but when I tried adding a button I get the transparent button (unexpected behavior when using Tailwind, and MUI in NextJS Project (White Button error)).

I am aware of the existing solutions which involves setting preflight to false under corePlugins, but doing that in my case breaks the template's layout. The template already uses tailwindcss deeply with extensions over its base preflight. I did go through similar discussions but most of the solutions worked around removing the preflight or were not descriptive enough.

I want to know if there is any effective way to fix problems with MUI components while still not completely removing tailwind's preflight. If you can share examples of how you did it, that will be great.

(If you think there is any comparable react components library which will not conflict with tailwind's preflight please feel free to share.)

[jonnguyen12]

I have the same problem, tailwind is so good and the preflight must be set, otherwise it won't work as expected.
RadixUI, ui.shadcn.com or any headless, unstyled components should work fine with Tailwind.

I really like Mantine UI and MUI Joy so for it to work, I'm picking manually what css should be in my global.css from preflight file here.

preflight.css

Awaiting for better solution from community lol.

[Eric78o]

I am aware of the existing solutions which involves setting preflight to false under corePlugins, but doing that in my case breaks the template's layout. The template already uses tailwindcss deeply with extensions over its base preflight. PrepaidGiftBalance Mastercard

[jonnguyen12]

Yeah, it's a dilemma. You can't have everything ;)
You can take a look at scoped tailwind preflight in this post. I have not tried it.
https://levelup.gitconnected.com/scope-tailwind-css-base-styles-using-custom-preflight-34f71952e070

[BhaskaranR]

Hi, we are in the process of migrating from mui to shadcn, radix page by page. it is a nextjs application can we have both running till it is migrated fully.

[jacoblsdev]

I had same issue, I solved it by using Prefix and coreplugin-preflight. Below is my tailwind config. This will work.

module.exports = {
  prefix: 'tw-',
  mode: 'jit', // Add this line to enable Just-in-Time (JIT) mode
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'], // Use the new `content` option
  theme: {
    extend: {}
  },
  plugins: [],
  corePlugins: {
    preflight: false
  }
}

Note: if possible, Change buttons(Where you are using tailwind css) with anchor tag after adding this configuration.

[Joshbwr]

A work around if needed.

1. Make sure you have preflight:false and important set.

tailwind.config.js
{
  corePlugins: {
     preflight: false,
  },
    important: "#__next",
}

2. Create your own css-reset.css file and add the contents of tailwinds preflight. Remove these styles.

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent; 
  background-image: none; 
}

3. import css reset file into globals.css

@import "./css-reset.css";