chore: update linting rules and adding tailwind linter plugin

apps/www/.vitepress/theme/components/Announcement.vue

@@ -14,6 +14,6 @@ import ArrowRightIcon from '~icons/radix-icons/arrow-right'
     <span class="hidden sm:inline">
       {{ announcementConfig.title }}
     </span>
-    <ArrowRightIcon class="ml-1 h-4 w-4" />
+    <ArrowRightIcon class="ml-1 size-4" />
   </a>
 </template>

apps/www/.vitepress/theme/components/BlockCopyButton.vue

@@ -25,7 +25,7 @@ const { copy, copied } = useClipboard({ source: code })
       <Button
         size="icon"
         variant="outline"
-        class="h-7 w-7 [&_svg]:size-3.5"
+        class="size-7 [&_svg]:size-3.5"
         @click="copy()"
       >
         <span class="sr-only">Copy</span>

apps/www/.vitepress/theme/components/BlockPreview.vue

@@ -120,7 +120,7 @@ watch([style, codeConfig], async () => {
             </a>
             <Popover>
               <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
-                <Info class="h-3.5 w-3.5" />
+                <Info class="size-3.5" />
                 <span class="sr-only">Block description</span>
               </PopoverTrigger>
               <PopoverContent
@@ -145,21 +145,21 @@ watch([style, codeConfig], async () => {
           >
             <ToggleGroupItem
               value="100"
-              class="h-[22px] w-[22px] rounded-sm p-0"
+              class="size-[22px] rounded-sm p-0"
             >
-              <Monitor class="h-3.5 w-3.5" />
+              <Monitor class="size-3.5" />
             </ToggleGroupItem>
             <ToggleGroupItem
               value="60"
-              class="h-[22px] w-[22px] rounded-sm p-0"
+              class="size-[22px] rounded-sm p-0"
             >
-              <Tablet class="h-3.5 w-3.5" />
+              <Tablet class="size-3.5" />
             </ToggleGroupItem>
             <ToggleGroupItem
               value="30"
-              class="h-[22px] w-[22px] rounded-sm p-0"
+              class="size-[22px] rounded-sm p-0"
             >
-              <Smartphone class="h-3.5 w-3.5" />
+              <Smartphone class="size-3.5" />
             </ToggleGroupItem>
           </ToggleGroup>
         </div>
@@ -170,13 +170,13 @@ watch([style, codeConfig], async () => {
         <StyleSwitcher class="h-7" />
         <Popover>
           <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
-            <CircleHelp class="h-3.5 w-3.5" />
+            <CircleHelp class="size-3.5" />
             <span class="sr-only">Block description</span>
           </PopoverTrigger>
           <PopoverContent
             side="top"
             :side-offset="20"
-            class="space-y-3 rounded-[0.5rem] text-sm"
+            class="space-y-3 rounded-lg text-sm"
           >
             <p class="font-medium">
               What is the difference between the New York and Default style?
@@ -231,13 +231,13 @@ watch([style, codeConfig], async () => {
             @load="isLoading = false"
           />
         </ResizablePanel>
-        <ResizableHandle id="block-resizable-handle" class="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 sm:block" />
+        <ResizableHandle id="block-resizable-handle" class="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:-translate-x-px after:rounded-full after:bg-border after:transition-all after:hover:h-10 sm:block" />
         <ResizablePanel id="block-resizable-panel-2" :default-size="0" :min-size="0" />
       </ResizablePanelGroup>
     </TabsContent>
     <TabsContent value="code" class="h-[--container-height]">
       <div
-        class="language-vue !h-full !max-h-[none] !mt-0"
+        class="language-vue !h-full !max-h-none !mt-0"
         v-html="codeHtml"
       />
     </TabsContent>

apps/www/.vitepress/theme/components/Blocks.vue

@@ -41,7 +41,7 @@ import('../../../__registry__/index').then((res) => {
           'rounded-[6px]',
         )"
       >
-        <GitHubIcon class="mr-2 h-4 w-4" />
+        <GitHubIcon class="mr-2 size-4" />
         GitHub
       </a>
     </PageAction>

apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue

@@ -36,11 +36,11 @@ const onSubmit = handleSubmit((values) => {
   >
     <SheetTrigger as-child>
       <Button
-        class="w-9 h-9"
+        class="size-9"
         :variant="'ghost'"
         :size="'icon'"
       >
-        <RadixIconsGear class="w-5 h-5" />
+        <RadixIconsGear class="size-5" />
       </Button>
     </SheetTrigger>
     <SheetContent>

apps/www/.vitepress/theme/components/CustomizerCode.vue

@@ -52,8 +52,8 @@ async function copyCode() {
 </code>
 </pre>
     <Button size="sm" class="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground" @click="copyCode">
-      <CheckIcon v-if="copied" class="mr-2 h-4 w-4" />
-      <CopyIcon v-else class="mr-2 h-4 w-4" />
+      <CheckIcon v-if="copied" class="mr-2 size-4" />
+      <CopyIcon v-else class="mr-2 size-4" />
       {{ copied ? 'Copied' : 'Copy' }}
     </Button>
   </div>

apps/www/.vitepress/theme/components/ExamplesNav.vue

@@ -77,10 +77,10 @@ const currentExample = computed(() => examples.find(ex => path.value.startsWith(
     <a
       v-if="currentExample"
       :href="currentExample?.code" target="_blank" rel="nofollow"
-      class="absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-medium md:flex"
+      class="absolute right-0 top-0 hidden items-center rounded-lg text-sm font-medium md:flex"
     >
       View code
-      <ArrowRightIcon class="ml-1 h-4 w-4" />
+      <ArrowRightIcon class="ml-1 size-4" />
     </a>
   </div>
 </template>

apps/www/.vitepress/theme/components/InlineThemePicker.vue

@@ -22,7 +22,7 @@ const { theme, setTheme } = useConfigStore()
         <TooltipTrigger as-child>
           <button
             :key="index"
-            class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-border text-xs"
+            class="flex size-9 items-center justify-center rounded-full border-2 border-border text-xs"
             :class="
               color === theme
                 ? 'border-primary'
@@ -31,12 +31,12 @@ const { theme, setTheme } = useConfigStore()
             @click="setTheme(color)"
           >
             <span
-              class="flex h-6 w-6 items-center justify-center rounded-full"
+              class="flex size-6 items-center justify-center rounded-full"
               :style="{ backgroundColor: colors[color][6].rgb }"
             >
               <RadixIconsCheck
                 v-if="color === theme"
-                class="h-4 w-4 text-white"
+                class="size-4 text-white"
               />
             </span>
           </button>

apps/www/.vitepress/theme/components/LandingPage.vue

@@ -37,7 +37,7 @@ import MailExample from '@/examples/mail/Example.vue'
           'rounded-[6px]',
         )"
       >
-        <GitHubIcon class="mr-2 h-4 w-4" />
+        <GitHubIcon class="mr-2 size-4" />
         GitHub
       </a>
     </PageAction>
@@ -54,7 +54,7 @@ import MailExample from '@/examples/mail/Example.vue'
     />
   </section>
   <section class="hidden md:block">
-    <div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
+    <div class="overflow-hidden rounded-lg border bg-background shadow">
       <MailExample />
     </div>
   </section>

apps/www/.vitepress/theme/components/Logo.vue

@@ -3,7 +3,7 @@
 
 <template>
   <a href="/" class="mr-4 md:mr-2 lg:mr-6 flex items-center lg:space-x1 xl:space-x-2">
-    <svg class="h-6 w-6" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg class="size-6" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_102_1338)">
         <path d="M208 128L128 208" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
         <path d="M192 40L40 192" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />

apps/www/.vitepress/theme/components/MobileNav.vue

@@ -21,7 +21,7 @@ const open = ref(false)
           viewBox="0 0 24 24"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
+          class="size-5"
         >
           <path
             d="M3 5H11"

apps/www/.vitepress/theme/components/ThemeCustomizer.vue

@@ -43,12 +43,12 @@ const { isDark } = useData()
           @click="setTheme(color)"
         >
           <span
-            class="h-5 w-5 rounded-full flex items-center justify-center"
+            class="size-5 rounded-full flex items-center justify-center"
             :style="{ backgroundColor: colors[color][7].rgb }"
           >
             <RadixIconsCheck
               v-if="color === theme"
-              class="h-3 w-3 text-white"
+              class="size-3 text-white"
             />
           </span>
           <span class="ml-2 text-xs capitalize">
@@ -88,7 +88,7 @@ const { isDark } = useData()
           :class="{ 'border-2 border-foreground': !isDark }"
           @click="isDark = false"
         >
-          <RadixIconsSun class="w-4 h-4 mr-2" />
+          <RadixIconsSun class="size-4 mr-2" />
           <span class="text-xs">Light</span>
         </Button>
         <Button
@@ -97,7 +97,7 @@ const { isDark } = useData()
           :class="{ 'border-2 border-foreground': isDark }"
           @click="isDark = true"
         >
-          <RadixIconsMoon class="w-4 h-4 mr-2" />
+          <RadixIconsMoon class="size-4 mr-2" />
           <span class="text-xs">Dark</span>
         </Button>
       </div>

apps/www/.vitepress/theme/components/ThemePopover.vue

@@ -33,11 +33,11 @@ watch(radius, (radius) => {
   <Popover>
     <PopoverTrigger as-child>
       <Button
-        class="w-9 h-9"
+        class="size-9"
         :variant="'ghost'"
         :size="'icon'"
       >
-        <Paintbrush class="w-4 h-4" />
+        <Paintbrush class="size-4" />
       </Button>
     </PopoverTrigger>
     <PopoverContent :side-offset="8" align="end" class="w-96">

apps/www/.vitepress/theme/components/breadcrumb/BreadCrumbItem.vue

@@ -27,7 +27,7 @@ const route = useRoute()
       <slot />
       <ChevronRight
         v-if="!props.lastItem"
-        class="flex-shrink-0 h-3 w-3 text-muted mx-2"
+        class="flex-shrink-0 size-3 text-muted mx-2"
       />
     </component>
   </li>

apps/www/.vitepress/theme/layout/ExamplesLayout.vue

@@ -45,7 +45,7 @@ import { cn } from '@/lib/utils'
     </PageHeader>
     <section>
       <ExamplesNav />
-      <div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
+      <div class="overflow-hidden rounded-lg border bg-background shadow">
         <slot />
       </div>
     </section>

apps/www/.vitepress/theme/layout/MainLayout.vue

@@ -122,7 +122,7 @@ watch(() => $route.path, (n) => {
             <div class="w-full flex-1 md:w-auto md:flex-none">
               <Button
                 variant="outline"
-                class="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
+                class="relative h-8 w-full justify-start rounded-lg bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
                 @click="isOpen = true"
               >
                 <span class="hidden lg:inline-flex">Search documentation...</span>
@@ -142,25 +142,25 @@ watch(() => $route.path, (n) => {
                 v-for="link in links"
                 :key="link.name"
                 as="a"
-                class="w-9 h-9"
+                class="size-9"
                 :href="link.href" target="_blank"
                 :variant="'ghost'"
                 :size="'icon'"
               >
-                <component :is="link.icon" class="w-5 h-5" />
+                <component :is="link.icon" class="size-5" />
               </Button>
 
               <ClientOnly>
                 <Button
-                  class="w-9 h-9"
+                  class="size-9"
                   aria-label="Toggle dark mode"
                   :variant="'ghost'"
                   :size="'icon'"
                   @click="toggleDark()"
                 >
                   <component
                     :is="isDark ? RadixIconsSun : RadixIconsMoon"
-                    class="w-5 h-5 text-foreground"
+                    class="size-5 text-foreground"
                   />
                 </Button>
               </ClientOnly>
@@ -250,7 +250,7 @@ watch(() => $route.path, (n) => {
                   class="py-3"
                   @select="handleSelectLink(item)"
                 >
-                  <File class="mr-2 h-5 w-5" />
+                  <File class="mr-2 size-5" />
                   <span>{{ item.title }}</span>
                 </CommandItem>
               </CommandGroup>
@@ -265,7 +265,7 @@ watch(() => $route.path, (n) => {
                   @select="
                     handleSelectLink(subItem)"
                 >
-                  <Circle class="mr-2 h-4 w-4" />
+                  <Circle class="mr-2 size-4" />
                   <span>{{ subItem.title }}</span>
                 </CommandItem>
               </CommandGroup>
@@ -281,7 +281,7 @@ watch(() => $route.path, (n) => {
                     }
                   "
                 >
-                  <RadixIconsSun class="mr-2 h-5 w-5" />
+                  <RadixIconsSun class="mr-2 size-5" />
                   <span>Light Theme</span>
                 </CommandItem>
                 <CommandItem
@@ -294,7 +294,7 @@ watch(() => $route.path, (n) => {
                     }
                   "
                 >
-                  <RadixIconsMoon class="mr-2 h-5 w-5" />
+                  <RadixIconsMoon class="mr-2 size-5" />
                   <span>Dark Theme</span>
                 </CommandItem>
               </CommandGroup>

apps/www/.vitepress/theme/layout/ThemingLayout.vue

@@ -71,8 +71,8 @@ watch(radius, (radius) => {
 
         <Drawer>
           <DrawerTrigger as-child>
-            <Button variant="outline" class="md:hidden h-9 rounded-[0.5rem]">
-              <Paintbrush class="w-4 h-4 mr-2" />
+            <Button variant="outline" class="md:hidden h-9 rounded-lg">
+              <Paintbrush class="size-4 mr-2" />
               Customize
             </Button>
           </DrawerTrigger>
@@ -83,8 +83,8 @@ watch(radius, (radius) => {
 
         <Popover>
           <PopoverTrigger as-child>
-            <Button variant="outline" class="hidden md:flex h-9 rounded-[0.5rem]">
-              <Paintbrush class="w-4 h-4 mr-2" />
+            <Button variant="outline" class="hidden md:flex h-9 rounded-lg">
+              <Paintbrush class="size-4 mr-2" />
               Customize
             </Button>
           </PopoverTrigger>
@@ -95,7 +95,7 @@ watch(radius, (radius) => {
 
         <Dialog>
           <DialogTrigger as-child>
-            <Button class="h-9 ml-2 rounded-[0.5rem]">
+            <Button class="h-9 ml-2 rounded-lg">
               Copy code
             </Button>
           </DialogTrigger>

apps/www/src/content/docs/components/button.md

@@ -45,7 +45,7 @@ const buttonVariants = cva(
         default: 'h-10 px-4 py-2',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
+        icon: 'size-10',
       },
     },
     defaultVariants: {

apps/www/src/content/docs/components/combobox.md

@@ -64,7 +64,7 @@ const value = ref('')
       >
         {{ value ? frameworks.find((framework) => framework.value === value)?.label : 'Select framework...' }}
 
-        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-[200px] p-0">

apps/www/src/content/docs/components/data-table.md

@@ -321,9 +321,9 @@ function copy(id: string) {
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <Button variant="ghost" class="w-8 h-8 p-0">
+      <Button variant="ghost" class="size-8 p-0">
         <span class="sr-only">Open menu</span>
-        <MoreHorizontal class="w-4 h-4" />
+        <MoreHorizontal class="size-4" />
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end">