added missing css class names

presets.js

@@ -37,7 +37,25 @@ module.exports = {
       {
         pattern: /^right-/,
         variants: ['ltr', 'rtl'],
-      }
+      },
+      {
+        pattern: /^w/,
+      },
+      {
+        pattern: /^h/,
+      },
+      {
+        pattern: /^inset/,
+      },
+      {
+        pattern: /^top/,
+      },
+      {
+        pattern: /^bottom/,
+      },
+      {
+        pattern: /^translate/,
+      },
     ],
    
     darkMode: 'class', // or 'media' or 'class',

public/css/app.css

@@ -2139,6 +2139,42 @@ button, input, optgroup, select, textarea{
   bottom: 8.5rem;
   left: 8.5rem;
 }
+.inset-1\/2{
+  top: 50%;
+  right: 50%;
+  bottom: 50%;
+  left: 50%;
+}
+.inset-1\/3{
+  top: 33.333333%;
+  right: 33.333333%;
+  bottom: 33.333333%;
+  left: 33.333333%;
+}
+.inset-2\/3{
+  top: 66.666667%;
+  right: 66.666667%;
+  bottom: 66.666667%;
+  left: 66.666667%;
+}
+.inset-1\/4{
+  top: 25%;
+  right: 25%;
+  bottom: 25%;
+  left: 25%;
+}
+.inset-2\/4{
+  top: 50%;
+  right: 50%;
+  bottom: 50%;
+  left: 50%;
+}
+.inset-3\/4{
+  top: 75%;
+  right: 75%;
+  bottom: 75%;
+  left: 75%;
+}
 .inset-full{
   top: 100%;
   right: 100%;
@@ -2625,6 +2661,30 @@ button, input, optgroup, select, textarea{
   left: 8.5rem;
   right: 8.5rem;
 }
+.inset-x-1\/2{
+  left: 50%;
+  right: 50%;
+}
+.inset-x-1\/3{
+  left: 33.333333%;
+  right: 33.333333%;
+}
+.inset-x-2\/3{
+  left: 66.666667%;
+  right: 66.666667%;
+}
+.inset-x-1\/4{
+  left: 25%;
+  right: 25%;
+}
+.inset-x-2\/4{
+  left: 50%;
+  right: 50%;
+}
+.inset-x-3\/4{
+  left: 75%;
+  right: 75%;
+}
 .inset-x-full{
   left: 100%;
   right: 100%;
@@ -3013,6 +3073,30 @@ button, input, optgroup, select, textarea{
   top: 8.5rem;
   bottom: 8.5rem;
 }
+.inset-y-1\/2{
+  top: 50%;
+  bottom: 50%;
+}
+.inset-y-1\/3{
+  top: 33.333333%;
+  bottom: 33.333333%;
+}
+.inset-y-2\/3{
+  top: 66.666667%;
+  bottom: 66.666667%;
+}
+.inset-y-1\/4{
+  top: 25%;
+  bottom: 25%;
+}
+.inset-y-2\/4{
+  top: 50%;
+  bottom: 50%;
+}
+.inset-y-3\/4{
+  top: 75%;
+  bottom: 75%;
+}
 .inset-y-full{
   top: 100%;
   bottom: 100%;
@@ -3353,6 +3437,24 @@ button, input, optgroup, select, textarea{
 .top-32\.5{
   top: 8.5rem;
 }
+.top-1\/2{
+  top: 50%;
+}
+.top-1\/3{
+  top: 33.333333%;
+}
+.top-2\/3{
+  top: 66.666667%;
+}
+.top-1\/4{
+  top: 25%;
+}
+.top-2\/4{
+  top: 50%;
+}
+.top-3\/4{
+  top: 75%;
+}
 .top-full{
   top: 100%;
 }
@@ -3953,6 +4055,24 @@ button, input, optgroup, select, textarea{
 .bottom-32\.5{
   bottom: 8.5rem;
 }
+.bottom-1\/2{
+  bottom: 50%;
+}
+.bottom-1\/3{
+  bottom: 33.333333%;
+}
+.bottom-2\/3{
+  bottom: 66.666667%;
+}
+.bottom-1\/4{
+  bottom: 25%;
+}
+.bottom-2\/4{
+  bottom: 50%;
+}
+.bottom-3\/4{
+  bottom: 75%;
+}
 .bottom-full{
   bottom: 100%;
 }
@@ -4409,12 +4529,6 @@ button, input, optgroup, select, textarea{
 .-left-full{
   left: -100%;
 }
-.top-1\/4{
-  top: 25%;
-}
-.top-1\/2{
-  top: 50%;
-}
 .isolate{
   isolation: isolate;
 }
@@ -7300,6 +7414,51 @@ button, input, optgroup, select, textarea{
 .h-32\.5{
   height: 8.5rem;
 }
+.h-1\/2{
+  height: 50%;
+}
+.h-1\/3{
+  height: 33.333333%;
+}
+.h-2\/3{
+  height: 66.666667%;
+}
+.h-1\/4{
+  height: 25%;
+}
+.h-2\/4{
+  height: 50%;
+}
+.h-3\/4{
+  height: 75%;
+}
+.h-1\/5{
+  height: 20%;
+}
+.h-2\/5{
+  height: 40%;
+}
+.h-3\/5{
+  height: 60%;
+}
+.h-4\/5{
+  height: 80%;
+}
+.h-1\/6{
+  height: 16.666667%;
+}
+.h-2\/6{
+  height: 33.333333%;
+}
+.h-3\/6{
+  height: 50%;
+}
+.h-4\/6{
+  height: 66.666667%;
+}
+.h-5\/6{
+  height: 83.333333%;
+}
 .h-full{
   height: 100%;
 }
@@ -7321,9 +7480,6 @@ button, input, optgroup, select, textarea{
   height: -moz-fit-content;
   height: fit-content;
 }
-.h-5\/6{
-  height: 83.333333%;
-}
 .max-h-0{
   max-height: 0px;
 }
@@ -7657,6 +7813,84 @@ button, input, optgroup, select, textarea{
 .w-32\.5{
   width: 8.5rem;
 }
+.w-1\/2{
+  width: 50%;
+}
+.w-1\/3{
+  width: 33.333333%;
+}
+.w-2\/3{
+  width: 66.666667%;
+}
+.w-1\/4{
+  width: 25%;
+}
+.w-2\/4{
+  width: 50%;
+}
+.w-3\/4{
+  width: 75%;
+}
+.w-1\/5{
+  width: 20%;
+}
+.w-2\/5{
+  width: 40%;
+}
+.w-3\/5{
+  width: 60%;
+}
+.w-4\/5{
+  width: 80%;
+}
+.w-1\/6{
+  width: 16.666667%;
+}
+.w-2\/6{
+  width: 33.333333%;
+}
+.w-3\/6{
+  width: 50%;
+}
+.w-4\/6{
+  width: 66.666667%;
+}
+.w-5\/6{
+  width: 83.333333%;
+}
+.w-1\/12{
+  width: 8.333333%;
+}
+.w-2\/12{
+  width: 16.666667%;
+}
+.w-3\/12{
+  width: 25%;
+}
+.w-4\/12{
+  width: 33.333333%;
+}
+.w-5\/12{
+  width: 41.666667%;
+}
+.w-6\/12{
+  width: 50%;
+}
+.w-7\/12{
+  width: 58.333333%;
+}
+.w-8\/12{
+  width: 66.666667%;
+}
+.w-9\/12{
+  width: 75%;
+}
+.w-10\/12{
+  width: 83.333333%;
+}
+.w-11\/12{
+  width: 91.666667%;
+}
 .w-full{
   width: 100%;
 }
@@ -7678,51 +7912,6 @@ button, input, optgroup, select, textarea{
   width: -moz-fit-content;
   width: fit-content;
 }
-.w-8\/12{
-  width: 66.666667%;
-}
-.w-4\/12{
-  width: 33.333333%;
-}
-.w-6\/12{
-  width: 50%;
-}
-.w-3\/12{
-  width: 25%;
-}
-.w-2\/12{
-  width: 16.666667%;
-}
-.w-9\/12{
-  width: 75%;
-}
-.w-7\/12{
-  width: 58.333333%;
-}
-.w-5\/12{
-  width: 41.666667%;
-}
-.w-1\/2{
-  width: 50%;
-}
-.w-10\/12{
-  width: 83.333333%;
-}
-.w-1\/12{
-  width: 8.333333%;
-}
-.w-2\/4{
-  width: 50%;
-}
-.w-1\/3{
-  width: 33.333333%;
-}
-.w-1\/4{
-  width: 25%;
-}
-.w-3\/4{
-  width: 75%;
-}
 .min-w-0{
   min-width: 0px;
 }
@@ -8965,6 +9154,36 @@ button, input, optgroup, select, textarea{
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-x-1\/2{
+  --tw-translate-x: 50%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-x-1\/3{
+  --tw-translate-x: 33.333333%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-x-2\/3{
+  --tw-translate-x: 66.666667%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-x-1\/4{
+  --tw-translate-x: 25%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-x-2\/4{
+  --tw-translate-x: 50%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-x-3\/4{
+  --tw-translate-x: 75%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-x-full{
   --tw-translate-x: 100%;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -9445,6 +9664,36 @@ button, input, optgroup, select, textarea{
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-y-1\/2{
+  --tw-translate-y: 50%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-1\/3{
+  --tw-translate-y: 33.333333%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-2\/3{
+  --tw-translate-y: 66.666667%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-1\/4{
+  --tw-translate-y: 25%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-2\/4{
+  --tw-translate-y: 50%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-3\/4{
+  --tw-translate-y: 75%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-y-full{
   --tw-translate-y: 100%;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -9700,11 +9949,6 @@ button, input, optgroup, select, textarea{
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.translate-x-1\/2{
-  --tw-translate-x: 50%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .rotate-0{
   --tw-rotate: 0deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));