mui / mui/base-ui

[RFC] Base UI Tailwind plugin

Open
#22 6 comments 22 reactions 2 assignees Claimed by @michaldudak View on GitHub
RFC scope: all components type: new feature
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

### What's the problem? 🤔

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

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

({
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](https://headlessui.com/react/listbox#using-data-attributes) 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:

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

({
- 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.