[Autocomplete][docs] The Tailwind code demo doesn't include item focus styles

[timbarclay]

Related page

https://mui.com/base-ui/react-autocomplete/

Kind of issue

Missing information

Issue description

The Tailwind autocomplete demo has visible focus on selected items, i.e. if you hover an item or used the up/down keys, items are visibly focused.

However, if you copy the code from the code sample into a project, or if you open the linked codesandbox, those visible focus states don't work and there's no visible feedback about which item is focused.

From the devtools, it looks like there are some extra css rules applied to the in-page demo that aren't in the code sample.

Context

I'm trying to use the base-ui autocomplete component with Tailwind in the way demonstrated on the page.

Search keywords: tailwind focus autocomplete base-ui

Search keywords:

[mj12albert]

@timbarclay Thanks for reporting this ~ for those states we added custom static variants via Tailwind plugins, you can refer to the tailwind config for the demos here: https://github.com/mui/material-ui/blob/master/docs/tailwind.config.js

[mj12albert]

We could update the CSB/Stackblitz creation to also copy the tailwind config if it's a tailwind demo

I'm not sure how to best communicate this for someone just copying and pasting the source though 🤔 CC @colmtuite @michaldudak @samuelsycamore

[colmtuite]

I've been testing out React Aria the past few days, just to get a feel for their new Components product. They mention the Tailwind config in a lot of places throughout the docs and examples.
https://react-spectrum.adobe.com/react-aria/examples/user-combobox.html#tailwind-config

It feels quite cumbersome to me, compared to plain CSS demos which are just copy/paste. But I guess showing the config in the docs would be the right way to go.

[timbarclay]

I think at the very least having a page that explains that before copying any of the Tailwind code samples, you need to make sure you have certain things set up in your config and making sure that page is linked from all the places where it gives those samples. I looked around to find something like that I didn't see anything.

[colmtuite]

Yep I agree. I found https://mui.com/base-ui/guides/working-with-tailwind-css/ and https://mui.com/base-ui/getting-started/customization/ but I agree there should be more in-depth instructions on all the requirements.

[CelestialWorthy]

I did the hovering part here sandbox but not the moving up and down using the keyboard arrow keys part, do you suggest that i use the onKeyDown handler or are there other ways ?

[michaldudak]

This issue is about mui.com content. It's not relevant to the new Base UI docs, so I'm moving it back to the Core repo.