diff --git a/demo/components.html b/demo/components.html
index 963fa0f8..ecec20cd 100644
--- a/demo/components.html
+++ b/demo/components.html
@@ -451,7 +451,7 @@ <h3 class="text-xl font-bold">Default usage</h3>
                 </div>
                 <div class="flex flex-col gap-3">
                     <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 1
@@ -465,7 +465,7 @@ <h3 class="text-xl font-bold">Default usage</h3>
     </div>
 </details>
                     <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 2
@@ -481,7 +481,7 @@ <h3 class="text-xl font-bold">Default usage</h3>
                 </div>
                 <div class="flex flex-col gap-3">
                     <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3" name="single"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3" name="single"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Single open 1
@@ -495,7 +495,7 @@ <h3 class="text-xl font-bold">Default usage</h3>
     </div>
 </details>
                     <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3" name="single"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3" name="single"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Single open 2
@@ -519,7 +519,7 @@ <h3 class="text-xl font-bold">Accordion with custom icon</h3>
                     </div>
                 </div>
                 <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 1
@@ -536,7 +536,7 @@ <h3 class="text-xl font-bold">Accordion with custom icon</h3>
     </div>
 </details>
                 <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 2
@@ -562,7 +562,7 @@ <h3 class="text-xl font-bold">Accordion without icon</h3>
                     </div>
                 </div>
                 <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 1
@@ -574,7 +574,7 @@ <h3 class="text-xl font-bold">Accordion without icon</h3>
     </div>
 </details>
                 <details
-    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
+    class="group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto rounded border px-3"
 >
     <summary class="flex items-center py-3.5 cursor-pointer list-none font-bold">
         Question 2
diff --git a/resources/views/components/accordion/accordion.blade.php b/resources/views/components/accordion/accordion.blade.php
index e958aa23..65cfc10b 100644
--- a/resources/views/components/accordion/accordion.blade.php
+++ b/resources/views/components/accordion/accordion.blade.php
@@ -42,7 +42,7 @@
 @slots(['label', 'content', 'icon'])
 
 <details
-    {{ $attributes->twMerge('group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-200 open:details-content:h-auto') }}
+    {{ $attributes->twMerge('group/details details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] supports-[transition:discrete]:details-content:transition-discrete details-content:duration-200 open:details-content:h-auto') }}
 >
     <summary {{ $label->attributes->twMerge('flex items-center font-medium py-3.5 cursor-pointer list-none') }}>
         {{ $label }}