feat: replace custom-forms tailwind plugin by forms

client/package.json

@@ -12,7 +12,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.22.15",
     "@babel/preset-env": "^7.22.20",
-    "@tailwindcss/custom-forms": "^0.2.1",
+    "@tailwindcss/forms": "^0.5.6",
     "@vitejs/plugin-vue2": "^2.2.0",
     "autoprefixer": "^10.4.15",
     "eslint-config-prettier": "^9.0.0",

client/src/assets/css/base.css

@@ -71,3 +71,18 @@ button:focus {
 .input-color {
   background: rgba(23, 49, 79, 0.6);
 }
+
+/* Checkbox */
+.form-checkbox {
+  @apply w-6 h-6 border-blue-800 text-blue-1000 rounded-md;
+  background: rgba(23, 49, 79, 0.6);
+}
+
+.form-checkbox:focus {
+  @apply bg-blue-1000 border-blue-700 outline-none;
+  box-shadow: none;
+}
+
+.form-checkbox:checked {
+  @apply bg-blue-1000 border-transparent;
+}

client/src/assets/css/match.css

@@ -1,4 +1,3 @@
-/* purgecss start ignore */
 .Win {
   background-image: linear-gradient(90deg, rgba(1, 97, 28, 0.3) 0%, rgba(44, 82, 130, 0) 45%);
 }
@@ -37,4 +36,3 @@
   left: -7px;
   top: -5px;
 }
-/* purgecss end ignore */

client/src/assets/css/transition.css

@@ -1,5 +1,3 @@
-/* purgecss start ignore */
-
 /* Fade transitions */
 .fade-enter-active,
 .fade-leave-active {
@@ -90,5 +88,3 @@
   transform: scale(4);
   opacity: 0;
 }
-
-/* purgecss end ignore */

client/tailwind.config.js

@@ -79,5 +79,9 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/custom-forms')],
+  plugins: [
+    require('@tailwindcss/forms')({
+      strategy: 'class',
+    }),
+  ],
 }