[Bug]: On Tailwind CSS v2.2.0, dialog's overlay appears over the top of the dialog box

[gavrichards]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.2.0

What browser are you using?

Firefox

Reproduction repository

I can't because it's commercially sensitive

Describe your issue

I've updated Tailwind CSS in my project to 2.2.0 today and noticed that whenever I open a modal dialog, after the brief transition effect, the 'fixed' background overlay then sits over the top of the dialog box.

The overlay has an onClick event handler to hide the dialog, which means currently anywhere you click in the dialog box, it is then closed.

The only things that are still sitting over the top of the overlay are items within the dialog which have "absolute" or "relative" classes.

Sorry I'm unable to link to a repo or video and don't currently have time to create a separate demo repo, but code is essentially identical to this example: https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/pages/dialog/dialog.tsx

[nasa8x]

Vue package also has the same situation

[jordanworner]

It looks like the issue is caused by changes to the transform class in JIT mode, it no longer adds a transform class with default values in it.

Adding relative z-20 should be enough to fix it.

The change is detailed in the release notes under Simplified transform and filter composition

[gavrichards]

@adamwathan are you aware of this issue in relation to the latest Tailwind release? Not sure if it needs to be considered for the next release of Tailwind, or if it's something that needs to be fixed with an update to Headless UI. Thanks

[adamwathan]

Hey! Yeah so this is because the transform class creates a new stacking context, and since it is applied permanently to the foreground element it always has a new stacking context, even though the individual transforms are only applied conditionally during the transition.

One quick fix is to just replace transform with relative on the foreground element. We're also going to push out v2.2.2 in a minute that will re-introduce the transform class just to create the stacking context even though it's no longer really necessary, just so people's existing stuff doesn't break in this way.

[gavrichards]

Super, thanks @adamwathan, really appreciate you taking at look at this one so quickly :)

[gavrichards]

Thanks - confirmed that either swapping transform for relative does the trick, or upgrade to Tailwind CSS 2.2.2 which is out now.

[mikecousins]

I'm still seeing this and I don't even have a <Transform />. I'm just using the code from the HeadlessUI documentation.

Here's a sandbox: https://codesandbox.io/s/suspicious-water-2tono?file=/src/App.tsx

Any idea what's going wrong?

[frontshift]

@mikecousins you need to set the the transform class on your dialog content div or position it relatively to create the stacking context: https://codesandbox.io/s/billowing-pine-sju8s?file=/src/Modal.tsx:527-535

For me the issue was that the css variable --tw-transform was undefined because I imported the Tailwind utilities directive from another file

// global.css
@tailwind base;
@tailwind components;

@import './fonts.css';
@import './utilities.css'; // this file has some custom utilities but includes @tailwind utilities

... 

Apparently this doesn't work and the 3 directives need to be declared in the same file:

// global.css
@tailwind base;
@tailwind components;
@tailwind utilities; // needs to be included here

@import './fonts.css';
@import './utilities.css'; // this file has some custom utilities but includes @tailwind utilities

... 

With this in place the transform property was set and the stacking context created.