refactor: use tailwindcss in less (#34)

* reduce less

web/src/components/AboutSiteDialog.tsx

@@ -33,8 +33,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
         <span className="btn" onClick={showStarHistoryDialog}>
           Star History
         </span>
-        <hr />
+        <p className="updated-time-text">
-        <p className="normal-text">
           Last updated on <span className="pre-text">2021/12/12 14:38:15</span> 🎉
         </p>
       </div>

web/src/components/ShortcutList.tsx

@@ -65,7 +65,6 @@ interface ShortcutContainerProps {
 
 const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutContainerProps) => {
   const { shortcut, isActive } = props;
-  const [showActionBtns, toggleShowActionBtns] = useToggle(false);
   const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
 
   const handleQueryClick = () => {
@@ -79,15 +78,6 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
     }
   };
 
-  const handleShowActionBtnClick = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    toggleShowActionBtns();
-  };
-
-  const handleActionBtnContainerMouseLeave = () => {
-    toggleShowActionBtns(false);
-  };
-
   const handleDeleteMemoClick = async (event: React.MouseEvent) => {
     event.stopPropagation();
 
@@ -141,10 +131,10 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
           <span className="shortcut-text">{shortcut.title}</span>
         </div>
         <div className="btns-container">
-          <span className="action-btn toggle-btn" onClick={handleShowActionBtnClick}>
+          <span className="action-btn toggle-btn">
             <img className="icon-img" src={`/icons/more${isActive ? "-white" : ""}.svg`} />
           </span>
-          <div className={`action-btns-wrapper ${showActionBtns ? "" : "hidden"}`} onMouseLeave={handleActionBtnContainerMouseLeave}>
+          <div className="action-btns-wrapper">
             <div className="action-btns-container">
               <span className="btn" onClick={handlePinQueryBtnClick}>
                 {shortcut.rowStatus === "ARCHIVED" ? "Unpin" : "Pin"}

web/src/less/about-site-dialog.less

@@ -2,52 +2,42 @@
 
 .about-site-dialog {
   > .dialog-container {
-    width: 420px;
+    @apply w-128;
 
     > .dialog-content-container {
-      line-height: 1.8;
+      @apply leading-relaxed;
 
       > p {
-        margin: 2px 0;
+        @apply my-1;
-      }
 
-      > hr {
+        &.updated-time-text {
-        margin: 4px 0;
+          .flex(row, flex-start, center);
-        width: 100%;
+          @apply w-full text-sm mt-3 pt-2 border-t-2 border-t-gray-200 text-gray-600 whitespace-pre-wrap font-mono;
-        height: 1px;
+        }
-        background-color: lightgray;
-        border: none;
-      }
-
-      .normal-text {
-        .flex(row, flex-start, center);
-        font-size: 13px;
-        color: gray;
-        white-space: pre-wrap;
-        .mono-font-family();
       }
 
       .pre-text {
-        .mono-font-family();
+        @apply font-mono;
       }
 
       > .btn {
-        padding: 2px 8px;
+        @apply px-2 py-1 text-white rounded text-sm;
         background-color: @text-green;
-        color: white;
-        border-radius: 4px;
 
         &:hover {
-          opacity: 0.8;
+          @apply opacity-80;
         }
       }
+
+      a {
+        @apply cursor-pointer underline-offset-2 underline text-blue-600;
+      }
     }
   }
 }
 
 @media only screen and (max-width: 875px) {
   .dialog-wrapper.about-site-dialog {
-    padding: 24px 16px;
+    @apply py-6 px-4 pt-16;
-    padding-top: 64px;
   }
 }

web/src/less/app.less

@@ -2,6 +2,5 @@
 
 #root {
   .flex(row, flex-start, flex-start);
-  width: 100%;
+  @apply w-full h-full;
-  height: 100%;
 }

web/src/less/change-password-dialog.less

@@ -2,88 +2,54 @@
 
 .change-password-dialog {
   > .dialog-container {
-    width: 300px;
+    @apply w-72;
-    border-radius: 8px;
 
     > .dialog-content-container {
       .flex(column, flex-start, flex-start);
-      width: 100%;
 
       > .tip-text {
-        background-color: @bg-gray;
+        @apply bg-gray-400 text-xs p-2 rounded-lg;
-        font-size: 12px;
-        padding: 8px;
-        border-radius: 8px;
       }
 
       > .form-label {
         .flex(column, flex-start, flex-start);
-        position: relative;
+        @apply relative w-full leading-relaxed;
-        width: 100%;
-        line-height: 1.6;
 
         > .normal-text {
-          position: absolute;
+          @apply absolute left-2 py-px pl-1 shrink-0 text-sm text-gray-400 leading-10 transition-all cursor-text;
-          left: 8px;
-          padding-left: 4px;
-          flex-shrink: 0;
-          font-size: 13px;
-          line-height: 38px;
-          color: gray;
-          transition: all 0.2s linear;
-          cursor: text;
 
           &.not-null {
-            top: 2px;
+            @apply top-1 bg-white text-xs py-0 px-1 rounded-xl;
-            left: 8px;
-            background-color: white;
-            font-size: 13px;
-            line-height: 18px;
-            padding: 0 4px;
-            border-radius: 12px;
           }
         }
 
         &.input-form-label {
-          padding: 12px 0;
+          @apply py-3 pb-1;
-          padding-bottom: 4px;
 
           > input {
-            width: 100%;
+            @apply w-full p-2 text-sm leading-6 rounded border border-gray-400 bg-transparent;
-            padding: 6px 8px;
-            font-size: 13px;
-            line-height: 24px;
-            border-radius: 4px;
-            border: 1px solid lightgray;
-            background-color: transparent;
           }
         }
       }
 
       > .btns-container {
         .flex(row, flex-end, center);
-        margin-top: 8px;
+        @apply mt-2 w-full;
-        width: 100%;
 
         > .btn {
-          font-size: 14px;
+          @apply text-sm px-4 py-2 rounded mr-2 bg-gray-400;
-          padding: 6px 12px;
-          border-radius: 4px;
-          margin-right: 8px;
-          background-color: lightgray;
 
           &:hover {
-            opacity: 0.8;
+            @apply opacity-80;
+          }
+
+          &.confirm-btn {
+            @apply bg-green-600 text-white shadow-inner;
           }
 
           &.cancel-btn {
             background-color: unset;
           }
-
-          &.confirm-btn {
-            background-color: @text-green;
-            color: white;
-          }
         }
       }
     }
@@ -92,11 +58,10 @@
 
 @media only screen and (max-width: 875px) {
   .dialog-wrapper.change-password-dialog {
-    padding: 24px 16px;
+    @apply py-6 px-4 pt-16;
-    padding-top: 64px;
 
     > .dialog-container {
-      width: 100%;
+      @apply w-full;
     }
   }
 }

web/src/less/confirm-reset-openid-dialog.less

@@ -2,45 +2,31 @@
 
 .confirm-reset-openid-dialog {
   > .dialog-container {
-    width: 300px;
+    @apply w-80;
-    border-radius: 8px;
 
     > .dialog-content-container {
       .flex(column, flex-start, flex-start);
-      width: 100%;
 
       > .warn-text {
-        padding: 8px 0;
+        @apply pt-2;
       }
 
       > .btns-container {
         .flex(row, flex-end, center);
-        margin-top: 8px;
+        @apply w-full mt-3;
-        width: 100%;
 
         > .btn {
-          font-size: 14px;
+          @apply text-sm py-1 px-3 mr-2 rounded-md;
-          padding: 6px 12px;
-          border-radius: 4px;
-          margin-right: 8px;
-          background-color: lightgray;
 
           &:hover {
-            opacity: 0.8;
+            @apply opacity-80;
-          }
-
-          &.cancel-btn {
-            background-color: unset;
           }
 
           &.confirm-btn {
-            background-color: @bg-red;
+            @apply bg-red-100 border border-solid border-red-600 text-red-600;
-            border: 1px solid red;
-            color: red;
 
             &.loading {
-              opacity: 0.8;
+              @apply opacity-80 cursor-wait;
-              cursor: wait;
             }
           }
         }
@@ -51,11 +37,10 @@
 
 @media only screen and (max-width: 875px) {
   .dialog-wrapper.confirm-reset-openid-dialog {
-    padding: 24px 16px;
+    @apply py-6 px-4 pt-16;
-    padding-top: 64px;
 
     > .dialog-container {
-      width: 100%;
+      @apply w-full;
     }
   }
 }

web/src/less/dialog.less

@@ -2,17 +2,7 @@
 
 .dialog-wrapper {
   .flex(column, flex-start, center);
-  position: fixed;
+  @apply fixed top-0 left-0 w-full h-full pt-16 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  z-index: 100;
-  transition: all 0.2s ease;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  padding: 64px 0;
   .hide-scroll-bar();
 
   &.showup {
@@ -25,59 +15,50 @@
 
   > .dialog-container {
     .flex(column, flex-start, flex-start);
-    background-color: white;
+    @apply bg-white p-4 rounded-lg;
-    padding: 16px;
-    border-radius: 8px;
 
     > .dialog-header-container {
       .flex(row, space-between, center);
-      width: 100%;
+      @apply w-full mb-4;
-      margin-bottom: 16px;
 
       > .title-text {
         > .icon-text {
-          margin-right: 6px;
+          @apply mr-2 text-base;
-          font-size: 16px;
         }
       }
 
       .btn {
-        width: 24px;
+        .flex(column, center, center);
-        height: 24px;
+        @apply w-6 h-6 rounded;
-        padding: 2px;
-        border-radius: 4px;
 
         > .icon-img {
-          width: 20px;
+          @apply w-5 h-5;
-          height: 20px;
         }
 
         &:hover {
-          background-color: lightgray;
+          @apply bg-gray-200;
         }
       }
     }
 
     > .dialog-content-container {
       .flex(column, flex-start, flex-start);
-      width: 100%;
+      @apply w-full;
     }
 
     > .dialog-footer-container {
       .flex(row, flex-end, center);
-      width: 100%;
+      @apply w-full mt-4;
-      margin-top: 16px;
     }
   }
 }
 
 @media only screen and (max-width: 875px) {
   .dialog-wrapper {
-    width: 100%;
+    @apply w-full px-4;
-    padding: 0 16px;
 
     > .dialog-container {
-      max-width: 100%;
+      @apply max-w-full;
     }
   }
 }

web/src/less/global.less

@@ -1,53 +1,42 @@
 @import "./mixin.less";
 
 * {
-  margin: 0;
+  @apply m-0 p-0 box-border;
-  padding: 0;
-  box-sizing: border-box;
   color: @text-black;
   -webkit-tap-highlight-color: transparent;
 }
 
 body,
 html {
-  width: 100%;
+  @apply w-full h-full overflow-hidden text-base;
-  height: 100%;
-  overflow: hidden;
-  font-size: 15px;
   font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei",
     "WenQuanYi Micro Hei", sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
     "Noto Color Emoji";
 }
 
 code {
-  .mono-font-family();
+  @apply bg-pink-600 p-1 rounded font-mono;
-  background-color: pink;
-  padding: 2px 4px;
-  border-radius: 4px;
 }
 
 pre {
-  .mono-font-family();
+  @apply font-mono;
 
   * {
-    .mono-font-family();
+    @apply font-mono;
   }
 }
 
 label,
 button,
 img {
-  background-color: transparent;
+  @apply bg-transparent select-none outline-none;
-  user-select: none;
   -webkit-tap-highlight-color: transparent;
-  outline: none;
 }
 
 input,
 textarea {
   @apply appearance-none outline-none !important;
-
+  @apply bg-transparent;
-  background-color: transparent;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -55,37 +44,32 @@ input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
-  box-shadow: 0 0 0 30px white inset !important;
+  @apply shadow-inner;
 }
 
 li {
   list-style-type: none;
 
   &::before {
+    @apply font-bold mr-1;
     content: "•";
-    font-weight: bold;
-    margin-right: 4px;
   }
 }
 
 a {
-  cursor: pointer;
+  @apply cursor-pointer text-blue-600 underline underline-offset-2;
-  color: @text-blue;
-  text-underline-offset: 2px;
 
   &:hover {
-    background-color: @bg-gray;
+    @apply opacity-80;
   }
 }
 
 .btn {
+  @apply select-none cursor-pointer text-center;
   border: unset;
   background-color: unset;
   text-align: unset;
   font-size: unset;
-  user-select: none;
-  cursor: pointer;
-  text-align: center;
 }
 
 .hidden {

web/src/less/home.less

@@ -6,17 +6,11 @@
 
 #page-wrapper {
   .flex(row, flex-start, flex-start);
-  width: 848px;
+  @apply w-full max-w-4xl h-full m-auto -translate-x-4;
-  max-width: 100%;
-  height: 100%;
-  margin: auto;
-  transform: translateX(-16px);
 
   > .content-wrapper {
     .flex(column, flex-start, flex-start);
-    position: relative;
+    @apply relative flex-grow h-auto;
-    width: 600px;
-    height: 100%;
   }
 }
 
@@ -24,25 +18,17 @@
   body.mobile-show-sidebar {
     #page-wrapper {
       > .content-wrapper {
-        transform: translateX(320px);
+        @apply translate-x-80;
       }
     }
   }
 
   #page-wrapper {
     .flex(column, flex-start, flex-start);
-    width: 100%;
+    @apply w-full h-full p-0 translate-x-0;
-    height: 100%;
-    padding: 0;
-    transform: translateX(0);
 
     > .content-wrapper {
-      width: 100%;
+      @apply w-full h-full ml-0 pt-0 transition-all;
-      height: 100%;
-      margin-left: 0;
-      padding-top: 0;
-      transition: all 0.4s ease;
-      transform: translateX(0);
     }
   }
 }

web/src/less/memo-card-dialog.less

@@ -35,7 +35,7 @@
         > .time-text {
           font-size: 14px;
           color: gray;
-          .mono-font-family();
+          @apply font-mono;
         }
 
         > .btns-container {
@@ -181,7 +181,7 @@
 
         > .time-text {
           color: gray;
-          .mono-font-family();
+          @apply font-mono;
         }
       }
     }

web/src/less/memo-content.less

@@ -55,7 +55,7 @@
     display: inline-block;
     text-align: center;
     width: 1.4rem;
-    .mono-font-family();
+    @apply font-mono;
   }
 
   pre {

web/src/less/memos-header.less

@@ -3,36 +3,20 @@
 .section-header-container,
 .memos-header-container {
   .flex(row, space-between, center);
-  width: 100%;
+  @apply w-full h-10 flex-nowrap mt-4 mb-2 shrink-0;
-  height: 40px;
-  flex-wrap: nowrap;
-  margin-top: 16px;
-  margin-bottom: 8px;
-  flex-shrink: 0;
 
   > .title-text {
     .flex(row, flex-start, center);
-    font-weight: bold;
+    @apply font-bold text-lg leading-10 mr-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden;
-    font-size: 18px;
-    line-height: 40px;
     color: @text-black;
-    margin-right: 8px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-shrink: 0;
-    cursor: pointer;
 
     > .action-btn {
       .flex(row, center, center);
-      width: 24px;
+      @apply w-6 h-6 mr-1 shrink-0;
-      height: 24px;
-      margin-right: 4px;
-      flex-shrink: 0;
       background-color: unset;
 
       > .icon-img {
-        width: 18px;
+        @apply w-4 h-auto;
-        height: 18px;
       }
     }
   }
@@ -45,10 +29,6 @@
 @media only screen and (max-width: 875px) {
   .section-header-container,
   .memos-header-container {
-    height: auto;
+    @apply h-auto mt-4 mb-0 py-0 px-3 pb-2;
-    margin-top: 16px;
-    margin-bottom: 0;
-    padding: 0 12px;
-    padding-bottom: 8px;
   }
 }

web/src/less/menu-btns-popup.less

@@ -2,15 +2,7 @@
 
 .menu-btns-popup {
   .flex(column, flex-start, flex-start);
-  position: absolute;
+  @apply absolute mt-1 ml-24 p-1 w-44 rounded-lg z-10 shadow bg-white;
-  margin-top: 4px;
-  margin-left: 90px;
-  padding: 4px;
-  width: 180px;
-  border-radius: 8px;
-  z-index: 2;
-  box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
-  background-color: white;
 
   &:hover {
     display: flex;
@@ -18,19 +10,10 @@
 
   > .btn {
     .flex(row, flex-start, center);
-    width: 100%;
+    @apply w-full py-2 px-3 text-sm rounded text-left;
-    padding: 8px 16px;
-    font-size: 14px;
-    line-height: 1.6;
-    border-radius: 4px;
-    text-align: left;
 
     > .icon {
-      display: block;
+      @apply block w-6 text-center mr-2 text-sm;
-      width: 28px;
-      text-align: center;
-      margin-right: 4px;
-      font-size: 14px;
     }
 
     &:hover {
@@ -41,6 +24,6 @@
 
 @media only screen and (max-width: 875px) {
   .menu-btns-popup {
-    margin-left: 64px;
+    @apply ml-16;
   }
 }

web/src/less/setting.less

@@ -3,63 +3,43 @@
 
 .preference-wrapper {
   .flex(column, flex-start, flex-start);
-  width: 100%;
+  @apply w-full h-full grow overflow-y-scroll;
-  height: 100%;
-  flex-grow: 1;
-  overflow-y: scroll;
   .hide-scroll-bar();
 
   > .section-header-container {
-    width: 100%;
+    @apply w-full h-10 mb-0;
-    height: 40px;
-    margin-bottom: 0;
 
     > .title-text {
-      font-weight: bold;
+      @apply font-bold text-lg;
-      font-size: 18px;
       color: @text-black;
     }
   }
 
   > .tip-text-container {
-    width: 100%;
-    height: 128px;
     .flex(column, center, center);
+    @apply w-full h-32;
   }
 
   > .sections-wrapper {
     .flex(column, flex-start, flex-start);
-    flex-grow: 1;
+    @apply grow w-full overflow-y-scroll pb-16;
-    width: 100%;
-    overflow-y: scroll;
-    padding-bottom: 64px;
     .hide-scroll-bar();
 
     > .section-container {
       .flex(column, flex-start, flex-start);
-      width: 100%;
+      @apply w-full bg-white my-2 mx-0 p-4 pb-2 rounded-lg;
-      background-color: white;
-      margin: 8px 0;
-      padding: 16px;
-      padding-bottom: 8px;
-      border-radius: 8px;
 
       > .title-text {
-        font-size: 15px;
+        @apply text-base font-bold mb-2;
         color: @text-black;
-        font-weight: bold;
-        margin-bottom: 8px;
       }
 
       > .form-label {
         .flex(row, flex-start, center);
-        width: 100%;
+        @apply w-full text-sm mb-2;
-        font-size: 14px;
-        line-height: 20px;
-        margin-bottom: 8px;
 
         > .normal-text {
-          flex-shrink: 0;
+          @apply shrink-0;
         }
       }
     }
@@ -68,6 +48,6 @@
 
 @media only screen and (max-width: 875px) {
   .sections-wrapper {
-    padding: 0 12px;
+    @apply py-0 px-3;
   }
 }

web/src/less/shortcut-list.less

@@ -2,84 +2,55 @@
 
 .shortcuts-wrapper {
   .flex(column, flex-start, flex-start);
-  width: 100%;
+  @apply w-full py-0 px-2 h-auto flex-nowrap;
-  padding: 0 8px;
-  height: auto;
-  flex-wrap: nowrap;
   .hide-scroll-bar();
 
   > .title-text {
     .flex(row, space-between, center);
-    width: 100%;
+    @apply w-full py-1 px-4;
-    padding: 4px 16px;
 
-    > * {
+    > .normal-text {
-      font-size: 12px;
+      @apply text-xs leading-6 font-bold text-black opacity-50;
-      line-height: 24px;
-      color: @text-black;
-      opacity: 0.5;
-      font-weight: bold;
     }
 
     > .btn {
-      display: none;
+      @apply hidden px-1 text-lg leading-6;
-      padding: 0 4px;
-      font-size: 18px;
     }
 
     &:hover,
     &:active {
       > .btn {
-        display: block;
+        @apply block;
       }
     }
   }
 
   > .create-shortcut-btn-container {
     .flex(row, center, center);
-    width: 100%;
+    @apply w-full mt-2 mb-3;
-    margin-top: 8px;
-    margin-bottom: 12px;
 
     > .btn {
-      display: flex;
+      @apply flex py-1 px-2 rounded-lg text-xs border border-dashed border-blue-600;
-      padding: 4px 8px;
-      border: 1px dashed @bg-blue;
-      border-radius: 8px;
-      font-size: 13px;
 
       &:hover {
-        background-color: @bg-blue;
+        @apply bg-blue-600 text-white;
-        color: white;
       }
     }
   }
 
   > .shortcuts-container {
     .flex(column, flex-start, flex-start);
-    position: relative;
+    @apply relative w-full h-auto flex-nowrap mb-2;
-    width: 100%;
-    height: auto;
-    flex-wrap: nowrap;
-    margin-bottom: 8px;
 
     > .shortcut-container {
       .flex(row, space-between, center);
-      width: 100%;
+      @apply w-full h-10 py-0 px-4 mt-1 rounded-lg text-sm cursor-pointer select-none shrink-0;
-      height: 40px;
-      padding: 0 16px;
-      margin-top: 4px;
-      border-radius: 8px;
-      font-size: 14px;
-      cursor: pointer;
-      flex-shrink: 0;
-      user-select: none;
 
       &:hover {
         background-color: @bg-gray;
 
         > .btns-container {
-          display: flex;
+          @apply flex;
         }
       }
 
@@ -87,79 +58,60 @@
         background-color: @text-green !important;
 
         > .shortcut-text-container {
-          font-weight: bold;
+          @apply font-bold;
 
           > * {
-            color: white;
+            @apply text-white;
           }
         }
       }
 
       > .shortcut-text-container {
         .flex(row, flex-start, center);
+        @apply overflow-hidden text-ellipsis shrink-0 leading-5;
         max-width: calc(100% - 24px);
         color: @text-black;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex-shrink: 0;
-        line-height: 20px;
 
         > .icon-text {
-          display: block;
+          @apply block w-4 shrink-0;
-          width: 16px;
-          flex-shrink: 0;
         }
 
         > .shortcut-text {
-          flex-shrink: 0;
+          @apply shrink-0;
         }
       }
 
       > .btns-container {
         .flex(row, flex-end, center);
-        display: none;
+        @apply hidden;
 
         > .action-btn {
           .flex(row, center, center);
-          width: 24px;
+          @apply w-6 h-6 shrink-0;
-          height: 24px;
-          flex-shrink: 0;
 
           > .icon-img {
-            width: 18px;
+            @apply w-4 h-auto;
-            height: auto;
+          }
+
+          &.toggle-btn {
+            &:hover {
+              & + .action-btns-wrapper {
+                display: flex;
+              }
+            }
           }
         }
 
         > .action-btns-wrapper {
           .flex(column, flex-start, flex-start);
-          position: absolute;
+          @apply absolute right-0 w-auto h-auto p-2 translate-y-14 hidden z-10;
-          right: 0;
-          width: auto;
-          height: auto;
-          padding: 8px;
-          transform: translateY(60px);
-          z-index: 1;
 
           > .action-btns-container {
             .flex(column, flex-start, flex-start);
-            width: 86px;
+            @apply w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white shadow;
-            height: auto;
-            white-space: nowrap;
-            border-radius: 6px;
-            padding: 4px;
-            background-color: white;
-            box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
 
             > .btn {
-              width: 100%;
+              @apply w-full py-2 px-2 rounded text-sm text-left;
-              padding: 6px 0;
-              padding-left: 12px;
-              border-radius: 4px;
-              font-size: 13px;
-              height: unset;
-              line-height: unset;
-              text-align: left;
 
               &:hover {
                 background-color: @bg-whitegray;
@@ -174,6 +126,10 @@
               }
             }
           }
+
+          &:hover {
+            display: flex;
+          }
         }
       }
     }
@@ -182,18 +138,18 @@
 
 @media only screen and (max-width: 875px) {
   .shortcuts-container {
-    height: auto;
+    @apply h-auto;
 
     &:last-child {
-      flex-grow: 1;
+      @apply flex-grow;
     }
 
     > .title-text {
-      font-size: 13px;
+      @apply text-sm;
     }
 
     > .shortcut-container {
-      font-size: 15px;
+      @apply text-base;
     }
   }
 }

web/src/less/siderbar.less

@@ -2,16 +2,11 @@
 
 .sidebar-wrapper {
   .flex(column, flex-start, flex-start);
-  width: 240px;
+  @apply w-60 h-auto py-4 overflow-x-hidden overflow-y-auto shrink-0;
-  height: 100%;
-  padding: 16px 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  flex-shrink: 0;
   .hide-scroll-bar();
 
   > * {
-    flex-shrink: 0;
+    @apply shrink-0;
   }
 }
 
@@ -19,30 +14,18 @@
   body.mobile-show-sidebar {
     #page-wrapper {
       > .sidebar-wrapper {
-        transform: translateX(0);
+        @apply translate-x-0 shadow;
-        box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
       }
     }
   }
 
   .sidebar-wrapper {
     .flex(column, flex-start, center);
-    z-index: 99;
+    @apply z-50 absolute top-0 left-0 w-80 h-full p-0 bg-white transition-all -translate-x-80;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 320px;
-    height: 100%;
-    padding: 0;
-    background-color: white;
-    transition: all 0.4s ease;
-    transform: translateX(-320px);
 
     > * {
-      width: 320px;
+      @apply w-80 shrink-0 pl-8;
       max-width: 95%;
-      flex-shrink: 0;
-      padding-left: 32px;
     }
   }
 }

web/src/less/signin.less

@@ -2,149 +2,104 @@
 
 .page-wrapper.signin {
   .flex(row, center, center);
-  width: 100%;
+  @apply w-full h-full bg-white;
-  height: 100%;
-  background-color: white;
 
   > .page-container {
-    width: 360px;
+    @apply w-80 max-w-full p-4 -mt-16;
-    max-width: 100%;
-    padding: 16px;
-    margin-top: -64px;
 
     > .page-header-container {
       .flex(row, space-between, center);
-      width: 100%;
+      @apply w-full mb-4;
-      margin-bottom: 16px;
 
       > .title-text {
-        font-size: 24px;
+        @apply text-2xl;
       }
     }
 
     > .page-content-container {
       .flex(column, flex-start, flex-start);
-      flex-wrap: nowrap;
+      @apply flex-nowrap;
 
       > .form-item-container {
         .flex(column, flex-start, flex-start);
-        position: relative;
+        @apply relative w-full text-base m-2;
-        width: 100%;
-        line-height: 1.6;
-        margin-top: 8px;
 
         > .normal-text {
-          position: absolute;
+          @apply absolute top-3 left-3 pl-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none;
-          top: 18px;
-          left: 12px;
-          flex-shrink: 0;
-          font-size: 13px;
-          line-height: 2;
-          color: gray;
-          cursor: text;
-          padding: 0 4px;
-          background-color: transparent;
-          border-radius: 50%;
-          transition: all 0.3s ease;
 
           &.not-null {
-            top: -6px;
+            @apply text-sm top-0 leading-4 bg-white;
-            left: 12px;
-            background-color: white;
           }
         }
 
         &.input-form-container {
-          padding: 8px 0;
+          @apply py-2;
 
           > input {
-            width: 100%;
+            @apply w-full py-3 px-3 text-base rounded-lg border border-solid border-gray-400;
-            padding: 8px 12px;
-            font-size: 15px;
-            line-height: 2;
-            border-radius: 8px;
-            border: 1px solid lightgray;
           }
-        }
 
-        &:hover {
+          &:hover {
-          opacity: 0.8;
+            @apply opacity-80;
+          }
         }
       }
     }
 
     > .page-footer-container {
       .flex(row, space-between, center);
-      width: 100%;
+      @apply w-full mt-3;
-      margin: 12px 0;
 
       > .btns-container {
         .flex(row, flex-start, center);
 
         > .btn {
-          padding: 0 4px;
+          @apply px-1 py-2 text-sm rounded;
-          font-size: 13px;
-          line-height: 32px;
-          border-radius: 4px;
 
           &:hover {
-            opacity: 0.8;
+            @apply opacity-80;
           }
 
           &.disabled {
-            color: lightgray;
+            @apply text-gray-400 cursor-not-allowed;
-            cursor: not-allowed;
           }
 
           &.signin-btn {
-            background-color: @text-green;
+            @apply bg-green-600 text-white px-3;
-            color: white;
-            padding: 0 12px;
 
             &.requesting {
-              cursor: wait;
+              @apply cursor-wait opacity-80;
-              opacity: 0.8;
             }
           }
         }
 
         > .btn-text {
-          font-size: 13px;
+          @apply text-sm;
         }
 
         > .split-text {
-          color: lightgray;
+          @apply text-gray-400 mx-2;
-          margin: 0 8px;
         }
       }
     }
 
     > .quickly-btns-container {
       .flex(column, flex-start, flex-start);
-      width: 100%;
+      @apply w-full mt-6;
-      margin-top: 24px;
 
       > .btn {
-        margin-bottom: 24px;
+        @apply mb-6 text-base leading-10 border border-solid border-gray-400 px-4 rounded-3xl;
-        line-height: 40px;
-        border: 2px solid lightgray;
-        border-radius: 22px;
-        padding: 0 16px;
-        font-size: 15px;
 
         &:hover {
-          opacity: 0.8;
+          @apply opacity-80;
         }
 
         &.guest-signin {
-          color: @text-green;
+          @apply text-green-600 border-2 border-green-600 font-bold;
-          border-color: @text-green;
-          font-weight: bold;
         }
 
         &.requesting {
-          cursor: wait;
+          @apply cursor-wait opacity-80;
-          opacity: 0.8;
         }
       }
     }

web/src/less/star-history-dialog.less

@@ -2,17 +2,16 @@
 
 .star-history-dialog {
   > .dialog-container {
-    width: auto;
+    @apply w-auto;
 
     > .dialog-content-container {
-      overflow-x: scroll;
+      @apply overflow-x-scroll;
     }
   }
 }
 
 @media only screen and (max-width: 875px) {
   .dialog-wrapper.star-history-dialog {
-    padding: 24px 16px;
+    @apply py-6 px-4 pt-16;
-    padding-top: 64px;
   }
 }

web/src/less/tag-list.less

@@ -2,59 +2,33 @@
 
 .tags-wrapper {
   .flex(column, flex-start, flex-start);
-  width: 100%;
+  @apply px-2 w-full h-auto flex-nowrap pb-4 grow;
-  padding: 0 8px;
-  height: auto;
-  flex-wrap: nowrap;
-  padding-bottom: 16px;
-  flex-grow: 1;
   .hide-scroll-bar();
 
   > .title-text {
-    width: 100%;
+    @apply w-full py-1 px-4 text-xs opacity-50;
-    padding: 4px 16px;
-    font-size: 12px;
-    line-height: 24px;
     color: @text-black;
-    opacity: 0.5;
   }
 
   > .tags-container {
     .flex(column, flex-start, flex-start);
-    position: relative;
+    @apply relative w-full h-auto flex-nowrap mb-2;
-    width: 100%;
-    height: auto;
-    flex-wrap: nowrap;
-    margin-bottom: 8px;
 
     .subtags-container {
       .flex(column, flex-start, flex-start);
+      @apply h-auto mt-1 ml-4 pl-1;
       width: calc(100% - 18px);
       min-width: 80px;
-      height: auto;
-      margin-top: 4px;
-      margin-left: 18px;
       border-left: 2px solid @bg-gray;
-      padding-left: 6px;
 
       > .tag-item-container {
-        &:first-child {
+        @apply first:mt-0;
-          margin-top: 0;
-        }
       }
     }
 
     .tag-item-container {
       .flex(row, space-between, center);
-      width: 100%;
+      @apply w-full h-10 py-0 px-4 rounded-lg text-sm shrink-0 select-none cursor-pointer;
-      height: 40px;
-      padding: 0 16px;
-      margin-top: 4px;
-      border-radius: 8px;
-      font-size: 14px;
-      cursor: pointer;
-      flex-shrink: 0;
-      user-select: none;
 
       &:hover {
         background-color: @bg-gray;
@@ -63,30 +37,24 @@
       &.active {
         > .tag-text-container {
           > * {
+            @apply font-bold;
             color: @text-green;
-            font-weight: bold;
           }
         }
       }
 
       > .tag-text-container {
         .flex(row, flex-start, center);
+        @apply overflow-hidden text-ellipsis shrink-0 leading-5;
         max-width: calc(100% - 24px);
         color: @text-black;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex-shrink: 0;
-        line-height: 20px;
 
         > .icon-text {
-          display: block;
+          @apply block w-4 shrink-0;
-          width: 16px;
-          flex-shrink: 0;
-          flex-shrink: 0;
         }
 
         > .tag-text {
-          flex-shrink: 0;
+          @apply shrink-0;
         }
       }
 
@@ -95,90 +63,24 @@
 
         > .action-btn {
           .flex(row, center, center);
-          width: 24px;
+          @apply w-6 h-6 shrink-0 transition-all rotate-0;
-          height: 24px;
-          flex-shrink: 0;
-          transition: all 0.1s linear;
-          transform: rotate(0);
 
           > .icon-img {
-            width: 18px;
+            @apply w-5 h-5 opacity-80;
-            height: 18px;
-            opacity: 0.8;
           }
 
           &.shown {
-            transform: rotate(90deg);
+            @apply rotate-90;
           }
         }
       }
     }
 
     > .tag-tip-container {
-      width: 100%;
+      @apply w-full mt-2 pl-4 text-xs text-gray-400;
-      margin-top: 8px;
-      padding-left: 16px;
-      font-size: 12px;
-      line-height: 1.6;
-      color: gray;
 
       > .code-text {
-        color: @text-blue;
+        @apply p-1 mx-1 text-blue-400 whitespace-pre-line bg-blue-100 rounded;
-        padding: 4px;
-        margin: 0 2px;
-        white-space: pre-line;
-        background-color: @bg-light-blue;
-        border-radius: 4px;
-      }
-    }
-  }
-}
-
-.rename-tag-dialog {
-  > .dialog-container {
-    width: 320px;
-
-    > .dialog-content-container {
-      .flex(column, flex-start, flex-start);
-
-      > .tag-text {
-        margin-bottom: 8px;
-        font-size: 14px;
-      }
-
-      > .text-input {
-        width: 100%;
-        padding: 8px 12px;
-        border: 1px solid lightgray;
-        border-radius: 4px;
-        font-size: 14px;
-        margin-bottom: 12px;
-      }
-
-      > .btns-container {
-        .flex(row, flex-end, center);
-        width: 100%;
-
-        > .btn-text {
-          font-size: 14px;
-          margin-left: 12px;
-          cursor: pointer;
-
-          &:hover {
-            opacity: 0.8;
-          }
-
-          &.cancel-btn {
-            color: @text-gray;
-          }
-
-          &.confirm-btn {
-            background-color: @text-green;
-            color: white;
-            padding: 4px 12px;
-            border-radius: 4px;
-          }
-        }
       }
     }
   }
@@ -186,18 +88,15 @@
 
 @media only screen and (max-width: 875px) {
   .tags-wrapper {
-    background-color: white;
+    @apply bg-white;
 
     > .tags-container {
-      height: auto;
+      @apply h-auto;
 
       &:last-child {
+        @apply grow;
         flex-grow: 1;
       }
     }
   }
-
-  .rename-tag-dialog {
-    padding-top: 64px;
-  }
 }

web/src/less/toast.less

@@ -2,51 +2,34 @@
 
 .toast-list-container {
   .flex(column, flex-start, flex-end);
-  position: fixed;
+  @apply fixed top-2 right-4 z-1000 max-h-full;
-  top: 8px;
-  right: 16px;
-  z-index: 1000;
-  max-height: 100%;
 
   > .toast-wrapper {
     .flex(column, flex-start, flex-start);
-    position: relative;
+    @apply relative left-full invisible text-base cursor-pointer shadow rounded bg-white mt-6 py-2 px-4;
-    left: 100%;
-    visibility: hidden;
     min-width: 6em;
     min-height: 40px;
-    margin-top: 24px;
-    padding: 8px 16px;
-    background-color: white;
-    border-radius: 4px;
-    box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
-    font-size: 13px;
-    cursor: pointer;
     transition: all 0.4s ease;
 
     &.showup {
-      left: 0;
+      @apply left-0 visible;
-      visibility: visible;
     }
 
     &.destory {
+      @apply invisible;
       left: calc(100% + 32px);
-      visibility: hidden;
     }
 
     > .toast-container {
       > .content-text {
-        line-height: 24px;
+        @apply text-base whitespace-pre-wrap;
         max-width: 160px;
-        word-wrap: break-word;
       }
     }
 
     &::before {
       content: "";
-      position: absolute;
+      @apply absolute top-3 -right-2;
-      top: 12px;
-      right: -8px;
       border-left: 8px solid white;
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;

web/src/less/usage-heat-map.less

@@ -7,56 +7,39 @@
 
 .usage-heat-map-wrapper {
   .flex(row, flex-start, center);
-  width: 100%;
+  @apply w-full h-32 flex-wrap pr-6 pb-3;
-  height: 122px;
-  flex-wrap: wrap;
-  padding-right: 24px;
-  padding-bottom: 12px;
 
   &:hover {
     > .day-tip-text-container {
-      visibility: visible;
+      @apply visible;
     }
   }
 
   > .day-tip-text-container {
     .flex(column, space-between, center);
-    width: 24px;
+    @apply w-6 h-full flex-wrap invisible;
-    height: 100%;
-    padding-bottom: 2px;
-    flex-wrap: wrap;
-    visibility: hidden;
 
     > .tip-text {
+      @apply pr-1 w-full text-right font-mono text-gray-400;
       font-size: 10px;
-      line-height: 16px;
-      padding-right: 2px;
-      width: 100%;
-      text-align: right;
-      color: gray;
-      .mono-font-family();
     }
   }
 
   > .usage-heat-map {
-    width: 192px;
+    @apply w-48 h-full grid;
-    height: 100%;
-    flex-wrap: wrap;
-    display: grid;
     grid-template-rows: repeat(7, 1fr);
     grid-template-columns: repeat(12, 1fr);
     grid-auto-flow: column;
 
     > .stat-container {
-      display: block;
+      @apply block rounded-sm;
       width: 13px;
       height: 13px;
       background-color: @bg-lightgray;
-      border-radius: 2px;
       margin-bottom: 2px;
 
       &.null {
-        background-color: transparent;
+        @apply bg-transparent;
       }
 
       &.stat-day-L1-bg {
@@ -82,24 +65,12 @@
   }
 
   > .usage-detail-container {
-    position: absolute;
+    @apply absolute left-0 top-0 ml-2 -mt-9 p-2 -translate-x-1/2 select-none text-white text-xs rounded whitespace-nowrap;
-    left: 0;
-    top: 0;
-    margin-left: 9px;
-    transform: translateX(-50%);
-    margin-top: -36px;
     background-color: rgba(0, 0, 0, 0.8);
-    color: white;
-    padding: 6px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    line-height: 1.6;
     z-index: 2;
-    user-select: none;
-    white-space: nowrap;
 
     > .date-text {
-      color: lightgray;
+      @apply text-gray-300;
     }
 
     &::before {
@@ -116,36 +87,26 @@
 
 @media only screen and (max-width: 875px) {
   .usage-heat-map-wrapper {
-    height: 160px;
+    @apply h-40 py-2 pt-3 pr-0 pl-2 !important;
-    padding: 8px 0 !important;
-    padding-top: 12px !important;
 
     > .day-tip-text-container {
-      visibility: visible;
+      @apply visible w-10 pb-1;
-      width: 48px;
-      padding-bottom: 4px;
 
       > .tip-text {
-        padding-right: 6px;
+        @apply pr-1 text-xs;
-        font-size: 12px;
-        line-height: unset !important;
       }
     }
 
     > .usage-heat-map {
-      width: 240px;
+      @apply w-60;
 
       > .stat-container {
-        width: 16px;
+        @apply w-4 h-4 mb-1;
-        height: 16px;
-        margin-bottom: 4px;
       }
     }
 
     > .usage-detail-container {
-      margin-top: -36px;
+      @apply -mt-9 pl-2 text-xs;
-      margin-left: 8px;
-      font-size: 12px;
 
       &::before {
         left: calc(50% - 4px);

web/src/less/user-banner.less

@@ -2,45 +2,27 @@
 
 .user-banner-container {
   .flex(column, flex-start, flex-start);
-  width: 100%;
+  @apply w-full h-auto;
-  height: 128px;
 
   > .userinfo-header-container {
     .flex(row, space-between, center);
-    width: 100%;
+    @apply w-full px-6 flex-nowrap mb-1;
-    padding: 0 24px;
-    flex-wrap: nowrap;
-    margin-bottom: 4px;
 
     > .username-text {
+      @apply font-bold text-lg text-slate-800 overflow-hidden cursor-pointer shrink-0 text-ellipsis;
       max-width: calc(100% - 32px);
-      font-weight: bold;
-      font-size: 18px;
-      line-height: 36px;
-      color: @text-black;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      cursor: pointer;
-      margin-right: auto;
-      flex-shrink: 0;
     }
 
     > .action-btn {
-      flex-shrink: 0;
+      @apply flex-shrink-0 select-none border-none;
-      user-select: none;
-      border: none;
       background-color: unset;
 
       &.menu-popup-btn {
         .flex(column, center, center);
-        width: 36px;
+        @apply w-9 h-10 -mr-2 cursor-pointer;
-        height: 40px;
-        margin-right: -8px;
-        cursor: pointer;
 
         > .icon-img {
-          width: 20px;
+          @apply w-5 h-auto;
-          height: auto;
         }
       }
     }
@@ -48,25 +30,18 @@
 
   > .status-text-container {
     .flex(row, space-between, flex-start);
-    padding: 0 24px;
+    @apply px-6 w-full select-none mb-3;
-    width: 100%;
-    user-select: none;
 
     > .status-text {
       .flex(column, flex-start, flex-start);
 
       > .amount-text {
-        font-weight: bold;
+        @apply font-bold text-2xl opacity-80 leading-10;
-        font-size: 28px;
-        line-height: 1.8;
         color: @text-black;
-        opacity: 0.8;
       }
 
       > .type-text {
-        color: gray;
+        @apply text-gray-400 text-xs font-mono;
-        font-size: 12px;
-        .mono-font-family();
       }
     }
   }
@@ -74,27 +49,22 @@
 
 @media only screen and (max-width: 875px) {
   .user-banner-container {
-    height: 154px;
+    @apply pt-4;
-    z-index: 1;
-    padding-top: 16px !important;
 
     > .userinfo-header-container {
-      padding: 0 16px;
+      @apply px-4;
 
       > .username-text {
-        font-size: 22px;
+        @apply text-xl;
       }
     }
 
     > .status-text-container {
-      padding: 0 16px;
+      @apply px-4;
 
       > .status-text {
-        > .amount-text {
-          font-size: 32px;
-        }
         > .type-text {
-          font-size: 14px;
+          @apply text-sm;
         }
       }
     }

web/tailwind.config.js

@@ -2,7 +2,15 @@
 module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      spacing: {
+        128: "32rem",
+      },
+      zIndex: {
+        100: "100",
+        1000: "1000",
+      },
+    },
   },
   plugins: [],
 };