chore(front): add tailwindcss custom forms package

client/package-lock.json

@@ -1078,6 +1078,17 @@
         }
       }
     },
+    "@tailwindcss/custom-forms": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
+      "integrity": "sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.11",
+        "mini-svg-data-uri": "^1.0.3",
+        "traverse": "^0.6.6"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -7700,6 +7711,12 @@
         }
       }
     },
+    "mini-svg-data-uri": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
+      "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==",
+      "dev": true
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -15800,6 +15817,12 @@
         "punycode": "^2.1.1"
       }
     },
+    "traverse": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
+      "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=",
+      "dev": true
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",

client/package.json

@@ -19,6 +19,7 @@
     "vuex": "^3.5.1"
   },
   "devDependencies": {
+    "@tailwindcss/custom-forms": "^0.2.1",
     "@vue/cli-plugin-babel": "^3.12.1",
     "@vue/cli-plugin-eslint": "^3.12.1",
     "@vue/cli-service": "^3.12.1",

client/tailwind.config.js

@@ -3,6 +3,26 @@ module.exports = {
   important: false,
   separator: ':',
   theme: {
+    customForms: theme => ({
+      default: {
+        checkbox: {
+          width: theme('spacing.6'),
+          height: theme('spacing.6'),
+          backgroundColor: 'rgba(23, 49, 79, 0.6)',
+          borderColor: theme('colors.blue.800'),
+          textColor: theme('colors.blue.1000'),
+          '&:focus': {
+            backgroundColor: theme('colors.blue.1000'),
+            borderColor: theme('colors.blue.700'),
+            boxShadow: undefined,
+          },
+          '&:checked': {
+            backgroundColor: theme('colors.blue.1000'),
+            borderColor: 'transparent',
+          },
+        },
+      },
+    }),
     screens: {
       sm: '640px',
       md: '768px',
@@ -717,7 +737,9 @@ module.exports = {
     transitionDuration: ['responsive'],
   },
   corePlugins: {},
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/custom-forms'),
+  ],
   purge: {
     enabled: process.env.NODE_ENV === 'production',
     content: [