Don't use group-* classes for transitions in dialog anymore

Author: philipp-spiess

src/blog/vanilla-js-support-for-tailwind-plus/index.mdx

@@ -137,13 +137,13 @@ You can even build something as sophisticated as a custom [command palette](http
 </button>
 
 <!-- [!code highlight:2] -->
-<el-dialog class="group/dialog">
+<el-dialog>
   <dialog id="dialog" class="backdrop:bg-transparent">
-    <div class="fixed inset-0 bg-gray-500/25 transition-opacity group-data-closed/dialog:opacity-0 group-data-enter/dialog:duration-300 group-data-enter/dialog:ease-out group-data-leave/dialog:duration-200 group-data-leave/dialog:ease-in"></div>
+    <el-dialog-backdrop class="fixed inset-0 bg-gray-500/25 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></div>
 
     <div tabindex="0" class="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20">
       <!-- [!code highlight:3] -->
-      <el-dialog-panel class="mx-auto block max-w-3xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all group-data-closed/dialog:scale-95 group-data-closed/dialog:opacity-0 group-data-enter/dialog:duration-300 group-data-enter/dialog:ease-out group-data-leave/dialog:duration-200 group-data-leave/dialog:ease-in">
+      <el-dialog-panel class="mx-auto block max-w-3xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in">
         <el-command-palette class="divide-y divide-gray-100">
           <div class="grid grid-cols-1">
             <input type="text" autofocus placeholder="Search..." class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm" />