style: add tailwind eslint plugin

Signed-off-by: ZTL-UwU <[email protected]>

app.vue

@@ -3,12 +3,12 @@
   <ConfigProvider :use-id="useIdFunction">
     <LayoutHeader />
 
-    <div v-if="$route.path !== '/'" class="border-b min-h-screen">
+    <div v-if="$route.path !== '/'" class="min-h-screen border-b">
       <div
-        class="px-4 md:px-8 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
+        class="flex-1 items-start px-4 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 md:px-8 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
         :class="[config.main.padded && 'container']"
       >
-        <aside class="fixed top-[102px] md:top-[60px] z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto">
+        <aside class="fixed top-[102px] z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto md:sticky md:top-[60px] md:block">
           <LayoutAside :is-mobile="false" />
         </aside>
         <NuxtPage />

components/ThemeCustomizer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="grid gap-6">
     <div class="grid space-y-1">
-      <h1 class="text-lg text-foreground font-semibold">
+      <h1 class="text-lg font-semibold text-foreground">
         Customize
       </h1>
       <p class="text-sm text-muted-foreground">
@@ -15,10 +15,10 @@
           <UiButton
             class="justify-start gap-2"
             variant="outline"
-            :class="{ 'border-primary border-2': theme === color }"
+            :class="{ 'border-2 border-primary': theme === color }"
             @click="setTheme(color)"
           >
-            <span class="h-5 w-5 flex items-center justify-center rounded-full" :style="{ backgroundColor: backgroundColor(color) }">
+            <span class="flex size-5 items-center justify-center rounded-full" :style="{ backgroundColor: backgroundColor(color) }">
               <Icon v-if="theme === color" name="lucide:check" size="16" class="text-white" />
             </span>
             <span class="text-xs capitalize">{{ color }}</span>
@@ -33,7 +33,7 @@
           <UiButton
             class="justify-center gap-2"
             variant="outline"
-            :class="{ 'border-primary border-2': radius === r }"
+            :class="{ 'border-2 border-primary': radius === r }"
             @click="setRadius(r)"
           >
             <span class="text-xs capitalize">{{ r }}</span>
@@ -47,7 +47,7 @@
         <UiButton
           class="justify-center gap-2"
           variant="outline"
-          :class="{ 'border-primary border-2': colorMode.preference === 'light' }"
+          :class="{ 'border-2 border-primary': colorMode.preference === 'light' }"
           @click="colorMode.preference = 'light'"
         >
           <Icon name="lucide:sun" size="16" />
@@ -56,7 +56,7 @@
         <UiButton
           class="justify-center gap-2"
           variant="outline"
-          :class="{ 'border-primary border-2': colorMode.preference === 'dark' }"
+          :class="{ 'border-2 border-primary': colorMode.preference === 'dark' }"
           @click="colorMode.preference = 'dark'"
         >
           <Icon name="lucide:moon" size="16" />
@@ -65,7 +65,7 @@
         <UiButton
           class="justify-center gap-2"
           variant="outline"
-          :class="{ 'border-primary border-2': colorMode.preference === 'system' }"
+          :class="{ 'border-2 border-primary': colorMode.preference === 'system' }"
           @click="colorMode.preference = 'system'"
         >
           <Icon name="lucide:monitor" size="16" />

components/content/Alert.vue

@@ -1,6 +1,6 @@
 <template>
   <UiAlert
-    class="[&:not(:first-child)]:mt-5 transition-all"
+    class="transition-all [&:not(:first-child)]:mt-5"
     :class="[typeTwClass[type], to && 'cursor-pointer hover:bg-muted/50']"
     @click="alertClick"
   >
@@ -10,7 +10,7 @@
     </UiAlertTitle>
     <UiAlertDescription>
       <div class="flex flex-row space-x-2">
-        <Icon v-if="icon && !title" :name="icon" size="16" class="self-center mb-[2px] min-w-5" />
+        <Icon v-if="icon && !title" :name="icon" size="16" class="mb-[2px] min-w-5 self-center" />
         <span :class="[to && 'pr-3']">
           <slot />
         </span>

components/content/Card.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="[&:not(:first-child)]:mt-5 group-has-[div]:mt-0">
+  <div class="group-has-[div]:mt-0 [&:not(:first-child)]:mt-5">
     <NuxtLink :to="to" :target="target">
-      <UiCard class="transition-all relative h-full" :class="[to && 'hover:bg-muted']">
+      <UiCard class="relative h-full transition-all" :class="[to && 'hover:bg-muted']">
         <UiCardHeader v-if="icon || title || $slots.title || description || $slots.description">
           <Icon v-if="icon" class="mb-2" :name="icon" size="24" />
           <UiCardTitle v-if="title || $slots.title">

components/content/CardGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="[&:not(:first-child)]:mt-5 grid md:grid-cols-2 gap-4 group">
+  <div class="group grid gap-4 md:grid-cols-2 [&:not(:first-child)]:mt-5">
     <slot />
   </div>
 </template>

components/content/CodeCopy.vue

@@ -4,14 +4,14 @@
       <Icon
         v-if="copied === false"
         name="lucide:copy"
-        class="block self-center cursor-pointer text-muted-foreground hover:text-primary"
+        class="block cursor-pointer self-center text-muted-foreground hover:text-primary"
         @click="handleClick"
       />
       <Icon
         v-else
         ref="checkIconRef"
         name="lucide:check"
-        class="block self-center cursor-pointer text-muted-foreground hover:text-primary"
+        class="block cursor-pointer self-center text-muted-foreground hover:text-primary"
       />
     </Transition>
   </div>

components/content/Field.vue

@@ -2,7 +2,7 @@
   <div class="[&:not(:first-child)]:mt-4 [&:not(:first-child)]:pt-4">
     <div class="mb-2">
       <div class="flex space-x-2">
-        <span class="font-bold text-md text-primary">
+        <span class="text-md font-bold text-primary">
           {{ name }}
         </span>
         <span v-if="required" class="self-center font-mono text-sm text-muted-foreground">

components/content/Hero.vue

@@ -14,7 +14,7 @@
       <span class="hidden sm:inline">
         {{ announcement.title }}
       </span>
-      <Icon name="lucide:arrow-right" class="ml-1 h-4 w-4" />
+      <Icon name="lucide:arrow-right" class="ml-1 size-4" />
     </NuxtLink>
 
     <h1 class="text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]">

components/content/HeroAlt.vue

@@ -11,7 +11,7 @@
         <UiSeparator class="mx-2 h-4" orientation="vertical" />
       </template>
       <span class="underline-offset-4 hover:underline">{{ announcement.title }}</span>
-      <Icon name="lucide:arrow-right" class="ml-1 h-4 w-4" />
+      <Icon name="lucide:arrow-right" class="ml-1 size-4" />
     </NuxtLink>
 
     <h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">

components/content/Kbd.vue

@@ -1,6 +1,6 @@
 <template>
   <kbd
-    class="inline-flex pointer-events-none h-5 select-none items-center gap-1 rounded border border-border bg-muted font-sans font-medium"
+    class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-muted font-sans font-medium"
     :class="sizeClasses[size]"
   >
     <slot />

components/content/ProseA.vue

@@ -2,7 +2,7 @@
   <NuxtLink
     :href="href"
     :target="target"
-    class="underline-offset-4 underline font-semibold"
+    class="font-semibold underline underline-offset-4"
   >
     <slot />
   </NuxtLink>

components/content/ProseCode.vue

@@ -1,21 +1,21 @@
 <template>
   <UiCard
-    class="[&:not(:first-child)]:mt-5 [&:not(:last-child)]:mb-5 relative overflow-hidden"
-    :class="[inGroup && 'rounded-t-none border-none mb-0']"
+    class="relative overflow-hidden [&:not(:first-child)]:mt-5 [&:not(:last-child)]:mb-5"
+    :class="[inGroup && 'mb-0 rounded-t-none border-none']"
   >
-    <div v-if="!inGroup && filename" class="p-3 border-b flex text-sm font-mono">
-      <Icon v-if="icon" :name="icon" class="self-center mr-1.5" />
+    <div v-if="!inGroup && filename" class="flex border-b p-3 font-mono text-sm">
+      <Icon v-if="icon" :name="icon" class="mr-1.5 self-center" />
       {{ filename }}
       <CodeCopy :code="code" class="ml-auto mr-1" />
     </div>
 
-    <span v-if="!filename" class="absolute top-3 right-3">
+    <span v-if="!filename" class="absolute right-3 top-3">
       <CodeCopy :code="code" />
     </span>
     <div class="bg-muted/30">
       <UiScrollArea>
         <div
-          class="py-3 text-sm overflow-x-auto"
+          class="overflow-x-auto py-3 text-sm"
           :class="[!filename && 'inline-copy', !language && 'pl-3', !inGroup && 'in-group']"
         >
           <slot />

components/content/ProseCodeInline.vue

@@ -1,5 +1,5 @@
 <template>
-  <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono inline-code">
+  <code class="inline-code relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono">
     <slot />
   </code>
 </template>

components/content/ProseOl.vue

@@ -1,5 +1,5 @@
 <template>
-  <ol class="[&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-6 ml-6 [&>li:not(:first-child)]:mt-2 list-decimal list-inside">
+  <ol class="ml-6 list-inside list-decimal [&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-6 [&>li:not(:first-child)]:mt-2">
     <slot />
   </ol>
 </template>

components/content/ProseTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="[&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-6 w-full overflow-y-auto">
+  <div class="w-full overflow-y-auto [&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-6">
     <table class="w-full">
       <slot />
     </table>

components/content/ProseUl.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="[&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-6 ml-6 list-disc [&>li:not(:first-child)]:mt-2">
+  <ul class="ml-6 list-disc [&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-6 [&>li:not(:first-child)]:mt-2">
     <slot />
   </ul>
 </template>

components/content/ReadMore.vue

@@ -1,6 +1,6 @@
 <template>
   <Alert :to="to" :target="target" icon="lucide:bookmark">
-    Read more in <span class="capitalize font-semibold">{{ computedTitle }}</span>
+    Read more in <span class="font-semibold capitalize">{{ computedTitle }}</span>
   </Alert>
 </template>
 

components/content/Tabs.vue

@@ -13,7 +13,7 @@
         <Icon
           v-if="icon(slot?.props)"
           :name="icon(slot?.props)!"
-          class="self-center mr-1.5"
+          class="mr-1.5 self-center"
         />
         {{ label(slot.props) }}
       </UiTabsTrigger>
@@ -30,27 +30,27 @@
 
   <UiCard v-else-if="variant === 'card'" class="[&:not(:first-child)]:mt-5">
     <UiScrollArea>
-      <div class="border-b p-0.5 flex text-sm relative overflow-x-auto">
+      <div class="relative flex overflow-x-auto border-b p-0.5 text-sm">
         <div class="flex p-1">
           <div
             v-for="(slot, i) in ($slots.default?.() ?? [])"
             :key="`${i}${label(slot.props)}`"
             :value="label(slot.props)"
-            class="flex px-3 py-1.5 rounded-md text-muted-foreground transition-all duration-75 cursor-pointer"
+            class="flex cursor-pointer rounded-md px-3 py-1.5 text-muted-foreground transition-all duration-75"
             :class="[activeTabIndex === i && 'bg-muted text-primary']"
             @mousedown.left="activeTabIndex = i"
           >
             <Icon
               v-if="icon(slot?.props)"
               :name="icon(slot?.props)!"
-              class="self-center mr-1.5"
+              class="mr-1.5 self-center"
             />
             {{ label(slot.props) }}
           </div>
         </div>
         <CodeCopy
           v-if="$slots.default?.()[activeTabIndex]?.props?.code"
-          class="self-center ml-auto mr-3 pl-2"
+          class="ml-auto mr-3 self-center pl-2"
           :code="$slots.default?.()[activeTabIndex]?.props?.code"
         />
       </div>

components/layout/Aside.vue

@@ -1,14 +1,14 @@
 <template>
-  <UiScrollArea orientation="vertical" class="relative overflow-hidden h-full py-6 pr-6 text-sm" type="hover">
-    <LayoutHeaderNavMobile v-if="isMobile" class="border-b pb-2 mb-5" />
+  <UiScrollArea orientation="vertical" class="relative h-full overflow-hidden py-6 pr-6 text-sm" type="hover">
+    <LayoutHeaderNavMobile v-if="isMobile" class="mb-5 border-b pb-2" />
     <LayoutSearchButton v-if="config.search.inAside" />
-    <ul v-if="config.aside.useLevel" class="pb-4 border-b mb-1">
+    <ul v-if="config.aside.useLevel" class="mb-1 border-b pb-4">
       <li v-for="link in navigation" :key="link.id">
         <NuxtLink
           :to="link._path"
-          class="px-3 py-2 mb-1 hover:bg-muted rounded-md w-full flex gap-2 transition-all"
+          class="mb-1 flex w-full gap-2 rounded-md px-3 py-2 transition-all hover:bg-muted"
           :class="[
-            path.startsWith(link._path) && 'bg-muted hover:bg-muted font-semibold text-primary',
+            path.startsWith(link._path) && 'bg-muted font-semibold text-primary hover:bg-muted',
           ]"
         >
           <Icon

components/layout/AsideTreeItem.vue

@@ -1,15 +1,15 @@
 <template>
   <li
-    class="rounded-md transition-all underline-offset-4 [&:not(:first-child)]:pt-3"
+    class="rounded-md underline-offset-4 transition-all [&:not(:first-child)]:pt-3"
     :class="[level > 0 && 'pl-4']"
   >
     <UiCollapsible v-if="link.children" v-model:open="isOpen">
       <UiCollapsibleTrigger class="w-full text-left">
-        <div class="w-full flex gap-1">
+        <div class="flex w-full gap-1">
           <Icon
             v-if="link.icon"
             :name="link.icon"
-            class="self-center mr-1"
+            class="mr-1 self-center"
             size="15"
           />
           {{ link.title }}
@@ -27,13 +27,13 @@
     <NuxtLink
       v-else
       :to="link._path"
-      class="w-full flex hover:underline text-muted-foreground gap-1"
+      class="flex w-full gap-1 text-muted-foreground hover:underline"
       :class="[isActive && 'font-medium text-primary']"
     >
       <Icon
         v-if="link.icon"
         :name="link.icon"
-        class="self-center mr-1"
+        class="mr-1 self-center"
         size="15"
       />
       {{ link.title }}

components/layout/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="text-muted-foreground py-6 md:px-8 md:py-0">
+  <footer class="py-6 text-muted-foreground md:px-8 md:py-0">
     <div class="container flex flex-col items-center justify-between gap-2 md:h-24 md:flex-row">
       <span class="text-sm">
         {{ footer.credits }}

components/layout/Header.vue

@@ -1,16 +1,16 @@
 <template>
   <header
-    class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg"
+    class="sticky top-0 z-40 bg-background/80 backdrop-blur-lg"
     :class="{ 'lg:border-b': config.header.border }"
   >
     <div
-      class="px-4 md:px-8 flex h-14 items-center gap-2 justify-between"
-      :class="{ 'border-b lg:border-none': config.header.border, 'max-w-screen-2xl container': config.main.padded }"
+      class="flex h-14 items-center justify-between gap-2 px-4 md:px-8"
+      :class="{ 'border-b lg:border-none': config.header.border, 'container max-w-screen-2xl': config.main.padded }"
     >
-      <LayoutHeaderLogo class="hidden md:flex flex-1" />
+      <LayoutHeaderLogo class="hidden flex-1 md:flex" />
       <LayoutMobileNav />
       <LayoutHeaderLogo v-if="config.header.showTitleInMobile" class="flex md:hidden" />
-      <LayoutHeaderNav class="hidden lg:flex flex-1" />
+      <LayoutHeaderNav class="hidden flex-1 lg:flex" />
       <div class="flex flex-1 justify-end gap-2">
         <LayoutSearchButton v-if="!config.search.inAside && config.search.style === 'input'" />
         <div class="flex">

components/layout/Header/Logo.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <NuxtLink v-if="logo.light && logo.dark" to="/" class="flex">
-      <NuxtImg :src="logo.light" class="dark:hidden h-7" />
-      <NuxtImg :src="logo.dark" class="hidden dark:block h-7" />
-      <span v-if="showTitle && title" class="self-center font-bold ml-3">
+      <NuxtImg :src="logo.light" class="h-7 dark:hidden" />
+      <NuxtImg :src="logo.dark" class="hidden h-7 dark:block" />
+      <span v-if="showTitle && title" class="ml-3 self-center font-bold">
         {{ title }}
       </span>
     </NuxtLink>