tailwind prefix

src/components/mark/Mark.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="my-container">
     <mark-header />
-    <div class="flex gap-1">
+    <div class="tw-flex tw-gap-1">
       <mark-history />
       <mark-body />
       <mark-board-track v-if="showMarkBoardTrack" @submit="saveTaskToServer" />

src/components/mark/MarkBoardKeyBoard.vue

@@ -10,10 +10,12 @@
     "
   >
     <div>
-      <h1 class="text-3xl text-center" @click="toggleKeyMouse">键盘给分</h1>
+      <h1 class="tw-text-3xl tw-text-center" @click="toggleKeyMouse">
+        键盘给分
+      </h1>
     </div>
     <div>
-      <h1 class="text-3xl text-center">
+      <h1 class="tw-text-3xl tw-text-center">
         总分：{{ store.currentMarkResult?.markerScore || 0 }}
       </h1>
     </div>
@@ -25,23 +27,25 @@
       >
         <div
           @click="chooseQuestion(question)"
-          class="question rounded p-1 mb-2"
+          class="question tw-rounded tw-p-1 tw-mb-2"
           :class="isCurrentQuestion(question) && 'current-question'"
         >
-          <div class="flex justify-between">
+          <div class="tw-flex tw-justify-between">
             <div>
               <div>
                 {{ question.title }} {{ question.mainNumber }}-{{
                   question.subNumber
                 }}
               </div>
-              <div class="text-center text-3xl">
+              <div class="tw-text-center tw-text-3xl">
                 {{ question.score }}
               </div>
             </div>
             <div>
-              <div class="text-center">间隔{{ question.intervalScore }}分</div>
-              <div class="text-3xl">
+              <div class="tw-text-center">
+                间隔{{ question.intervalScore }}分
+              </div>
+              <div class="tw-text-3xl">
                 {{ question.minScore }} ~ {{ question.maxScore }}
               </div>
             </div>

src/components/mark/MarkBoardMouse.vue

@@ -10,15 +10,17 @@
     "
   >
     <div>
-      <h1 class="text-3xl text-center" @click="toggleKeyMouse">鼠标给分</h1>
+      <h1 class="tw-text-3xl tw-text-center" @click="toggleKeyMouse">
+        鼠标给分
+      </h1>
     </div>
     <div>
-      <h1 class="text-3xl text-center">
+      <h1 class="tw-text-3xl tw-text-center">
         总分：{{ store.currentMarkResult?.markerScore || 0 }}
       </h1>
     </div>
     <div>
-      <div class="text-2xl text-center" @click="submit">提交</div>
+      <div class="tw-text-2xl tw-text-center" @click="submit">提交</div>
     </div>
 
     <div v-if="store.currentTask && store.currentTask.questionList">
@@ -26,14 +28,14 @@
         v-for="(question, index) in store.currentTask?.questionList"
         :key="index"
       >
-        <div class="question rounded p-1 mb-2">
+        <div class="question tw-rounded tw-p-1 tw-mb-2">
           <div>
             <div>
               {{ question.title }} {{ question.mainNumber }}-{{
                 question.subNumber
               }}
             </div>
-            <div class="flex flex-wrap gap-1">
+            <div class="tw-flex tw-flex-wrap tw-gap-1">
               <div
                 v-for="(s, i) in question.maxScore + 1"
                 :key="i"

src/components/mark/MarkBoardTrack.vue

@@ -11,17 +11,17 @@
     "
   >
     <div>
-      <h1 class="text-3xl text-center">
+      <h1 class="tw-text-3xl tw-text-center">
         总分：{{ store.currentMarkResult?.markerScore || 0 }}
       </h1>
     </div>
     <div>
-      <div class="text-2xl text-center" @click="submit">提交</div>
+      <div class="tw-text-2xl tw-text-center" @click="submit">提交</div>
     </div>
 
     <div
       v-if="store.currentTask && store.currentTask.questionList"
-      class="flex gap-1 flex-wrap justify-between"
+      class="tw-flex tw-gap-1 tw-flex-wrap tw-justify-between"
     >
       <template
         v-for="(question, index) in store.currentTask?.questionList"
@@ -29,7 +29,7 @@
       >
         <div
           @click="chooseQuestion(question)"
-          class="question rounded p-1"
+          class="question tw-rounded tw-p-1"
           style="min-width: 100px"
           :class="isCurrentQuestion(question) && 'current-question'"
         >
@@ -38,14 +38,14 @@
               question.subNumber
             }}
           </div>
-          <div class="text-center">
+          <div class="tw-text-center">
             {{ question.score || 0 }}
           </div>
         </div>
       </template>
     </div>
 
-    <div class="flex gap-1 flex-wrap mt-5">
+    <div class="tw-flex tw-gap-1 tw-flex-wrap tw-mt-5">
       <div
         v-for="(s, i) in questionScoreSteps"
         :key="i"

src/components/mark/MarkBody.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="mark-body-container flex-auto" ref="container">
-    <div v-if="!store.currentTask" class="text-center">暂无评卷任务</div>
+  <div class="mark-body-container tw-flex-auto" ref="container">
+    <div v-if="!store.currentTask" class="tw-text-center">暂无评卷任务</div>
     <div v-else :style="{ width: answerPaperScale }">
       <div
         v-for="(item, index) in sliceImagesWithTrackList"

src/components/mark/MarkDrawTrack.vue

@@ -1,7 +1,7 @@
 <template>
   <template v-for="(track, index) in trackList" :key="index">
     <div class="score-container" :style="computeTopAndLeft(track)">
-      <span class="m-auto">
+      <span class="tw-m-auto">
         {{ track.score }}
       </span>
     </div>

src/components/mark/MarkHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex gap-4 justify-between items-center header-bg"
+    class="tw-flex tw-gap-4 tw-justify-between tw-items-center header-bg"
     style="z-index: 10000; position: relative; font-size: 16px; height: 40px"
   >
     <div>
@@ -11,7 +11,7 @@
       >
     </div>
     <div v-if="store.setting.statusValue === 'TRIAL'">试评</div>
-    <div class="flex gap-1">
+    <div class="tw-flex tw-gap-1">
       <div>
         编号<span class="highlight-text">{{
           store.currentTask?.secretNumber
@@ -25,7 +25,7 @@
         }}</span>
       </div>
     </div>
-    <ul class="flex gap-2 mb-0">
+    <ul class="tw-flex tw-gap-2 tw-mb-0">
       <li>
         已评<span class="highlight-text">{{ store.status.markedCount }}</span>
       </li>
@@ -47,7 +47,7 @@
         进度<span class="highlight-text">{{ progress }}%</span>
       </li>
     </ul>
-    <ul class="flex gap-2 mb-0">
+    <ul class="tw-flex tw-gap-2 tw-mb-0">
       <li @click="upScale" title="放大" style="line-height: 20px">
         <PlusCircleOutlined
           :style="{
@@ -75,7 +75,7 @@
       <HistoryOutlined :style="{ 'font-size': '20px' }" />
     </div>
     <div
-      class="flex place-items-center"
+      class="tw-flex tw-place-items-center"
       :title="
         '评卷时间段：' +
         $filters.datetimeFilter(store.setting.startTime) +
@@ -89,13 +89,13 @@
       />
     </div>
     <div>{{ group?.title }}(切换)</div>
-    <div class="flex place-items-center">
+    <div class="tw-flex tw-place-items-center">
       <UserOutlined
         :style="{ 'font-size': '18px' }"
         style="line-height: 18px"
       />{{ store.setting.marker?.name }}
     </div>
-    <div class="flex place-items-center">
+    <div class="tw-flex tw-place-items-center">
       <PoweroffOutlined
         :style="{ 'font-size': '18px' }"
         style="line-height: 18px"

src/components/mark/MarkHistory.vue

@@ -12,13 +12,13 @@
         @keyup.enter="updateHistoryTask({ secretNumber: secretNumberInput })"
       />
     </div>
-    <div class="flex justify-between">
+    <div class="tw-flex tw-justify-between">
       <div>编号</div>
       <div>时间</div>
       <div>分数</div>
     </div>
     <div v-for="(task, index) of store.historyTasks" :key="index">
-      <div @click="replaceCurrentTask(task)" class="flex justify-between">
+      <div @click="replaceCurrentTask(task)" class="tw-flex tw-justify-between">
         <div>{{ task.secretNumber }}</div>
         <div>
           {{ $filters.datetimeFilter(task.markTime) }}
@@ -28,7 +28,7 @@
         </div>
       </div>
     </div>
-    <div class="flex justify-between">
+    <div class="tw-flex tw-justify-between">
       <div @click="previousPage">上一页</div>
       <div>第{{ currentPage }}页</div>
       <div @click="nextPage">下一页</div>

tailwind.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  prefix: "tw-",
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},