[RFC] Base UI Tailwind plugin

[siriwatknp]

What's the problem? 🤔

Currently, the only option to style the component with tailwind is to use slotProps as a callback:

import Option from '@mui/base/Option';

<Option
  className="flex items-center …"
  slotProps={{
    root: (ownerState) => ({
      className: ownerState.selected ? 'text-bold bg-blue-100' : '',
    })
  }}
/>

There should be an option for developers who want to keep all the styles in the root className. By keeping Tailwind experience, we leverage the tools built around its ecosystem (e.g. VS code plugin that wraps className).

This is similar to Headless UI Tailwind experience.

What are the requirements? ❓

Let developers have almost the same experience as Headless UI so that they can start using Base UI without too many things (like the slotProps and ownerState) to learn.

What are our options? 💡

No response

Proposed solution 🟢

A new package (@mui/base-tailwind) with the same API as the Headless UI (https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-tailwindcss/src/index.ts).

The difference is that the Base UI plugin will match the className of Base UI instead of using data attributes.

Here is what it looks like with the plugin:

import Option from '@mui/base/Option';

<Option
-  className="flex items-center …"
-  slotProps={{
-    root: (ownerState) => ({
-      className: ownerState.selected ? 'text-bold bg-blue-100' : '',
-    })
-  }}
+ className="flex items-center … ui-selected:text-bold ui-selected:bg-blue-100"
/>

Resources and benchmarks 🔗

https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-tailwindcss/README.md

[neviaumi]

How can I do some class that depends on the status?

Let say I want add some class when the button disabled Current approach

<Button slotProps={{root:(state) => state.disabled ? clsx() : clsx() }} />

Proposed

?????

[siriwatknp]

How can I do some class that depends on the status?

It will be:

<Button className="ui-disabled:opacity-50 ui-disabled:text-grey-400" />

[mnajdova]

After adding few Tailwind CSS demos, I feel like this is really important. The main reason is that, we can't use class names for the same CSS property more than once, so soon after you want to add some state dependent classes, you need to group the classes based on CSS property, for e.g.

-<Slider slotProps={{ root: { className: 'text-purple-500' }}} />
+<Slider slotProps={{ root: ({ disabled }) => ({ className: `${disabled ? 'text-slate-200 : 'text-purple-500}` }) }}} />

Once there are many classes, this becomes hard to maintain.

One thing to keep in mind is that all of the state classes, apart from the global ones depend on the component where they are used. For e.g. ui-mark-label-active would need to be converted to MuiSlider-markLabelActive.