build: npx @tailwindcss/upgrade@next

package.json

@@ -21,10 +21,10 @@
     "@highlightjs/vue-plugin": "^2.1.0",
     "@modyfi/vite-plugin-yaml": "^1.0.4",
     "@phosphor-icons/vue": "^2.2.1",
+    "@tailwindcss/postcss": "^4.0.0",
     "@vitejs/plugin-vue": "^5",
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^10.7.2",
-    "autoprefixer": "^10.4.7",
     "axios": "^1",
     "datatransfer-files-promise": "^2.0.0",
     "es-toolkit": "^1.31.0",
@@ -34,7 +34,7 @@
     "js-yaml": "^4.1.0",
     "pinia": "^2.0.28",
     "rollup-plugin-visualizer": "^5.6.0",
-    "tailwindcss": "^3.1.4",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.3.3",
     "vite": "^5",
     "vue": "^3.4",

postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

src/auth/SignupView.vue

@@ -9,7 +9,7 @@ import PageTitle from "@/components/PageTitle.vue";
     <PageTitle>{{ $t("signup") }}</PageTitle>
     <div class="flex flex-wrap gap-6">
       <LayoutSection
-        class="!mt-0 w-64 flex-grow"
+        class="mt-0! w-64 grow"
         :title="$t('signup.existing.title')"
       >
         <p>
@@ -21,7 +21,7 @@ import PageTitle from "@/components/PageTitle.vue";
         </p>
       </LayoutSection>
 
-      <LayoutSection class="!mt-0 w-64 flex-grow" :title="$t('signup.new')">
+      <LayoutSection class="mt-0! w-64 grow" :title="$t('signup.new')">
         <p>{{ $t("signup.new.create") }}</p>
         <ol class="list-decimal pl-6">
           <li>

src/components/HelpBox.vue

@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <div
-    class="my-2 rounded p-2 px-3 max-w-screen-sm"
+    class="my-2 rounded-sm p-2 px-3 max-w-(--breakpoint-sm)"
     :class="
       important
         ? 'bg-blue-100 border-2 border-blue-300 dark:bg-sky-900 dark:border-0 dark:text-sky-200'

src/components/LayoutBox.vue

@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <section
-    class="relative border rounded p-2 bg-white dark:bg-zinc-900 dark:border-zinc-700 overflow-hidden"
+    class="relative border rounded-sm p-2 bg-white dark:bg-zinc-900 dark:border-zinc-700 overflow-hidden"
   >
     <div class="flex justify-between mb-2">
       <h2 v-if="title" class="text-xl font-semibold uppercase">{{ title }}</h2>

src/components/ProgressBar.vue

@@ -16,14 +16,14 @@ const percentStr = computed(() =>
 
 <template>
   <div
-    class="inline-block bg-slate-500 rounded h-6 relative text-center overflow-hidden"
+    class="inline-block bg-slate-500 rounded-sm h-6 relative text-center overflow-hidden"
   >
     <div
       class="bg-sborange-600 h-6 absolute"
       :style="{ width: percent + '%' }"
     ></div>
     <div class="font-semibold text-white relative z-10">
-      <span class="bg-zinc-700 bg-opacity-40 rounded px-1">
+      <span class="bg-zinc-700 bg-opacity-40 rounded-sm px-1">
         {{ percentStr }}
       </span>
     </div>

src/components/SyntaxHighlight.vue

@@ -17,7 +17,7 @@ defineProps<{
     :code
     :language
     :autodetect="false"
-    class="text-xs rounded whitespace-pre-wrap [overflow-wrap:anywhere]"
+    class="text-xs rounded-sm whitespace-pre-wrap [overflow-wrap:anywhere]"
   />
 </template>
 

src/components/TerminalOutput.vue

@@ -1,6 +1,6 @@
 <template>
   <pre
     tabindex="0"
-    class="bg-stone-800 text-lime-50 text-xs p-2 rounded whitespace-pre-wrap [overflow-wrap:anywhere]"
+    class="bg-stone-800 text-lime-50 text-xs p-2 rounded-sm whitespace-pre-wrap [overflow-wrap:anywhere]"
   ><slot /></pre>
 </template>

src/corpus/CorpusStateMessage.vue

@@ -18,15 +18,15 @@ const {
 <template>
   <span
     v-if="stateMessage"
-    class="text-white rounded px-2 py-0.5"
+    class="text-white rounded-sm px-2 py-0.5"
     :class="[
       isEmpty || isNeedingConfig || isNeedingMeta
         ? 'bg-yellow-700'
         : isFailed
           ? 'bg-red-600'
           : isReady
             ? 'bg-lime-700'
-            : '!text-inherit',
+            : 'text-inherit!',
     ]"
   >
     {{ stateMessage }}

src/corpus/config/CorpusConfigCustomEdit.vue

@@ -70,7 +70,7 @@ watchEffect(() => (input.value = config.value || ""));
 
       <PendingContent :on="`corpus/${corpusId}/config`" blocking>
         <div class="flex gap-2 items-baseline my-2">
-          <div class="flex-grow"></div>
+          <div class="grow"></div>
           <div v-if="!isValid" :title="$t('yaml.invalid')">
             <PhFileX class="inline text-xl text-red-600" />
           </div>

src/corpus/exports/CorpusResult.vue

@@ -68,7 +68,7 @@ loadExports();
               <td colspan="2">{{ folder }}/</td>
             </tr>
             <tr v-for="file in exports_" :key="file.name">
-              <td class="!pl-6">
+              <td class="pl-6!">
                 <a href="#" @click.prevent="downloadResultFile(file.path)">
                   <PhDownloadSimple weight="fill" class="inline mb-0.5 mr-1" />
                   {{ file.path.split("/").slice(1).join("/") }}

src/home/HomeNews.vue

@@ -30,7 +30,7 @@ function getDate(date: Date) {
       <article
         v-for="(item, i) in items"
         :key="i"
-        class="w-96 bg-white dark:bg-zinc-800 shadow p-2 px-3 my-2"
+        class="w-96 bg-white dark:bg-zinc-800 shadow-sm p-2 px-3 my-2"
       >
         <header class="mb-2">
           <h3 class="font-semibold">{{ th(item.title) }}</h3>

src/home/HomeNewsFeatured.vue

@@ -20,11 +20,11 @@ function getDate(date: Date) {
 </script>
 
 <template>
-  <div v-if="items.length" class="max-w-screen-md mx-auto">
+  <div v-if="items.length" class="max-w-(--breakpoint-md) mx-auto">
     <article
       v-for="(item, i) in items"
       :key="i"
-      class="bg-sky-50 dark:bg-sky-800 shadow shadow-sky-200 dark:shadow-sky-600 text-sky-800 dark:text-sky-200 p-1 px-2 my-2"
+      class="bg-sky-50 dark:bg-sky-800 shadow-sm shadow-sky-200 dark:shadow-sky-600 text-sky-800 dark:text-sky-200 p-1 px-2 my-2"
     >
       <header class="font-semibold">{{ th(item.title) }}</header>
 

src/home/HomeView.vue

@@ -59,7 +59,7 @@ const logoutUrl = getLogoutUrl();
 
             <div
               v-if="payload && canUserWrite"
-              class="bg-sky-100 dark:bg-sky-900 p-4 rounded shadow-inner flex flex-wrap justify-center items-baseline gap-4"
+              class="bg-sky-100 dark:bg-sky-900 p-4 rounded-sm shadow-inner flex flex-wrap justify-center items-baseline gap-4"
             >
               <div>{{ $t("welcome", { name: payload.name }) }}</div>