MUI Chip comopnent does not support proper tailwind CSS styling

[human-coder-mj]

• Tailwind version : v4.1.12

• Build Tool version : @tailwindcss/[email protected] ; [email protected]

• Node.js version : v22.0.0

• Browser : Chrome

• operating system : macOS , Windows

Issue description:-

While using Tailwind css to provide color to the text inside the Chip Componet, below mentioned are the issues that occurs.

1. First Chip component is not initially accepting the tailwind css text-[color] property, to get it accepted we have to mark it as important eg:- !text-yellow

2. Second while using the important notation, there is a priority issue. When using text color for light and dark mode simulataneously and marking both the text colors for light and dark mode as important, eg :- className='!text-fuchsia-400 dark:!text-yellow-300' , the priority is given to color for dark mode which lets the color in dark mode to also appear in light mode.

• Dark Mode

• Light Mode

• Code.

import Chip from '@mui/material/Chip';
import LocalOfferIcon from '@mui/icons-material/LocalOffer';
<Chip 
label="React"
icon={<LocalOfferIcon/>}
size='small'
variant='outlined'
className='!rounded-full !bg-transparent !text-fuchsia-400 dark:!text-yellow-300'
/>

[wongjn]

Seems like a conflict in CSS. MUI ships it's own CSS which is seemingly taking priority. They do have some documentation on Tailwind v3 integration, perhaps you can take some advice from this. Though you will need to adapt some steps for v4 (if that is what you are using).

[human-coder-mj]

What steps?

[wongjn]

The steps that would not be relevant for v4, i.e. the steps mentioning the tailwind.config.js file, etc.