question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@headlessui/tailwindcss does not work with latest version 1.6.7

See original GitHub issue

I am using @headlessui/vue@1.6.7 and @headlessui/tailwindcss@0.1.0

In that version the code that adds the data-headlessui-state attribute to the dom is commented out: https://github.com/tailwindlabs/headlessui/blame/0bdd4b472e6b8f2af092f0a839d00b9077bfb923/packages/@headlessui-vue/src/utils/render.ts#L95-L108

(I checked and it is the same for @headlessui/react@1.6.7)

So the variants generated by the tailwindcss plugin are not applied. 😦 Took me quite a while to find this out.

Was that done on purpose? In that case a big fat warning should be displayed in the readme.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5

github_iconTop GitHub Comments

2reactions
RobinMalfaitcommented, Sep 7, 2022

Hey! This is now documented because we released v1.7 and updated docs yesterday, after the original question was posted 👍

0reactions
aariacarterweircommented, Sep 7, 2022

Oh sweet - so it works now?

On Wed, 7 Sep 2022 at 5:34 pm, Robin Malfait @.***> wrote:

Hey! This is now documented because we released v1.7 and updated docs yesterday, after the original question was posted 👍

— Reply to this email directly, view it on GitHub https://github.com/tailwindlabs/headlessui/issues/1825#issuecomment-1239018671, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHKFELNH447NSZJ7UDEEXLV5BAO7ANCNFSM6AAAAAAQFTIVRI . You are receiving this because you commented.Message ID: @.***>

– Sent from Gmail Mobile

Read more comments on GitHub >

github_iconTop Results From Across the Web

Regression: No transitions on open dialog [v1.6.5] · Issue #1607
Given this, I am wondering if there is a (Headless UI internal) interaction between whatever's tracking the "open" state for both the Button ......
Read more >
Headless UI v1.6, Tailwind UI team management, Tailwind ...
The problem with this approach is that if you had a long dialog that required scrolling, your overlay would sit on top of...
Read more >
Headless UI - Unstyled, fully accessible UI components
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. React Vue. Menu (Dropdown) · Listbox (Select).
Read more >
@headlessui/vue - npm
A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS. Total Downloads ...
Read more >
DropDown and ListBox don't work correctly (Next.js + ...
I have issue with dropdown menu. When I click dropdown menu opens and close immediately. I've installed TailwindCSS ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found