diff --git a/src/components/common/AppFooter.vue b/src/components/common/AppFooter.vue
index b230497..5be6d18 100644
--- a/src/components/common/AppFooter.vue
+++ b/src/components/common/AppFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer text-14 f-c-c flex-col color="#6a6a6a">
+  <footer f-c-c flex-col text-14 color="#6a6a6a">
     <p>
       Copyright©2022
       <a
diff --git a/src/components/page/AppPage.vue b/src/components/page/AppPage.vue
index 3e6ccc3..9e30448 100644
--- a/src/components/page/AppPage.vue
+++ b/src/components/page/AppPage.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="fade-slide" mode="out-in" appear>
-    <section class="cus-scroll-y wh-full p-15 flex-col bg-[#f5f6fb] dark:bg-hex-121212">
+    <section class="cus-scroll-y wh-full flex-col bg-[#f5f6fb] p-15 dark:bg-hex-121212">
       <slot />
       <AppFooter v-if="showFooter" mt-15 />
       <n-back-top :bottom="20" />
diff --git a/src/components/page/CommonPage.vue b/src/components/page/CommonPage.vue
index c71ae8d..eeef465 100644
--- a/src/components/page/CommonPage.vue
+++ b/src/components/page/CommonPage.vue
@@ -1,6 +1,6 @@
 <template>
   <AppPage :show-footer="showFooter">
-    <header v-if="showHeader" px-15 mb-15 min-h-45 flex justify-between items-center>
+    <header v-if="showHeader" mb-15 min-h-45 flex items-center justify-between px-15>
       <slot v-if="$slots.header" name="header" />
       <template v-else>
         <h2 text-22 font-normal text-hex-333 dark:text-hex-ccc>{{ title || route.meta?.title }}</h2>
@@ -8,7 +8,7 @@
       </template>
     </header>
 
-    <n-card rounded-10 flex-1>
+    <n-card flex-1 rounded-10>
       <slot />
     </n-card>
   </AppPage>
diff --git a/src/components/query-bar/QueryBar.vue b/src/components/query-bar/QueryBar.vue
index 8baee83..5a70132 100644
--- a/src/components/query-bar/QueryBar.vue
+++ b/src/components/query-bar/QueryBar.vue
@@ -1,14 +1,14 @@
 <template>
   <div
+    bg="#fafafc"
     min-h-60
-    p-15
     flex
     items-start
     justify-between
     b-1
-    bc-ccc
     rounded-8
-    bg="#fafafc"
+    p-15
+    bc-ccc
     dark:bg-black
   >
     <n-space wrap :size="[35, 15]">
diff --git a/src/layout/components/header/components/UserAvatar.vue b/src/layout/components/header/components/UserAvatar.vue
index a8b7b67..4342ee7 100644
--- a/src/layout/components/header/components/UserAvatar.vue
+++ b/src/layout/components/header/components/UserAvatar.vue
@@ -1,7 +1,7 @@
 <template>
   <n-dropdown :options="options" @select="handleSelect">
-    <div flex items-center cursor-pointer>
-      <img :src="userStore.avatar" mr10 w-35 h-35 rounded-full />
+    <div flex cursor-pointer items-center>
+      <img :src="userStore.avatar" mr10 h-35 w-35 rounded-full />
       <span>{{ userStore.name }}</span>
     </div>
   </n-dropdown>
diff --git a/src/layout/components/sidebar/components/SideLogo.vue b/src/layout/components/sidebar/components/SideLogo.vue
index ca19142..999cf3c 100644
--- a/src/layout/components/sidebar/components/SideLogo.vue
+++ b/src/layout/components/sidebar/components/SideLogo.vue
@@ -1,7 +1,7 @@
 <template>
   <router-link h-60 f-c-c to="/">
     <icon-custom-logo text-36 color-primary></icon-custom-logo>
-    <h2 v-show="!appStore.collapsed" ml-10 color-primary text-16 font-bold max-w-140 flex-shrink-0>
+    <h2 v-show="!appStore.collapsed" ml-10 max-w-140 flex-shrink-0 text-16 font-bold color-primary>
       {{ title }}
     </h2>
   </router-link>
diff --git a/src/layout/components/tags/index.vue b/src/layout/components/tags/index.vue
index 7385fe8..d6783ec 100644
--- a/src/layout/components/tags/index.vue
+++ b/src/layout/components/tags/index.vue
@@ -4,7 +4,7 @@
       v-for="tag in tagsStore.tags"
       ref="tabRefs"
       :key="tag.path"
-      class="px-15 mx-5 rounded-4 cursor-pointer hover:color-primary"
+      class="mx-5 cursor-pointer rounded-4 px-15 hover:color-primary"
       :type="tagsStore.activeTag === tag.path ? 'primary' : 'default'"
       :closable="tagsStore.tags.length > 1"
       @click="handleTagClick(tag.path)"
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 3ecec8d..7f44efb 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -11,15 +11,15 @@
       <SideBar />
     </n-layout-sider>
 
-    <article flex-1 flex-col overflow-hidden>
+    <article flex-col flex-1 overflow-hidden>
       <header
-        class="bg-white px-15 border-b bc-eee flex items-center"
+        class="flex items-center border-b bg-white px-15 bc-eee"
         dark="bg-dark border-0"
         :style="`height: ${header.height}px`"
       >
         <AppHeader />
       </header>
-      <section v-if="tags.visible" border-b bc-eee dark:border-0 hidden sm:block>
+      <section v-if="tags.visible" hidden border-b bc-eee sm:block dark:border-0>
         <AppTags :style="{ height: `${tags.height}px` }" />
       </section>
       <section flex-1 overflow-hidden bg-hex-f5f6fb dark:bg-hex-101014>
diff --git a/src/views/demo/base/keep-alive/index.vue b/src/views/demo/base/keep-alive/index.vue
index 2d253ba..a97286e 100644
--- a/src/views/demo/base/keep-alive/index.vue
+++ b/src/views/demo/base/keep-alive/index.vue
@@ -3,7 +3,7 @@
     <div w-350>
       <n-input v-model:value="inputVal" />
       <n-input-number v-model:value="number" mt-30 />
-      <p mt-20 text-center color-gray text-14>注：右击标签重新加载可重置keep-alive</p>
+      <p mt-20 text-center text-14 color-gray>注：右击标签重新加载可重置keep-alive</p>
     </div>
   </CommonPage>
 </template>
diff --git a/src/views/demo/base/unocss/index.vue b/src/views/demo/base/unocss/index.vue
index 465ddf7..090bde1 100644
--- a/src/views/demo/base/unocss/index.vue
+++ b/src/views/demo/base/unocss/index.vue
@@ -1,7 +1,7 @@
 <template>
   <CommonPage show-footer>
     <p>
-      文档：<a hover-decoration-underline c-blue href="https://uno.antfu.me/" target="_blank"
+      文档：<a c-blue hover-decoration-underline href="https://uno.antfu.me/" target="_blank"
         >https://uno.antfu.me/</a
       >
     </p>
@@ -12,57 +12,57 @@
       </a>
     </p>
 
-    <div f-c-c flex-col mt-20 w-350>
-      <div flex flex-wrap justify-around p-10 rounded-10 b-1 bc-ccc>
-        <div w-50 h-50 b-1 rounded-5 f-c-c p-10 m-20>
-          <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+    <div mt-20 w-350 f-c-c flex-col>
+      <div flex flex-wrap justify-around b-1 rounded-10 p-10 bc-ccc>
+        <div m-20 h-50 w-50 f-c-c b-1 rounded-5 p-10>
+          <span h-6 w-6 rounded-3 bg-black dark:bg-white />
         </div>
-        <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
-          <span w-6 h-6 rounded-3 bg-black dark:bg-white />
-          <span w-6 h-6 rounded-3 bg-black dark:bg-white self-end />
+        <div m-20 h-50 w-50 flex justify-between b-1 rounded-5 p-10>
+          <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+          <span h-6 w-6 self-end rounded-3 bg-black dark:bg-white />
         </div>
-        <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
-          <span w-6 h-6 rounded-3 bg-black dark:bg-white />
-          <span w-6 h-6 rounded-3 bg-black dark:bg-white self-center />
-          <span w-6 h-6 rounded-3 bg-black dark:bg-white self-end />
+        <div m-20 h-50 w-50 flex justify-between b-1 rounded-5 p-10>
+          <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+          <span h-6 w-6 self-center rounded-3 bg-black dark:bg-white />
+          <span h-6 w-6 self-end rounded-3 bg-black dark:bg-white />
         </div>
-        <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
+        <div m-20 h-50 w-50 flex justify-between b-1 rounded-5 p-10>
           <div flex-col justify-between>
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
           </div>
           <div flex-col justify-between>
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
           </div>
         </div>
-        <div w-50 h-50 b-1 rounded-5 flex-col justify-between items-center p-10 m-20>
-          <div flex w-full justify-between>
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+        <div m-20 h-50 w-50 flex-col items-center justify-between b-1 rounded-5 p-10>
+          <div w-full flex justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
           </div>
-          <div w-6 h-6 rounded-3 bg-black dark:bg-white />
-          <div flex w-full justify-between>
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+          <div h-6 w-6 rounded-3 bg-black dark:bg-white />
+          <div w-full flex justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
           </div>
         </div>
-        <div w-50 h-50 b-1 rounded-5 flex-col justify-between p-10 m-20>
-          <div flex w-full justify-between>
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+        <div m-20 h-50 w-50 flex-col justify-between b-1 rounded-5 p-10>
+          <div w-full flex justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
           </div>
-          <div flex w-full justify-between>
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+          <div w-full flex justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
           </div>
-          <div flex w-full justify-between>
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
-            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+          <div w-full flex justify-between>
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
+            <span h-6 w-6 rounded-3 bg-black dark:bg-white />
           </div>
         </div>
       </div>
-      <h2 font-normal text-14 mt-10 color-gray>Flex 骰子</h2>
+      <h2 mt-10 text-14 font-normal color-gray>Flex 骰子</h2>
     </div>
   </CommonPage>
 </template>
diff --git a/src/views/demo/editor/md-editor.vue b/src/views/demo/editor/md-editor.vue
index f1e9582..36d841e 100644
--- a/src/views/demo/editor/md-editor.vue
+++ b/src/views/demo/editor/md-editor.vue
@@ -1,9 +1,9 @@
 <template>
   <CommonPage>
-    <div h-60 pl-20 pr-20 flex items-center bg-white dark:bg-dark>
+    <div h-60 flex items-center bg-white pl-20 pr-20 dark:bg-dark>
       <input
         v-model="post.title"
-        class="flex-1 pt-15 pb-15 mr-20 text-20 font-bold color-primary"
+        class="mr-20 flex-1 pb-15 pt-15 text-20 font-bold color-primary"
         dark:bg-dark
         type="text"
         placeholder="输入文章标题..."
diff --git a/src/views/demo/upload/index.vue b/src/views/demo/upload/index.vue
index 213e021..394c48e 100644
--- a/src/views/demo/upload/index.vue
+++ b/src/views/demo/upload/index.vue
@@ -1,14 +1,14 @@
 <template>
   <CommonPage>
     <n-upload
-      class="p-20 text-center w-[75%] mx-auto"
+      class="mx-auto w-[75%] p-20 text-center"
       :custom-request="handleUpload"
       :show-file-list="false"
       accept=".png,.jpg,.jpeg"
       @before-upload="onBeforeUpload"
     >
       <n-upload-dragger>
-        <div class="f-c-c flex-col h-150">
+        <div class="h-150 f-c-c flex-col">
           <TheIcon icon="mdi:upload" size="68" class="mb-12 c-primary" />
           <n-text class="text-14 c-gray"> 点击或者拖动文件到该区域来上传 </n-text>
         </div>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 7459f43..1e51ddf 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -2,10 +2,10 @@
   <AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
     <div
       style="transform: translateY(25px)"
-      class="m-auto p-15 f-c-c min-w-345 max-w-700 rounded-10 card-shadow bg-white bg-opacity-60"
+      class="m-auto max-w-700 min-w-345 f-c-c rounded-10 bg-white bg-opacity-60 p-15 card-shadow"
       dark:bg-dark
     >
-      <div w-380 hidden md:block px-20 py-35>
+      <div hidden w-380 px-20 py-35 md:block>
         <img src="@/assets/images/login_banner.webp" w-full alt="login_banner" />
       </div>
 
@@ -17,7 +17,7 @@
           <n-input
             v-model:value="loginInfo.name"
             autofocus
-            class="text-16 items-center h-50 pl-10"
+            class="h-50 items-center pl-10 text-16"
             placeholder="admin"
             :maxlength="20"
           />
@@ -25,7 +25,7 @@
         <div mt-30>
           <n-input
             v-model:value="loginInfo.password"
-            class="text-16 items-center h-50 pl-10"
+            class="h-50 items-center pl-10 text-16"
             type="password"
             show-password-on="mousedown"
             placeholder="123456"
@@ -44,8 +44,8 @@
 
         <div mt-20>
           <n-button
-            w-full
             h-50
+            w-full
             rounded-5
             text-16
             type="primary"
diff --git a/src/views/workbench/index.vue b/src/views/workbench/index.vue
index ed6637d..291e213 100644
--- a/src/views/workbench/index.vue
+++ b/src/views/workbench/index.vue
@@ -12,12 +12,12 @@
             <n-statistic label="待办" :value="4">
               <template #suffix> / 10 </template>
             </n-statistic>
-            <n-statistic label="Stars" w-100 ml-80>
+            <n-statistic label="Stars" ml-80 w-100>
               <a href="https://github.com/zclzone/vue-naive-admin">
                 <img allt="stars" src="https://badgen.net/github/stars/zclzone/vue-naive-admin" />
               </a>
             </n-statistic>
-            <n-statistic label="Forks" w-100 ml-80>
+            <n-statistic label="Forks" ml-80 w-100>
               <a href="https://github.com/zclzone/vue-naive-admin">
                 <img allt="forks" src="https://badgen.net/github/forks/zclzone/vue-naive-admin" />
               </a>
@@ -34,17 +34,17 @@
           <n-card
             v-for="i in 10"
             :key="i"
-            class="w-300 flex-shrink-0 mt-10 mb-10 cursor-pointer"
+            class="mb-10 mt-10 w-300 flex-shrink-0 cursor-pointer"
             hover:card-shadow
             title="Vue Naive Admin"
             size="small"
           >
             <p op-60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
           </n-card>
-          <div w-300 h-0></div>
-          <div w-300 h-0></div>
-          <div w-300 h-0></div>
-          <div w-300 h-0></div>
+          <div h-0 w-300></div>
+          <div h-0 w-300></div>
+          <div h-0 w-300></div>
+          <div h-0 w-300></div>
         </div>
       </n-card>
     </div>