[RFC] Base UI Tailwind plugin
- 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
Assessment
This issue has not been assessed yet.