Using Headless UI CSS modifiers inside Nuxt app

[sergeykorobeynikov]

For what version of Nuxt UI are you asking this question?

v2.x

Description

Is there any way to use Headless UI CSS modifiers in a Nuxt app, ui-open, to control the set of css classes?

<script setup lang="ts">
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
</script>

<template>
  <div>
    <Disclosure>
      <DisclosureButton>
        <div class="text-red-500 ui-open:text-cyan-700">Button</div>
      </DisclosureButton>
      <DisclosurePanel>Text</DisclosurePanel>
    </Disclosure>
  </div>
</template>

[benjamincanac]

We're registering the @headlessui/tailwind plugin already: https://github.com/nuxt/ui/blob/dev/src/tailwind.ts#L47 so you should be able to use those ui-open modifiers.

[sergeykorobeynikov]

Yes, it works! I apologize, I wrote a question with an example and did not check it, but it works!

In fact, the problem was in the following set:

<div class="rounded-xl ui-open:rounded-none ui-open:rounded-t-xl">...</div>