如何仅使用类为dialog元素实现@starting-style格式化效果？

问题背景 #

我想用Tailwind CSS实现以下原生CSS的dialog效果，包括过渡动画和关闭时的起始样式（通过@starting-style实现）：

dialog {
  border: unset;
  border-radius: 1.25rem;

  &,
  &::backdrop {
    opacity: 0;
    transition: all 0.15s;
  }
  &::backdrop {
    background-color: black;
  }
  
  /* Open */
  opacity: 1;
  &::backdrop {
    opacity: 0.5;
  }

  /* Close */
  @starting-style {
    &,
    &::backdrop {
      opacity: 0;
    }
  }
}

目前我已经用Tailwind类实现了大部分样式，但@starting-style还需要依赖单独的CSS块，希望完全不写单独CSS，仅通过Tailwind类实现完整效果。

解决方案 #

可以利用Tailwind的自定义选择器语法，直接在class属性中嵌入@starting-style规则。以下是完整的实现代码：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<button
  commandfor="my-dialog" command="show-modal"
  class="py-1 px-2 rounded-md bg-sky-500 text-white"
>Open Dialog</button>

<dialog
  id="my-dialog"
  class="
    opacity-100 [::backdrop]:opacity-50 [&,&::backdrop]:transition-all [&,&::backdrop]:duration-300
    fixed top-1/2 left-1/2 -translate-1/2 border-0 rounded-xl
    space-y-2 py-2 px-4 [::backdrop]:bg-black
    [@starting-style>&&,&&::backdrop]:opacity-0
  "
>
  <p>Hello World</p>
  <button
    commandfor="my-dialog" command="close"
    class="py-1 px-2 rounded-md bg-sky-500 text-white"
  >Close</button>
</dialog>

关键语法说明 #

• [@starting-style>&&,&&::backdrop]:opacity-0：这部分是核心，Tailwind会将其编译为对应的CSS规则，等价于原生CSS中的@starting-style逻辑。其中&&代表当前dialog元素，确保选择器优先级正确，无需单独编写CSS块。
• 其他类已覆盖原生CSS的所有样式：border-0替代border: unset，rounded-xl对应border-radius: 1.25rem，过渡、定位、背景色等样式也全部通过Tailwind类实现。

内容的提问来源于stack exchange，提问作者rozsazoltan