Tailwind 背景不适用于对话框元素

Question

<dialog>我正在尝试在 NextJS 应用程序的 React 组件后面添加背景。我正在使用 Tailwind v3.3.2，所有其他样式都正确应用，但 的样式backdrop:bg-gray-500没有在浏览器中应用任何样式。

我编写了一个 React 组件，它呈现以下内容：

      <dialog className="backdrop:bg-gray-50" open={true}>
        This is a dialog
      </dialog>

我希望这会在元素后面添加灰色背景，但没有任何内容应用于该元素。

我浏览了 Tailwind 文档，这看起来像我尝试过的：https ://tailwindcss.com/docs/hover-focus-and-other-states#dialog-backdrops

Answer 1

open根据MDN 文档，使用该属性时不会显示本机背景元素：

如果<dialog>使用该属性打开a open，则它将是非模态的。

因此，为了显示背景，我们需要在元素的 JavaScript 表示.showModal()上使用该方法HTMLDialogElement，根据MDN 文档：

CSS::backdrop伪元素可用于设置<dialog>当对话框显示时显示在元素后面的背景的样式HTMLDialogElement.showModal()。

function App() {
  const dialog = React.useRef();
  
  React.useLayoutEffect(() => {
    dialog.current.showModal();
  }, [dialog]);
  
  return (
    <dialog className="backdrop:bg-gray-50" ref={dialog}>
      This is a dialog
    </dialog>
  );
}
ReactDOM.createRoot(document.getElementById('app')).render(<App/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="app"></div>

Content