use tailwind v4 compatible classes

Author: mythz

src/components/Autocomplete.vue

@@ -23,7 +23,7 @@
             </svg>
         </button>
 
-        <ul v-if="expanded" class="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-black py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+        <ul v-if="expanded" class="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-black py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
             @keydown="keyDown" :id="`${id}-options`" role="listbox">
             <li v-for="option in filteredValues" 
                 :class="[option === active ? 'active bg-indigo-600 text-white' : 'text-gray-900 dark:text-gray-100', 'relative cursor-default select-none py-2 pl-3 pr-9']"

src/components/ModalDialog.vue

@@ -2,7 +2,7 @@
 <div :id="id" :data-transition-for="id" @mousedown="close" class="relative z-10"
     :aria-labelledby="`${id}-title`" role="dialog" aria-modal="true">
 
-    <div :class="['fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity', transition1]"></div>
+    <div :class="['fixed inset-0 bg-gray-500/75 transition-opacity', transition1]"></div>
 
     <div class="fixed inset-0 z-10 overflow-y-auto">
         <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">

src/components/TagInput.vue

@@ -33,7 +33,7 @@
                 </div>
             </div>
         </button>
-        <ul v-if="expanded && filteredValues.length" class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-black py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+        <ul v-if="expanded && filteredValues.length" class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-black py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
             @keydown="keyDown" :id="`${id}-options`" role="listbox">
             <li v-for="option in filteredValues.slice(0,maxVisibleItems)"
                 :class="[option === active ? 'active bg-indigo-600 text-white' : 'text-gray-900 dark:text-gray-100', 'relative cursor-default select-none py-2 pl-3 pr-9']"

src/components/css.ts

@@ -58,7 +58,7 @@ export const grid = {
     getGrid4Class(style:TableStyleOptions="stripedRows") { return hasTableStyle(style,"whiteBackground")
         ? ""
         : hasTableStyle(style,"fullWidth")
-            ? "overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5"
+            ? "overflow-hidden shadow-sm ring-1 ring-black/5"
             : grid.grid4Class },
     getTableClass(style:TableStyleOptions="stripedRows") { return hasTableStyle(style,"fullWidth") || hasTableStyle(style,"verticalLines")
         ? "min-w-full divide-y divide-gray-300"
@@ -89,7 +89,7 @@ export const grid = {
      grid2Class: "",
      //original: inline-block min-w-full py-2 align-middle md:px-6 lg:px-8
     grid3Class: "inline-block min-w-full py-2 align-middle",
-    grid4Class: "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg",
+    grid4Class: "overflow-hidden shadow ring-1 ring-black/5 md:rounded-lg",
     tableClass: "min-w-full divide-y divide-gray-200 dark:divide-gray-700",
     theadClass: "bg-gray-50 dark:bg-gray-900",
     tableCellClass: "px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400",