diff --git a/web/src/less/change-memo-created-ts-dialog.less b/web/src/less/change-memo-created-ts-dialog.less
index 1dc7a23a..a0424a21 100644
--- a/web/src/less/change-memo-created-ts-dialog.less
+++ b/web/src/less/change-memo-created-ts-dialog.less
@@ -1,11 +1,9 @@
-@import "./mixin.less";
-
 .change-memo-created-ts-dialog {
   > .dialog-container {
     @apply w-72;
 
     > .dialog-content-container {
-      .flex(column, flex-start, flex-start);
+      @apply flex flex-col justify-start items-start;
 
       > .tip-text {
         @apply bg-gray-400 text-xs p-2 rounded-lg;
diff --git a/web/src/less/change-password-dialog.less b/web/src/less/change-password-dialog.less
index 423103a2..232ffdf3 100644
--- a/web/src/less/change-password-dialog.less
+++ b/web/src/less/change-password-dialog.less
@@ -1,18 +1,16 @@
-@import "./mixin.less";
-
 .change-password-dialog {
   > .dialog-container {
     @apply w-72;
 
     > .dialog-content-container {
-      .flex(column, flex-start, flex-start);
+      @apply flex flex-col justify-start items-start;
 
       > .tip-text {
         @apply bg-gray-400 text-xs p-2 rounded-lg;
       }
 
       > .form-label {
-        .flex(column, flex-start, flex-start);
+        @apply flex flex-col justify-start items-start;
         @apply relative w-full leading-relaxed;
 
         &.input-form-label {
@@ -25,8 +23,7 @@
       }
 
       > .btns-container {
-        .flex(row, flex-end, center);
-        @apply mt-2 w-full;
+        @apply mt-2 w-full flex flex-row justify-end items-center;
 
         > .btn {
           @apply text-sm px-4 py-2 rounded ml-2 bg-gray-400;
diff --git a/web/src/less/change-resource-filename-dialog.less b/web/src/less/change-resource-filename-dialog.less
index b49d3cec..aedcb36f 100644
--- a/web/src/less/change-resource-filename-dialog.less
+++ b/web/src/less/change-resource-filename-dialog.less
@@ -1,11 +1,9 @@
-@import "./mixin.less";
-
 .change-resource-filename-dialog {
   > .dialog-container {
     @apply w-72;
 
     > .dialog-content-container {
-      .flex(column, flex-start, flex-start);
+      @apply flex flex-col justify-start items-start;
 
       > .tip-text {
         @apply bg-gray-400 text-xs p-2 rounded-lg;
diff --git a/web/src/less/common/date-picker.less b/web/src/less/common/date-picker.less
index 17e5bfe6..f091f429 100644
--- a/web/src/less/common/date-picker.less
+++ b/web/src/less/common/date-picker.less
@@ -1,5 +1,3 @@
-@import "../mixin.less";
-
 .date-picker-wrapper {
   @apply flex flex-col justify-start items-start p-4;
 
@@ -16,16 +14,15 @@
   }
 
   > .date-picker-day-container {
-    .flex(row, flex-start, flex-start);
+    @apply flex flex-row justify-start items-start;
     width: 280px;
     flex-wrap: wrap;
 
     > .date-picker-day-header {
-      .flex(row, space-around, center);
-      width: 100%;
+      @apply flex flex-row justify-around items-center w-full;
 
       > .day-item {
-        .flex(column, center, center);
+        @apply flex flex-col justify-center items-center;
         width: 36px;
         height: 36px;
         user-select: none;
@@ -36,7 +33,7 @@
     }
 
     > .day-item {
-      .flex(column, center, center);
+      @apply flex flex-col justify-center items-center;
       width: 36px;
       height: 36px;
       border-radius: 50%;
@@ -46,14 +43,11 @@
       margin: 2px;
 
       &:hover {
-        background-color: @bg-whitegray;
+        @apply bg-gray-100;
       }
 
       &.current {
-        background-color: @bg-light-blue;
-        font-size: 16px;
-        color: @text-blue;
-        font-weight: bold;
+        @apply text-blue-600 bg-blue-100 text-base font-medium;
       }
 
       &.null {
diff --git a/web/src/less/common/selector.less b/web/src/less/common/selector.less
index 43e558ad..13adef5a 100644
--- a/web/src/less/common/selector.less
+++ b/web/src/less/common/selector.less
@@ -36,7 +36,7 @@
       @apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;
 
       &.selected {
-        color: @text-green;
+        @apply text-green-600;
       }
     }
 
diff --git a/web/src/less/create-shortcut-dialog.less b/web/src/less/create-shortcut-dialog.less
index ce4b4b33..a4531858 100644
--- a/web/src/less/create-shortcut-dialog.less
+++ b/web/src/less/create-shortcut-dialog.less
@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .create-shortcut-dialog {
   @apply px-4;
 
@@ -7,11 +5,10 @@
     @apply w-128 max-w-full;
 
     > .dialog-content-container {
-      .flex(column, flex-start, flex-start);
+      @apply flex flex-col justify-start items-start;
 
       > .form-item-container {
-        .flex(row, flex-start, flex-start);
-        @apply w-full mt-2 py-1;
+        @apply w-full mt-2 py-1 flex flex-row justify-start items-start;
 
         > .normal-text {
           @apply block flex-shrink-0 w-12 mr-3 text-right text-sm leading-8;
@@ -23,8 +20,7 @@
         }
 
         > .filters-wrapper {
-          .flex(column, flex-start, flex-start);
-          @apply w-full;
+          @apply w-full flex flex-col justify-start items-start;
 
           > .create-filter-btn {
             @apply text-sm py-1 px-2 rounded shadow flex flex-row justify-start items-center border cursor-pointer text-blue-500 hover:opacity-80;
@@ -34,11 +30,10 @@
     }
 
     > .dialog-footer-container {
-      .flex(row, space-between, center);
-      @apply w-full mt-0;
+      @apply w-full mt-0 flex flex-row justify-between items-center;
 
       > .btns-container {
-        .flex(row, flex-start, center);
+        @apply flex flex-row justify-start items-center;
 
         > .tip-text {
           @apply text-sm text-gray-400 mr-2;
@@ -61,8 +56,7 @@
 }
 
 .memo-filter-input-wrapper {
-  .flex(row, flex-start, center);
-  @apply w-full mb-3 shrink-0;
+  @apply w-full mb-3 shrink-0 flex flex-row justify-start items-center;
 
   > .selector-wrapper {
     @apply mr-1 h-9 grow-0 shrink-0;
@@ -81,7 +75,7 @@
     }
 
     &.value-selector {
-    @apply grow;
+      @apply grow;
     }
   }
 
@@ -90,7 +84,7 @@
     @apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50;
   }
 
-  > input.datetime-selector{
+  > input.datetime-selector {
     max-width: calc(100% - 152px);
     @apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50;
   }
diff --git a/web/src/less/memo-card-dialog.less b/web/src/less/memo-card-dialog.less
index 0d6fbbcd..31c4f864 100644
--- a/web/src/less/memo-card-dialog.less
+++ b/web/src/less/memo-card-dialog.less
@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .dialog-wrapper.memo-card-dialog {
   @apply px-4;
 
@@ -21,11 +19,10 @@
         }
 
         > .btns-container {
-          .flex(row, flex-end, center);
+          @apply flex flex-row justify-end items-center;
 
           > .btn {
-            .flex(row, center, center);
-            @apply w-6 h-6 p-1 ml-2 rounded text-gray-600 hover:bg-white;
+            @apply flex flex-row justify-center items-center w-6 h-6 p-1 ml-2 rounded text-gray-600 hover:bg-white;
           }
 
           > .split-line {
@@ -44,6 +41,7 @@
 
       > .layer-container,
       > .background-layer-container {
+        @apply bg-amber-100;
         position: absolute;
         bottom: -3px;
         left: 3px;
@@ -51,13 +49,12 @@
         height: 100%;
         border-radius: 8px;
         z-index: -1;
-        background-color: @bg-paper-yellow;
         border-bottom: 1px solid lightgray;
       }
 
       > .layer-container {
+        @apply bg-amber-100;
         z-index: 0;
-        background-color: @bg-paper-yellow;
         border: 1px solid lightgray;
         width: 100%;
         height: 100%;
@@ -68,8 +65,7 @@
     }
 
     > .linked-memos-wrapper {
-      .flex(column, flex-start, flex-start);
-      @apply w-128 max-w-full mt-2 py-3 px-6 rounded-lg bg-white last:mb-8;
+      @apply flex flex-col justify-start items-start w-128 max-w-full mt-2 py-3 px-6 rounded-lg bg-white last:mb-8;
 
       > .normal-text {
         @apply text-sm;
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index 647f3d2e..b3a4c862 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -1,5 +1,3 @@
-@import "./mixin.less";
-
 .memo-editor-container {
   @apply transition-all relative w-full flex flex-col justify-start items-start bg-white px-4 rounded-lg border-2 border-gray-200;
 
@@ -121,7 +119,7 @@
   }
 
   > .editor-footer-container {
-    @apply w-full flex flex-row justify-between items-center border-t py-3 mt-2;
+    @apply w-full flex flex-row justify-between items-center border-t border-t-gray-100 py-3 mt-2;
 
     > .visibility-selector {
       @apply h-8;
diff --git a/web/src/less/memo-filter.less b/web/src/less/memo-filter.less
index 6ada0d78..614d20c4 100644
--- a/web/src/less/memo-filter.less
+++ b/web/src/less/memo-filter.less
@@ -1,8 +1,5 @@
-@import "./mixin.less";
-
 .filter-query-container {
-  .flex(row, flex-start, flex-start);
-  @apply w-full flex-wrap p-2 pb-1 text-sm font-mono leading-7;
+  @apply flex flex-row justify-start items-start w-full flex-wrap p-2 pb-1 text-sm font-mono leading-7;
 
   > .tip-text {
     @apply mr-2;
diff --git a/web/src/less/mixin.less b/web/src/less/mixin.less
index 7661c209..037bed26 100644
--- a/web/src/less/mixin.less
+++ b/web/src/less/mixin.less
@@ -1,20 +1,3 @@
-@text-black: #37352f;
-@text-gray: #52504b;
-@text-lightgray: #cac8c4;
-@text-blue: #5783f7;
-@text-green: #55bb8e;
-@text-red: #d28653;
-
-@bg-black: #2f3437;
-@bg-gray: #e4e4e4;
-@bg-whitegray: #f8f8f8;
-@bg-lightgray: #eaeaea;
-@bg-blue: #1337a3;
-@bg-yellow: yellow;
-@bg-red: #fcf0f0;
-@bg-light-blue: #eef3fe;
-@bg-paper-yellow: #fbf4de;
-
 .hide-scroll-bar {
   .pretty-scroll-bar(0, 0);
 
@@ -43,10 +26,3 @@
     }
   }
 }
-
-.flex(@direction, @justify, @align) {
-  display: flex;
-  flex-direction: @direction;
-  justify-content: @justify;
-  align-items: @align;
-}
diff --git a/web/src/less/tag-list.less b/web/src/less/tag-list.less
index 998e076e..0b0b92c5 100644
--- a/web/src/less/tag-list.less
+++ b/web/src/less/tag-list.less
@@ -12,10 +12,9 @@
     @apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2 mt-1;
 
     .subtags-container {
-      @apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1;
+      @apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1 border-l-2 border-l-gray-200;
       width: calc(100% - 18px);
       min-width: 80px;
-      border-left: 2px solid @bg-gray;
 
       > .tag-item-container {
         @apply first:mt-0;