Comments (2)
Hey!
The problem you are seeing is that the ui-open
also applies because the Dialog
also exposes that information. To solve this, you can explicitly mark the bg-white
with ui-not-open
:
- <Listbox.Button className="rounded-t-md rounded-b-md ui-open:rounded-b-none bg-white ui-open:bg-sky-300">
+ <Listbox.Button className="rounded-t-md rounded-b-md ui-open:rounded-b-none uit-not-open:bg-white ui-open:bg-sky-300">
It's a bit of an unfortunate situation, but this should solve your issue.
If this still won't work, then you can fallback to using JS based values using render props: https://headlessui.com/react/listbox#using-render-props
We are aware of this inconvenience, and to handle this in a more explicit and reliable way we made the following changes to the next versions of Headless UI and Tailwind CSS (both are currently in an alpha stage, but wanted to share this with you already):
- In Headless UI v2, we expose these values as data attributes directly, this means that you will be able to use
data-[open]:…
directly. - In Tailwind CSS v4, data attributes will be available as
data-open:…
which is easier to type thandata-[open]:…
. - If you combine these with named
group
classes (https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups) then you can add a named group to thelistbox
and handle it explicitly:
This means that eventually, you will be able to do something like this to explicitly target the correct data:
<Listbox as="div" className="group/my-listbox">
<ListboxButton className="group-data-open/my-listbox:…" />
</Listbox>
But for now, explicitly adding ui-not-open:bg-white
or using the render prop should do the trick.
Hope this helps!
from headlessui.
@RobinMalfait truly, thank you for taking the time for such a comprehensive response! ui-not-open
class indeed did the trick and the inputs within the dialog correctly get styled only when they are open. Appreciate the sneak peek to future features as well!
Would you perhaps have at hand any online codesandbox where @headlessui/tailwindcss
plugin is working alongside @headlessui/react
? It would be a hugely helpful asset to make online demos of HeadlessUI components for my team.
from headlessui.
Related Issues (20)
- Opening Healdess UI Dialog (Modal) via another Dialog (Modal) closes the previous Dialog (Modal) automatically? HOT 2
- [DOCS]: ListboxOptions change from v1.7 to v2.0 is missing active HOT 1
- [DOCS]: Fieldset/Select example styling is off (Chrome) HOT 1
- Menu items don't get focus when menu is static HOT 3
- Combobox's `onChange` also fires on no change HOT 3
- [DOCS]: Help migrating to v2 HOT 3
- Weird tailwind class name injection in V2
- Combobox overrides HTML styles with overflow:hidden when menu opened HOT 6
- V2 Bug - Disabled checkbox selected when navigating by tab HOT 1
- Checkbox transition stops working if the checked state is managed externally HOT 1
- [DOCS]: Listbox states that "Enter" on button will open the listbox HOT 1
- [DOCS]: Listbox / Combobox anchor max height
- MenuItems State Not Updating Without Button Data in HeadlessUI v2 - Worked Fine in v1
- Dropdown Menu hides scrollbar and disables scrolling on open HOT 1
- [DOCS]: PopoverPanel `modal` incorrectly says default=true and makes others inert HOT 2
- Transition - current component <Transition.Child /> is rendering a "Fragment". HOT 2
- Button onClick is not triggered within Dialogs HOT 1
- Unable to click scrollbar of combobox options when being displayed inside a Dialog HOT 4
- Popover panel incorrectly closes when user tabs with keyboard HOT 1
- Scrolling with long content doesn't not work on iOS after outside click
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from headlessui.