diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 644a29957..974a3feb8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -71,6 +71,7 @@
                 "stylelint-config-recommended-vue": "^1.4.0",
                 "stylelint-config-standard": "^25.0.0",
                 "stylelint-config-standard-scss": "^3.0.0",
+                "tailwindcss": "^3.3.2",
                 "typescript": "^4.5.4",
                 "unplugin-auto-import": "^0.16.4",
                 "unplugin-vue-components": "^0.25.0",
@@ -83,6 +84,18 @@
                 "vue-tsc": "^0.29.8"
             }
         },
+        "node_modules/@alloc/quick-lru": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+            "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/@ampproject/remapping": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -2458,6 +2471,12 @@
                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
+        "node_modules/any-promise": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+            "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+            "dev": true
+        },
         "node_modules/anymatch": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -2785,6 +2804,15 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/camelcase-css": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+            "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/camelcase-keys": {
             "version": "6.2.2",
             "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
@@ -4079,6 +4107,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/didyoumean": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+            "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+            "dev": true
+        },
         "node_modules/diff": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -4100,6 +4134,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/dlv": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+            "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+            "dev": true
+        },
         "node_modules/doctrine": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -6271,6 +6311,15 @@
                 "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
+        "node_modules/jiti": {
+            "version": "1.18.2",
+            "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+            "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+            "dev": true,
+            "bin": {
+                "jiti": "bin/jiti.js"
+            }
+        },
         "node_modules/js-base64": {
             "version": "3.7.5",
             "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
@@ -7126,6 +7175,17 @@
             "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
             "dev": true
         },
+        "node_modules/mz": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+            "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+            "dev": true,
+            "dependencies": {
+                "any-promise": "^1.0.0",
+                "object-assign": "^4.0.1",
+                "thenify-all": "^1.0.0"
+            }
+        },
         "node_modules/nanoid": {
             "version": "3.3.6",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -7260,6 +7320,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/object-hash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+            "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+            "dev": true,
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/object-inspect": {
             "version": "1.12.3",
             "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -7613,6 +7682,15 @@
                 }
             }
         },
+        "node_modules/pirates": {
+            "version": "4.0.5",
+            "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+            "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+            "dev": true,
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/pkg-types": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
@@ -7684,12 +7762,105 @@
             "integrity": "sha512-3AGrZT6tuMm1ZWWn9mLXh7XMfi2YtiLNPALCVxBCiUVq0LD1OQMxV/AdS/s7rLJU5o9i/jBZw/N4vXXL5dm29A==",
             "dev": true
         },
+        "node_modules/postcss-import": {
+            "version": "15.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+            "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+            "dev": true,
+            "dependencies": {
+                "postcss-value-parser": "^4.0.0",
+                "read-cache": "^1.0.0",
+                "resolve": "^1.1.7"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.0.0"
+            }
+        },
+        "node_modules/postcss-js": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+            "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+            "dev": true,
+            "dependencies": {
+                "camelcase-css": "^2.0.1"
+            },
+            "engines": {
+                "node": "^12 || ^14 || >= 16"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": "^8.4.21"
+            }
+        },
+        "node_modules/postcss-load-config": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+            "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+            "dev": true,
+            "dependencies": {
+                "lilconfig": "^2.0.5",
+                "yaml": "^2.1.1"
+            },
+            "engines": {
+                "node": ">= 14"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": ">=8.0.9",
+                "ts-node": ">=9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "postcss": {
+                    "optional": true
+                },
+                "ts-node": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/postcss-load-config/node_modules/yaml": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+            "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+            "dev": true,
+            "engines": {
+                "node": ">= 14"
+            }
+        },
         "node_modules/postcss-media-query-parser": {
             "version": "0.2.3",
             "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
             "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
             "dev": true
         },
+        "node_modules/postcss-nested": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+            "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+            "dev": true,
+            "dependencies": {
+                "postcss-selector-parser": "^6.0.11"
+            },
+            "engines": {
+                "node": ">=12.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.14"
+            }
+        },
         "node_modules/postcss-resolve-nested-selector": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
@@ -8023,6 +8194,15 @@
                 "safe-buffer": "^5.1.0"
             }
         },
+        "node_modules/read-cache": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+            "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+            "dev": true,
+            "dependencies": {
+                "pify": "^2.3.0"
+            }
+        },
         "node_modules/read-pkg": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -9396,6 +9576,57 @@
                 "which": "bin/which"
             }
         },
+        "node_modules/sucrase": {
+            "version": "3.32.0",
+            "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
+            "integrity": "sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==",
+            "dev": true,
+            "dependencies": {
+                "@jridgewell/gen-mapping": "^0.3.2",
+                "commander": "^4.0.0",
+                "glob": "7.1.6",
+                "lines-and-columns": "^1.1.6",
+                "mz": "^2.7.0",
+                "pirates": "^4.0.1",
+                "ts-interface-checker": "^0.1.9"
+            },
+            "bin": {
+                "sucrase": "bin/sucrase",
+                "sucrase-node": "bin/sucrase-node"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/sucrase/node_modules/commander": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+            "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/sucrase/node_modules/glob": {
+            "version": "7.1.6",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+            "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+            "dev": true,
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.0.4",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
         "node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -9480,6 +9711,59 @@
                 "url": "https://github.com/chalk/slice-ansi?sponsor=1"
             }
         },
+        "node_modules/tailwindcss": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
+            "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+            "dev": true,
+            "dependencies": {
+                "@alloc/quick-lru": "^5.2.0",
+                "arg": "^5.0.2",
+                "chokidar": "^3.5.3",
+                "didyoumean": "^1.2.2",
+                "dlv": "^1.1.3",
+                "fast-glob": "^3.2.12",
+                "glob-parent": "^6.0.2",
+                "is-glob": "^4.0.3",
+                "jiti": "^1.18.2",
+                "lilconfig": "^2.1.0",
+                "micromatch": "^4.0.5",
+                "normalize-path": "^3.0.0",
+                "object-hash": "^3.0.0",
+                "picocolors": "^1.0.0",
+                "postcss": "^8.4.23",
+                "postcss-import": "^15.1.0",
+                "postcss-js": "^4.0.1",
+                "postcss-load-config": "^4.0.1",
+                "postcss-nested": "^6.0.1",
+                "postcss-selector-parser": "^6.0.11",
+                "postcss-value-parser": "^4.2.0",
+                "resolve": "^1.22.2",
+                "sucrase": "^3.32.0"
+            },
+            "bin": {
+                "tailwind": "lib/cli.js",
+                "tailwindcss": "lib/cli.js"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/tailwindcss/node_modules/arg": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+            "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+            "dev": true
+        },
+        "node_modules/tailwindcss/node_modules/lilconfig": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+            "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/tapable": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -9560,6 +9844,27 @@
             "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
             "dev": true
         },
+        "node_modules/thenify": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+            "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+            "dev": true,
+            "dependencies": {
+                "any-promise": "^1.0.0"
+            }
+        },
+        "node_modules/thenify-all": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+            "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+            "dev": true,
+            "dependencies": {
+                "thenify": ">= 3.1.0 < 4"
+            },
+            "engines": {
+                "node": ">=0.8"
+            }
+        },
         "node_modules/throttle-debounce": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
@@ -9635,6 +9940,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/ts-interface-checker": {
+            "version": "0.1.13",
+            "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+            "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+            "dev": true
+        },
         "node_modules/ts-node": {
             "version": "10.9.1",
             "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 31ac769b5..cc6ffc121 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -83,6 +83,7 @@
         "stylelint-config-recommended-vue": "^1.4.0",
         "stylelint-config-standard": "^25.0.0",
         "stylelint-config-standard-scss": "^3.0.0",
+        "tailwindcss": "^3.3.2",
         "typescript": "^4.5.4",
         "unplugin-auto-import": "^0.16.4",
         "unplugin-vue-components": "^0.25.0",
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index a3db8ae97..67cdf1a55 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
     plugins: {
+        tailwindcss: {},
         autoprefixer: {},
     },
 };
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index f7f289ebf..69b337583 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,6 +5,7 @@ import '@/styles/index.scss';
 import '@/styles/common.scss';
 import '@/assets/iconfont/iconfont.css';
 import '@/assets/iconfont/iconfont.js';
+import '@/styles/style.css';
 
 import directives from '@/directives/index';
 import router from '@/routers/index';
diff --git a/frontend/src/styles/style.css b/frontend/src/styles/style.css
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/frontend/src/styles/style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 000000000..b7ee96260
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+    corePlugins: {
+        preflight: false,
+    },
+};