[Button] Apply className as the last class to button elements

[michaelperrin]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/gt78v7

Steps:

1. Create a CSS class or add Tailwind CSS to your project
2. Import the Button component
3. Use it with a className attribute, with a Tailwind CSS class value (example: ml-5), or the class defined in the CSS file.

In the Codesandbox I provided, the margin doesn't get applied to the button, as Material UI defines margin properties on the last class element.

Note that this issue was already reported here, but got closed.

Current behavior

The class is the penultimate one in the list of classes applies to the button. As a result, the style may not be applied to the button.

Expected behavior

The class added as a className attribute should be applied last in the list of classes for the button, so that its styles get applied to the button.

Context

I try to apply some styles from Tailwind CSS to a button, which can't be easily accomplished as Tailwind CSS styles get overridden by the ones added by Material UI on the button's last class.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    npm: 10.1.0 - /usr/local/bin/npm
    pnpm: 9.5.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.90
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: 11.13.3 => 11.13.3 
    @emotion/styled: 11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  6.1.2 
    @mui/material: 6.1.2 => 6.1.2 
    @mui/private-theming:  6.1.2 
    @mui/styled-engine:  6.1.2 
    @mui/system:  6.1.2 
    @mui/types:  7.2.17 
    @mui/utils:  6.1.2 
    @types/react: 18.2.38 => 18.2.38 
    react: ^18.0.0 => 18.3.1 
    react-dom: ^18.0.0 => 18.3.1 
    typescript: 4.4.4 => 4.4.4 

Browser used: Firefox

Search keywords: button,className

[alelthomas]

You need to add the important option to your tailwind.config.js. Most CSS classes used by Material UI have a specificity of 1 but there are exceptions.

You can follow these steps to make sure Tailwind reaches all elements: https://mui.com/material-ui/integrations/interoperability/#tailwind-css

[michaelperrin]

Thanks @alelthomas for your help!
Nice to know that it is documented already.

I didn't see this part of the docs, but still used important option indeed. However I thought it was some kind of hacky way to solve it.
I checked the injectFirst option on StyledEngineProvider too, with no luck.

I guess that having custom classes at the end of the list of classes would be a solution that would make sense, avoiding quite some "aha" moments! But I am not sure about possible breaking changes that would involve.

So feel free to close this issue if you think that it's not something that would make sense for MUI.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@michaelperrin How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.