diff --git a/.prettierrc.mjs b/.prettierrc.mjs
index 6a48a4e79..61f7912ce 100644
--- a/.prettierrc.mjs
+++ b/.prettierrc.mjs
@@ -1,3 +1,4 @@
+/** @type {import("prettier").Config & import("prettier-plugin-tailwindcss").PluginOptions} */
 export default {
   semi: false,
   singleQuote: false,
@@ -6,4 +7,25 @@ export default {
   trailingComma: "all",
   objectWrap: "preserve",
   plugins: ["prettier-plugin-tailwindcss"],
+  tailwindConfig: "./apps/desktop/tailwind.config.ts",
+  overrides: [
+    {
+      files: "apps/mobile/**/*.{css,js,jsx,ts,tsx}",
+      options: {
+        tailwindConfig: "./apps/mobile/tailwind.config.ts",
+      },
+    },
+    {
+      files: "apps/mobile/web-app/html-renderer/**/*.{css,js,jsx,ts,tsx}",
+      options: {
+        tailwindConfig: "./apps/mobile/web-app/html-renderer/tailwind.config.ts",
+      },
+    },
+    {
+      files: "apps/ssr/**/*.{css,html,js,jsx,ts,tsx}",
+      options: {
+        tailwindConfig: "./apps/ssr/tailwind.config.ts",
+      },
+    },
+  ],
 }
diff --git a/apps/desktop/AGENTS.md b/apps/desktop/AGENTS.md
index 67b689b6c..7a27276fb 100644
--- a/apps/desktop/AGENTS.md
+++ b/apps/desktop/AGENTS.md
@@ -173,7 +173,7 @@ For hover states on buttons or interactive areas within glass containers:
   }}
 >
   {/* Subtle shine effect */}
-  <div className="via-gray/5 absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent to-transparent transition-transform duration-700 group-hover:translate-x-full dark:via-white/5" />
+  <div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-gray/5 to-transparent transition-transform duration-700 group-hover:translate-x-full dark:via-white/5" />
 </button>
 ```
 
diff --git a/apps/desktop/layer/main/src/ipc/services/auth.ts b/apps/desktop/layer/main/src/ipc/services/auth.ts
index 4e46d72bd..5426fa08b 100644
--- a/apps/desktop/layer/main/src/ipc/services/auth.ts
+++ b/apps/desktop/layer/main/src/ipc/services/auth.ts
@@ -22,7 +22,8 @@ export class AuthService extends IpcService {
 
     const apiURL = env.VITE_API_URL
     const url = new URL(apiURL)
-    const isSecure = url.protocol === "https:" || url.hostname === "localhost" || url.hostname === "127.0.0.1"
+    const isSecure =
+      url.protocol === "https:" || url.hostname === "localhost" || url.hostname === "127.0.0.1"
     const isLocalhost = url.hostname === "localhost" || url.hostname === "127.0.0.1"
     const cookieNames = [
       BETTER_AUTH_COOKIE_NAME_SESSION_TOKEN,
diff --git a/apps/desktop/layer/renderer/src/lib/api-client.ts b/apps/desktop/layer/renderer/src/lib/api-client.ts
index 654002bbf..21d29d740 100644
--- a/apps/desktop/layer/renderer/src/lib/api-client.ts
+++ b/apps/desktop/layer/renderer/src/lib/api-client.ts
@@ -1,5 +1,5 @@
-import { env } from "@follow/shared/env.desktop"
 import { IN_ELECTRON } from "@follow/shared/constants"
+import { env } from "@follow/shared/env.desktop"
 import { whoami } from "@follow/store/user/getters"
 import { userActions } from "@follow/store/user/store"
 import { createDesktopAPIHeaders } from "@follow/utils/headers"
@@ -9,8 +9,7 @@ import PKG from "@pkg"
 import { NetworkStatus, setApiStatus } from "~/atoms/network"
 import { setLoginModalShow } from "~/atoms/user"
 
-import { getAuthSessionToken } from "./client-session"
-import { getClientId, getSessionId } from "./client-session"
+import { getAuthSessionToken, getClientId, getSessionId } from "./client-session"
 
 export const followClient = new FollowClient({
   credentials: "include",
@@ -34,7 +33,7 @@ followClient.addRequestInterceptor(async (ctx) => {
   if (authSessionToken && !headers.has("Cookie") && !headers.has("cookie")) {
     headers.set(
       "Cookie",
-      `__Secure-better-auth.session_token=${authSessionToken}; better-auth.session_token=${authSessionToken}`
+      `__Secure-better-auth.session_token=${authSessionToken}; better-auth.session_token=${authSessionToken}`,
     )
   }
 
diff --git a/apps/desktop/layer/renderer/src/modules/auth/Form.tsx b/apps/desktop/layer/renderer/src/modules/auth/Form.tsx
index 1427f06d0..96b0d7a9a 100644
--- a/apps/desktop/layer/renderer/src/modules/auth/Form.tsx
+++ b/apps/desktop/layer/renderer/src/modules/auth/Form.tsx
@@ -372,17 +372,20 @@ export function RegisterForm({
             headers,
           }),
         )
-      : await signUp.email({
-          email: values.email,
-          password: values.password,
-          name: values.email.split("@")[0]!,
-          callbackURL: "/",
-        }, {
-          onError(context) {
-            toast.error(context.error.message)
+      : await signUp.email(
+          {
+            email: values.email,
+            password: values.password,
+            name: values.email.split("@")[0]!,
+            callbackURL: "/",
           },
-          headers,
-        })
+          {
+            onError(context) {
+              toast.error(context.error.message)
+            },
+            headers,
+          },
+        )
 
     if (result?.error) {
       return result
diff --git a/apps/ssr/client/pages/(login)/register.tsx b/apps/ssr/client/pages/(login)/register.tsx
index e2c2085c3..f551befeb 100644
--- a/apps/ssr/client/pages/(login)/register.tsx
+++ b/apps/ssr/client/pages/(login)/register.tsx
@@ -69,27 +69,30 @@ function RegisterForm() {
 
     try {
       const recaptchaToken = await requestRecaptchaToken("ssr_register")
-      await signUp.email({
-        email: values.email,
-        password: values.password,
-        name: values.email.split("@")[0]!,
-        callbackURL: "/",
-      }, {
-        onSuccess() {
-          tracker.register({
-            type: "email",
-          })
-          navigate("/login")
+      await signUp.email(
+        {
+          email: values.email,
+          password: values.password,
+          name: values.email.split("@")[0]!,
+          callbackURL: "/",
         },
-        onError(context) {
-          toast.error(context.error.message)
+        {
+          onSuccess() {
+            tracker.register({
+              type: "email",
+            })
+            navigate("/login")
+          },
+          onError(context) {
+            toast.error(context.error.message)
+          },
+          headers: recaptchaToken
+            ? {
+                "x-token": `r3:${recaptchaToken}`,
+              }
+            : undefined,
         },
-        headers: recaptchaToken
-          ? {
-              "x-token": `r3:${recaptchaToken}`,
-            }
-          : undefined,
-      })
+      )
     } finally {
       setIsSubmitting(false)
     }
diff --git a/apps/ssr/tailwind.config.ts b/apps/ssr/tailwind.config.ts
index b702de37e..0266b83a5 100644
--- a/apps/ssr/tailwind.config.ts
+++ b/apps/ssr/tailwind.config.ts
@@ -1,7 +1,7 @@
 import { extendConfig } from "@follow/configs/tailwindcss/web"
 import daisyui from "daisyui"
-import { withUIKit } from "tailwindcss-uikit-colors/macos"
 import type { Config } from "tailwindcss"
+import { withUIKit } from "tailwindcss-uikit-colors/macos"
 
 /** @type {import('tailwindcss').Config} */
 export default withUIKit(
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 1c032ec94..b8f59ce91 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -37,6 +37,14 @@ export default defineConfig(
     },
     rules: {
       "no-debug/no-debug-stack": "error",
+      "tailwindcss/classnames-order": "off",
+      "tailwindcss/enforces-negative-arbitrary-values": "off",
+      "tailwindcss/enforces-shorthand": "off",
+      "tailwindcss/migration-from-tailwind-2": "off",
+      "tailwindcss/no-arbitrary-value": "off",
+      "tailwindcss/no-contradicting-classname": "off",
+      "tailwindcss/no-custom-classname": "off",
+      "tailwindcss/no-unnecessary-arbitrary-value": "off",
       "@eslint-react/no-clone-element": 0,
       "@eslint-react/hooks-extra/no-direct-set-state-in-use-effect": 0,
       "@eslint-react/dom/no-flush-sync": 1,
diff --git a/packages/internal/components/src/ui/avatar/index.tsx b/packages/internal/components/src/ui/avatar/index.tsx
index 0842052e3..c881dde16 100644
--- a/packages/internal/components/src/ui/avatar/index.tsx
+++ b/packages/internal/components/src/ui/avatar/index.tsx
@@ -42,7 +42,7 @@ export const AvatarFallback = ({
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "bg-material-opaque flex size-full items-center justify-center rounded-full",
+      "flex size-full items-center justify-center rounded-full bg-material-opaque",
       className,
     )}
     {...props}
diff --git a/packages/internal/components/src/ui/button/action-button.tsx b/packages/internal/components/src/ui/button/action-button.tsx
index bdbc5fb97..a9f434a1a 100644
--- a/packages/internal/components/src/ui/button/action-button.tsx
+++ b/packages/internal/components/src/ui/button/action-button.tsx
@@ -108,8 +108,8 @@ export const ActionButton = ({
       className={cn(
         "no-drag-region pointer-events-auto inline-flex items-center justify-center",
         active && typeof icon !== "function" && "bg-zinc-500/15 hover:bg-zinc-500/20",
-        "hover:bg-theme-item-hover data-[state=open]:bg-theme-item-active rounded-md duration-200",
-        "focus-visible:ring-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "rounded-md duration-200 hover:bg-theme-item-hover data-[state=open]:bg-theme-item-active",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed disabled:opacity-50",
         clickableDisabled && "cursor-not-allowed opacity-50",
         shouldHighlightMotion &&
@@ -188,7 +188,7 @@ export const ActionButton = ({
                 )}
               </div>
               {tooltipDescription ? (
-                <div className="text-text-secondary text-body">{tooltipDescription}</div>
+                <div className="text-body text-text-secondary">{tooltipDescription}</div>
               ) : null}
             </TooltipContent>
           </TooltipPortal>
diff --git a/packages/internal/components/src/ui/button/index.tsx b/packages/internal/components/src/ui/button/index.tsx
index a21b9a404..2c3c05324 100644
--- a/packages/internal/components/src/ui/button/index.tsx
+++ b/packages/internal/components/src/ui/button/index.tsx
@@ -129,7 +129,7 @@ export const IconButton = ({
         styledButtonVariant({
           variant: "ghost",
         }),
-        "bg-accent/10 hover:bg-accent/20 active:bg-accent/30 dark:bg-accent/20 dark:hover:bg-accent/30 dark:active:bg-accent/40 group relative gap-2 px-4 transition-all duration-300",
+        "group relative gap-2 bg-accent/10 px-4 transition-all duration-300 hover:bg-accent/20 active:bg-accent/30 dark:bg-accent/20 dark:hover:bg-accent/30 dark:active:bg-accent/40",
         rest.className,
       )}
     >
diff --git a/packages/internal/components/src/ui/card/index.tsx b/packages/internal/components/src/ui/card/index.tsx
index fa697bb78..3b78138af 100644
--- a/packages/internal/components/src/ui/card/index.tsx
+++ b/packages/internal/components/src/ui/card/index.tsx
@@ -8,7 +8,7 @@ const Card = ({
 }: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement | null> }) => (
   <div
     ref={ref}
-    className={cn("text-text bg-material-ultra-thin rounded-lg border", className)}
+    className={cn("rounded-lg border bg-material-ultra-thin text-text", className)}
     {...props}
   />
 )
@@ -44,7 +44,7 @@ const CardDescription = ({
   ...props
 }: React.HTMLAttributes<HTMLParagraphElement> & {
   ref?: React.Ref<HTMLParagraphElement | null>
-}) => <p ref={ref} className={cn("text-text-secondary text-sm", className)} {...props} />
+}) => <p ref={ref} className={cn("text-sm text-text-secondary", className)} {...props} />
 CardDescription.displayName = "CardDescription"
 
 const CardContent = ({
diff --git a/packages/internal/components/src/ui/checkbox/index.tsx b/packages/internal/components/src/ui/checkbox/index.tsx
index 53441d5e4..af36162a6 100644
--- a/packages/internal/components/src/ui/checkbox/index.tsx
+++ b/packages/internal/components/src/ui/checkbox/index.tsx
@@ -38,7 +38,7 @@ function Checkbox({
       <m.button
         data-slot="checkbox"
         className={cn(
-          "bg-fill cursor-checkbox focus-visible:ring-border data-[state=checked]:bg-accent peer flex shrink-0 items-center justify-center rounded-sm transition-colors duration-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-white",
+          "peer flex shrink-0 cursor-checkbox items-center justify-center rounded-sm bg-fill transition-colors duration-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=checked]:text-white",
           size === "sm" ? "size-4" : "size-5",
           indeterminate && "bg-accent text-white",
           className,
diff --git a/packages/internal/components/src/ui/collapse/CollapseCss.tsx b/packages/internal/components/src/ui/collapse/CollapseCss.tsx
index d7f0807bc..426582a35 100644
--- a/packages/internal/components/src/ui/collapse/CollapseCss.tsx
+++ b/packages/internal/components/src/ui/collapse/CollapseCss.tsx
@@ -118,7 +118,7 @@ export const CollapseCss: FC<CollapseProps> = ({
       >
         <span className="w-0 shrink grow truncate">{title}</span>
         {!hideArrow && (
-          <div className="text-text-secondary inline-flex shrink-0 items-center">
+          <div className="inline-flex shrink-0 items-center text-text-secondary">
             <i
               className={cn(
                 "i-mingcute-down-line transition-transform duration-300 ease-in-out",
diff --git a/packages/internal/components/src/ui/context-menu/context-menu.tsx b/packages/internal/components/src/ui/context-menu/context-menu.tsx
index 459d6601d..83c7a9ac9 100644
--- a/packages/internal/components/src/ui/context-menu/context-menu.tsx
+++ b/packages/internal/components/src/ui/context-menu/context-menu.tsx
@@ -36,7 +36,7 @@ const ContextMenuSubTrigger = ({
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "cursor-menu data-[state=open]:bg-mix-background/accent-9/1 data-[state=open]:text-accent data-[highlighted]:text-accent data-[highlighted]:bg-mix-background/accent-9/1 flex select-none items-center rounded-[5px] px-2.5 py-1.5 outline-none",
+      "flex cursor-menu select-none items-center rounded-[5px] px-2.5 py-1.5 outline-none data-[highlighted]:text-accent data-[state=open]:text-accent data-[highlighted]:bg-mix-background/accent-9/1 data-[state=open]:bg-mix-background/accent-9/1",
       "h-[28px]",
       inset && "pl-8",
       "center gap-2",
@@ -62,13 +62,13 @@ const ContextMenuSubContent = ({
     <ContextMenuPrimitive.SubContent
       ref={ref}
       className={cn(
-        "text-text text-body",
+        "text-body text-text",
         "min-w-32 overflow-hidden",
         "rounded-[6px] p-1",
         "backdrop-blur-2xl",
         "z-[61]",
         "relative",
-        "dark:border-border/50 dark:border",
+        "dark:border dark:border-border/50",
         className,
       )}
       style={styles.content}
@@ -97,11 +97,11 @@ const ContextMenuContent = ({
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "text-text z-[60] min-w-32 overflow-hidden rounded-[6px] p-1",
+        "z-[60] min-w-32 overflow-hidden rounded-[6px] p-1 text-text",
         "backdrop-blur-2xl",
-        "motion-scale-in-75 motion-duration-150 text-body lg:animate-none",
+        "text-body motion-scale-in-75 motion-duration-150 lg:animate-none",
         "relative",
-        "dark:border-border/50 dark:border",
+        "dark:border dark:border-border/50",
         className,
       )}
       style={styles.content}
@@ -130,8 +130,8 @@ const ContextMenuItem = ({
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "cursor-menu focus:bg-accent/30 relative flex select-none items-center rounded-[5px] px-2.5 py-1.5 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "data-[highlighted]:text-accent data-[highlighted]:bg-mix-background/accent-9/1 focus-within:outline-transparent",
+      "relative flex cursor-menu select-none items-center rounded-[5px] px-2.5 py-1.5 outline-none focus:bg-accent/30 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus-within:outline-transparent data-[highlighted]:text-accent data-[highlighted]:bg-mix-background/accent-9/1",
       "h-[28px]",
       inset && "pl-8",
       className,
@@ -153,8 +153,8 @@ const ContextMenuCheckboxItem = ({
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "cursor-checkbox focus:bg-accent/30 relative flex select-none items-center rounded-[5px] px-8 py-1.5 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "data-[highlighted]:text-accent data-[highlighted]:bg-mix-background/accent-9/1 focus-within:text-accent focus-within:outline-transparent",
+      "relative flex cursor-checkbox select-none items-center rounded-[5px] px-8 py-1.5 outline-none focus:bg-accent/30 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus-within:text-accent focus-within:outline-transparent data-[highlighted]:text-accent data-[highlighted]:bg-mix-background/accent-9/1",
       "h-[28px]",
       className,
     )}
@@ -181,7 +181,7 @@ const ContextMenuLabel = ({
 } & { ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.Label> | null> }) => (
   <ContextMenuPrimitive.Label
     ref={ref}
-    className={cn("text-text px-2 py-1.5 font-semibold", inset && "pl-8", className)}
+    className={cn("px-2 py-1.5 font-semibold text-text", inset && "pl-8", className)}
     {...props}
   />
 )
@@ -194,7 +194,7 @@ const ContextMenuSeparator = ({
   ref?: React.Ref<React.ElementRef<typeof ContextMenuPrimitive.Separator> | null>
 }) => (
   <ContextMenuPrimitive.Separator
-    className="backdrop-blur-background mx-2 my-1 h-px"
+    className="mx-2 my-1 h-px backdrop-blur-background"
     asChild
     ref={ref}
     {...props}
diff --git a/packages/internal/components/src/ui/divider/PanelSplitter.tsx b/packages/internal/components/src/ui/divider/PanelSplitter.tsx
index 62001f292..8bd5610ad 100644
--- a/packages/internal/components/src/ui/divider/PanelSplitter.tsx
+++ b/packages/internal/components/src/ui/divider/PanelSplitter.tsx
@@ -39,7 +39,7 @@ export const PanelSplitter = (
             tabIndex={-1}
             {...rest}
             className={cn(
-              "active:!bg-accent absolute inset-0 z-[3] w-[2px] -translate-x-1/2 cursor-ew-resize bg-transparent hover:bg-gray-400 hover:dark:bg-neutral-500",
+              "absolute inset-0 z-[3] w-[2px] -translate-x-1/2 cursor-ew-resize bg-transparent hover:bg-gray-400 active:!bg-accent hover:dark:bg-neutral-500",
               isDragging ? "bg-accent" : "",
               className,
             )}
diff --git a/packages/internal/components/src/ui/drop-zone/index.tsx b/packages/internal/components/src/ui/drop-zone/index.tsx
index c42a222a9..f7cf32849 100644
--- a/packages/internal/components/src/ui/drop-zone/index.tsx
+++ b/packages/internal/components/src/ui/drop-zone/index.tsx
@@ -65,7 +65,7 @@ export const DropZone = ({ id, accept, children, className, onDrop }: DropZonePr
       className={cn(
         "center flex h-[100px] w-full cursor-pointer rounded-md border border-dashed",
         isDragging ? "border-accent bg-accent/10" : "",
-        "hover:border-accent/50 duration-200",
+        "duration-200 hover:border-accent/50",
         className,
       )}
       htmlFor={id}
diff --git a/packages/internal/components/src/ui/effect/MagneticHoverEffect.tsx b/packages/internal/components/src/ui/effect/MagneticHoverEffect.tsx
index bf2c363cc..ee328531f 100644
--- a/packages/internal/components/src/ui/effect/MagneticHoverEffect.tsx
+++ b/packages/internal/components/src/ui/effect/MagneticHoverEffect.tsx
@@ -64,7 +64,7 @@ export const MagneticHoverEffect = <T extends React.ElementType = "div">({
         "relative",
         "inline-block transition-transform duration-200 ease-out will-change-transform",
         "hover:before:bg-fill-tertiary",
-        "before:backdrop-blur-background before:absolute before:-inset-x-2 before:inset-y-0 before:z-[-1] before:scale-0 before:rounded-xl before:opacity-0 before:transition-all before:duration-200 before:[transform-origin:var(--origin-x)_var(--origin-y)] hover:before:scale-100 hover:before:opacity-100",
+        "before:absolute before:-inset-x-2 before:inset-y-0 before:z-[-1] before:scale-0 before:rounded-xl before:opacity-0 before:backdrop-blur-background before:transition-all before:duration-200 before:[transform-origin:var(--origin-x)_var(--origin-y)] hover:before:scale-100 hover:before:opacity-100",
         rest.className,
       )}
     >
diff --git a/packages/internal/components/src/ui/form/index.tsx b/packages/internal/components/src/ui/form/index.tsx
index e73f0c34a..9acb76080 100644
--- a/packages/internal/components/src/ui/form/index.tsx
+++ b/packages/internal/components/src/ui/form/index.tsx
@@ -126,7 +126,7 @@ const FormDescription = ({
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-text-secondary text-xs", className)}
+      className={cn("text-xs text-text-secondary", className)}
       {...props}
     />
   )
@@ -152,7 +152,7 @@ const FormMessage = ({
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-red text-sm font-medium", className)}
+      className={cn("text-sm font-medium text-red", className)}
       {...props}
     >
       {body}
diff --git a/packages/internal/components/src/ui/hover-card/index.tsx b/packages/internal/components/src/ui/hover-card/index.tsx
index 2412d619c..1a08eb919 100644
--- a/packages/internal/components/src/ui/hover-card/index.tsx
+++ b/packages/internal/components/src/ui/hover-card/index.tsx
@@ -23,8 +23,8 @@ const HoverCardContent = ({
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "bg-material-medium backdrop-blur-background border-border text-text z-[60] w-fit overflow-hidden rounded-md border shadow-lg",
-        "motion-scale-in-95 motion-duration-200 text-body",
+        "z-[60] w-fit overflow-hidden rounded-md border border-border bg-material-medium text-text shadow-lg backdrop-blur-background",
+        "text-body motion-scale-in-95 motion-duration-200",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
diff --git a/packages/internal/components/src/ui/input/DateTimePicker.tsx b/packages/internal/components/src/ui/input/DateTimePicker.tsx
index 3db2bf4c5..fc2d021ea 100644
--- a/packages/internal/components/src/ui/input/DateTimePicker.tsx
+++ b/packages/internal/components/src/ui/input/DateTimePicker.tsx
@@ -235,7 +235,7 @@ export const DateTimePicker = memo<DateTimePickerProps>(
             {viewMode === "days" && (
               <>
                 {/* Weekdays */}
-                <div className="text-text-secondary mb-1 grid grid-cols-7 gap-0.5 text-center text-xs">
+                <div className="mb-1 grid grid-cols-7 gap-0.5 text-center text-xs text-text-secondary">
                   {weekDays.map((day) => (
                     <div key={day} className="flex h-6 items-center justify-center font-medium">
                       {day.slice(0, 2)}
@@ -362,9 +362,9 @@ export const DateTimePicker = memo<DateTimePickerProps>(
 
             {/* Time Selection (only single mode) */}
             {!isRangeMode && (
-              <div className="border-border -mx-2 border-t px-2 pt-2">
+              <div className="-mx-2 border-t border-border px-2 pt-2">
                 <div className="flex items-center justify-between">
-                  <span className="text-text-secondary text-xs font-medium">Time</span>
+                  <span className="text-xs font-medium text-text-secondary">Time</span>
                   <TimeSelect
                     value={currentDateTime.format("HH:mm")}
                     onChange={handleTimeChange}
diff --git a/packages/internal/components/src/ui/input/Input.tsx b/packages/internal/components/src/ui/input/Input.tsx
index 3d5c92a36..386bb6daf 100644
--- a/packages/internal/components/src/ui/input/Input.tsx
+++ b/packages/internal/components/src/ui/input/Input.tsx
@@ -20,9 +20,9 @@ export const Input = ({
       className={cn(
         "min-w-0 flex-auto appearance-none rounded-lg text-sm",
         "bg-theme-background px-3 py-[calc(theme(spacing.2)-1px)]",
-        "ring-accent/20 focus:border-accent/80 duration-200 focus:outline-none focus:ring-2",
+        "ring-accent/20 duration-200 focus:border-accent/80 focus:outline-none focus:ring-2",
         "focus:!bg-accent/5",
-        "border-border border",
+        "border border-border",
         "placeholder:text-text-tertiary dark:bg-zinc-700/[0.15] dark:text-zinc-200",
         "hover:border-accent/60",
         props.type === "password" && "font-mono placeholder:font-sans",
diff --git a/packages/internal/components/src/ui/input/InputV2.tsx b/packages/internal/components/src/ui/input/InputV2.tsx
index 78ebec586..4e15195d9 100644
--- a/packages/internal/components/src/ui/input/InputV2.tsx
+++ b/packages/internal/components/src/ui/input/InputV2.tsx
@@ -42,7 +42,7 @@ export const InputV2 = ({
   return (
     <div className="group relative">
       {icon && (
-        <div className="text-text-tertiary absolute left-3 top-1/2 flex -translate-y-1/2 items-center justify-center">
+        <div className="absolute left-3 top-1/2 flex -translate-y-1/2 items-center justify-center text-text-tertiary">
           {icon}
         </div>
       )}
@@ -52,9 +52,9 @@ export const InputV2 = ({
         className={cn(
           "min-w-0 flex-auto appearance-none rounded-lg text-sm",
           "bg-theme-background py-[calc(theme(spacing.2)-1px)]",
-          "ring-accent/20 focus:border-accent/80 duration-200 focus:outline-none focus:ring-2",
+          "ring-accent/20 duration-200 focus:border-accent/80 focus:outline-none focus:ring-2",
           "focus:!bg-accent/5",
-          "border-border border",
+          "border border-border",
           "placeholder:text-text-tertiary dark:bg-zinc-700/[0.15] dark:text-zinc-200",
           "hover:border-accent/60",
           props.type === "password" && "font-mono placeholder:font-sans",
@@ -73,7 +73,7 @@ export const InputV2 = ({
         <button
           type="button"
           onClick={handleClear}
-          className="text-text-tertiary hover:text-text-secondary absolute right-3 top-1/2 hidden -translate-y-1/2 items-center transition-colors group-focus-within:flex"
+          className="absolute right-3 top-1/2 hidden -translate-y-1/2 items-center text-text-tertiary transition-colors hover:text-text-secondary group-focus-within:flex"
           tabIndex={-1}
         >
           <i className="i-mingcute-close-circle-fill" />
diff --git a/packages/internal/components/src/ui/input/OTP.tsx b/packages/internal/components/src/ui/input/OTP.tsx
index 7d689d79e..4b50efe39 100644
--- a/packages/internal/components/src/ui/input/OTP.tsx
+++ b/packages/internal/components/src/ui/input/OTP.tsx
@@ -46,8 +46,8 @@ const InputOTPSlot = ({
     <div
       ref={ref}
       className={cn(
-        "border-border relative flex size-9 items-center justify-center border-y border-r font-mono text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "ring-accent z-10 ring-1",
+        "relative flex size-9 items-center justify-center border-y border-r border-border font-mono text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-accent",
         className,
       )}
       {...props}
@@ -55,7 +55,7 @@ const InputOTPSlot = ({
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          <div className="bg-foreground h-4 w-px animate-caret-blink duration-1000" />
         </div>
       )}
     </div>
@@ -76,7 +76,7 @@ const InputOTPSeparator = ({
     role="separator"
     {...props}
   >
-    <div className="bg-border h-1 w-3 rounded-full" />
+    <div className="h-1 w-3 rounded-full bg-border" />
   </div>
 )
 InputOTPSeparator.displayName = "InputOTPSeparator"
diff --git a/packages/internal/components/src/ui/input/TextAreaWrapper.tsx b/packages/internal/components/src/ui/input/TextAreaWrapper.tsx
index b9b23ddc7..0e8b60971 100644
--- a/packages/internal/components/src/ui/input/TextAreaWrapper.tsx
+++ b/packages/internal/components/src/ui/input/TextAreaWrapper.tsx
@@ -89,11 +89,11 @@ export const TextAreaWrapper = ({
   return (
     <div
       className={cn(
-        "ring-accent/20 group relative flex h-full overflow-hidden border ring-0 duration-200",
+        "group relative flex h-full overflow-hidden border ring-0 ring-accent/20 duration-200",
         roundedMap[rounded],
 
         // Border states
-        "hover:border-accent/60 border-transparent",
+        "border-transparent hover:border-accent/60",
         isFocused && "!border-accent/80 ring-2",
 
         // Theme colors
@@ -111,7 +111,7 @@ export const TextAreaWrapper = ({
       {bordered && (
         <div
           className={clsx(
-            "border-border pointer-events-none absolute inset-0 z-0 border",
+            "pointer-events-none absolute inset-0 z-0 border border-border",
             roundedMap[rounded],
           )}
           aria-hidden="true"
diff --git a/packages/internal/components/src/ui/input/TimeSelect.tsx b/packages/internal/components/src/ui/input/TimeSelect.tsx
index a0fc4449b..4bd611464 100644
--- a/packages/internal/components/src/ui/input/TimeSelect.tsx
+++ b/packages/internal/components/src/ui/input/TimeSelect.tsx
@@ -68,7 +68,7 @@ export const TimeSelect = memo<TimeSelectProps>(
         <Select disabled={disabled} value={hourValue} onValueChange={(h) => update(h, minuteValue)}>
           <SelectTrigger
             aria-label={label ? `${label} hour` : "Hour"}
-            className="bg-material-opaque hover:bg-mix-accent/background-1/4 h-6 w-12 justify-between rounded-[4px] border-0 px-1.5 py-0 text-xs"
+            className="h-6 w-12 justify-between rounded-[4px] border-0 bg-material-opaque px-1.5 py-0 text-xs hover:bg-mix-accent/background-1/4"
           >
             <SelectValue />
           </SelectTrigger>
@@ -80,11 +80,11 @@ export const TimeSelect = memo<TimeSelectProps>(
             ))}
           </SelectContent>
         </Select>
-        <span className="text-text-secondary mx-0.5 select-none text-xs">:</span>
+        <span className="mx-0.5 select-none text-xs text-text-secondary">:</span>
         <Select disabled={disabled} value={minuteValue} onValueChange={(m) => update(hourValue, m)}>
           <SelectTrigger
             aria-label={label ? `${label} minute` : "Minute"}
-            className="bg-material-opaque hover:bg-mix-accent/background-1/4 h-6 w-12 justify-between rounded-[4px] border-0 px-1.5 py-0 text-xs"
+            className="h-6 w-12 justify-between rounded-[4px] border-0 bg-material-opaque px-1.5 py-0 text-xs hover:bg-mix-accent/background-1/4"
           >
             <SelectValue />
           </SelectTrigger>
diff --git a/packages/internal/components/src/ui/json-highlighter/index.tsx b/packages/internal/components/src/ui/json-highlighter/index.tsx
index c86e4ba4b..18b585130 100644
--- a/packages/internal/components/src/ui/json-highlighter/index.tsx
+++ b/packages/internal/components/src/ui/json-highlighter/index.tsx
@@ -47,7 +47,7 @@ export const JsonHighlighter = ({
     <pre
       ref={ref}
       className={cn(
-        "bg-material-ultra-thin text-text overflow-auto rounded-md border p-4 text-sm",
+        "overflow-auto rounded-md border bg-material-ultra-thin p-4 text-sm text-text",
         "font-mono leading-relaxed",
         className,
       )}
@@ -57,7 +57,7 @@ export const JsonHighlighter = ({
       <code className="block">
         {showLineNumbers ? (
           <div className="flex">
-            <div className="text-text-tertiary border-fill mr-4 select-none border-r pr-4">
+            <div className="mr-4 select-none border-r border-fill pr-4 text-text-tertiary">
               {lines.map((_, index) => (
                 <div key={index} className="text-right">
                   {index + 1}
diff --git a/packages/internal/components/src/ui/kbd/Kbd.tsx b/packages/internal/components/src/ui/kbd/Kbd.tsx
index 73c8ebb69..242e6ffeb 100644
--- a/packages/internal/components/src/ui/kbd/Kbd.tsx
+++ b/packages/internal/components/src/ui/kbd/Kbd.tsx
@@ -77,7 +77,7 @@ export const KbdCombined: FC<{
           )}
           {i !== keys.length - 1 && (
             <span>
-              <i className="i-mgc-line-cute-re text-text-secondary size-[0.75em] shrink-0 origin-center translate-y-[0.15em] rotate-[-25deg]" />
+              <i className="i-mgc-line-cute-re size-[0.75em] shrink-0 origin-center translate-y-[0.15em] rotate-[-25deg] text-text-secondary" />
             </span>
           )}
         </Fragment>
@@ -345,7 +345,7 @@ export const Kbd: FC<{
   const KbdElement = (
     <kbd
       className={cn(
-        "kbd text-text box-border h-5 space-x-1 font-sans text-[0.7rem] tabular-nums transition-all duration-200",
+        "kbd box-border h-5 space-x-1 font-sans text-[0.7rem] tabular-nums text-text transition-all duration-200",
         wrapButton && isKeyPressed && "scale-95 opacity-80",
         className,
       )}
diff --git a/packages/internal/components/src/ui/lexical-rich-editor/LexicalRichEditor.tsx b/packages/internal/components/src/ui/lexical-rich-editor/LexicalRichEditor.tsx
index 3569a63e0..f0391c75b 100644
--- a/packages/internal/components/src/ui/lexical-rich-editor/LexicalRichEditor.tsx
+++ b/packages/internal/components/src/ui/lexical-rich-editor/LexicalRichEditor.tsx
@@ -117,13 +117,13 @@ export const LexicalRichEditor = function LexicalRichEditor({
             <ContentEditable
               onContextMenu={stopPropagation}
               className={cn(
-                "scrollbar-none text-text placeholder:text-text-secondary size-full cursor-text",
+                "size-full cursor-text text-text scrollbar-none placeholder:text-text-secondary",
                 "size-full resize-none bg-transparent",
                 "text-sm !outline-none transition-all duration-200 focus:outline-none",
               )}
               aria-placeholder={placeholder}
               placeholder={
-                <div className="text-text-secondary pointer-events-none absolute left-0 top-0 text-sm">
+                <div className="pointer-events-none absolute left-0 top-0 text-sm text-text-secondary">
                   {placeholder}
                 </div>
               }
diff --git a/packages/internal/components/src/ui/markdown/html.tsx b/packages/internal/components/src/ui/markdown/html.tsx
index 5177e630a..af8d2504b 100644
--- a/packages/internal/components/src/ui/markdown/html.tsx
+++ b/packages/internal/components/src/ui/markdown/html.tsx
@@ -28,7 +28,7 @@ export function Html({ content, scrollEnabled = true, ...options }: HtmlProps) {
   }, [scrollEnabled])
 
   return (
-    <article className="prose dark:prose-invert prose-h1:text-[1.6em] prose-h1:font-bold !max-w-full px-2">
+    <article className="prose !max-w-full px-2 dark:prose-invert prose-h1:text-[1.6em] prose-h1:font-bold">
       {res.toContent()}
     </article>
   )
diff --git a/packages/internal/components/src/ui/navigation-menu/index.tsx b/packages/internal/components/src/ui/navigation-menu/index.tsx
index ad9cc794e..a8cafbb84 100644
--- a/packages/internal/components/src/ui/navigation-menu/index.tsx
+++ b/packages/internal/components/src/ui/navigation-menu/index.tsx
@@ -69,7 +69,7 @@ const NavigationMenuContent = ({
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto",
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
       className,
     )}
     {...props}
@@ -89,7 +89,7 @@ const NavigationMenuViewport = ({
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "bg-material-medium backdrop-blur-background text-text data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-material-medium text-text shadow-lg backdrop-blur-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
         className,
       )}
       ref={ref}
@@ -109,12 +109,12 @@ const NavigationMenuIndicator = ({
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
       className,
     )}
     {...props}
   >
-    <div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md" />
+    <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 )
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName
diff --git a/packages/internal/components/src/ui/popover/index.tsx b/packages/internal/components/src/ui/popover/index.tsx
index 0bebc1314..ce7bd8605 100644
--- a/packages/internal/components/src/ui/popover/index.tsx
+++ b/packages/internal/components/src/ui/popover/index.tsx
@@ -27,9 +27,9 @@ const PopoverContent = ({
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "bg-background/90 backdrop-blur-background text-text z-[60] overflow-hidden rounded-[6px] border p-4",
+        "z-[60] overflow-hidden rounded-[6px] border bg-background/90 p-4 text-text backdrop-blur-background",
         "shadow-context-menu",
-        "motion-scale-in-75 motion-duration-150 text-body lg:animate-none",
+        "text-body motion-scale-in-75 motion-duration-150 lg:animate-none",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
diff --git a/packages/internal/components/src/ui/progress/index.tsx b/packages/internal/components/src/ui/progress/index.tsx
index 6ef9c27a3..fa8cd71fa 100644
--- a/packages/internal/components/src/ui/progress/index.tsx
+++ b/packages/internal/components/src/ui/progress/index.tsx
@@ -14,11 +14,11 @@ const Progress = ({
 }) => (
   <ProgressPrimitive.Root
     ref={ref}
-    className={cn("bg-accent/20 relative h-2 w-full overflow-hidden rounded-full", className)}
+    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-accent/20", className)}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="bg-accent size-full flex-1 transition-all"
+      className="size-full flex-1 bg-accent transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/packages/internal/components/src/ui/radio-group/RadioCard.tsx b/packages/internal/components/src/ui/radio-group/RadioCard.tsx
index 680081e49..2eb6f6d9b 100644
--- a/packages/internal/components/src/ui/radio-group/RadioCard.tsx
+++ b/packages/internal/components/src/ui/radio-group/RadioCard.tsx
@@ -32,7 +32,7 @@ export const RadioCard: FC<
         "flex cursor-pointer items-center rounded-md p-2",
         "border",
 
-        "ring-accent/20 ring-0 duration-200",
+        "ring-0 ring-accent/20 duration-200",
 
         selected && "border-accent bg-accent/5 font-medium outline-none ring-2",
         wrapperClassName,
diff --git a/packages/internal/components/src/ui/radio-group/motion.tsx b/packages/internal/components/src/ui/radio-group/motion.tsx
index 0d841b289..7b4d66ee7 100644
--- a/packages/internal/components/src/ui/radio-group/motion.tsx
+++ b/packages/internal/components/src/ui/radio-group/motion.tsx
@@ -84,7 +84,7 @@ function RadioGroupItem({
           type="button"
           data-slot="radio-group-item"
           className={cn(
-            "border-border text-accent ring-material-opaque focus-visible:ring-border flex aspect-square size-5 items-center justify-center rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            "flex aspect-square size-5 items-center justify-center rounded-full border border-border text-accent ring-material-opaque focus:outline-none focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             className,
           )}
           whileHover={{ scale: 1.05 }}
diff --git a/packages/internal/components/src/ui/segment/index.tsx b/packages/internal/components/src/ui/segment/index.tsx
index 01184ff1a..0372451fc 100644
--- a/packages/internal/components/src/ui/segment/index.tsx
+++ b/packages/internal/components/src/ui/segment/index.tsx
@@ -35,7 +35,7 @@ export const SegmentGroup = (props: ComponentType<SegmentGroupProps>) => {
       <div
         role="tablist"
         className={cn(
-          "bg-fill-tertiary text-text-secondary inline-flex h-9 items-center justify-center rounded-lg p-1 outline-none",
+          "inline-flex h-9 items-center justify-center rounded-lg bg-fill-tertiary p-1 text-text-secondary outline-none",
           className,
         )}
         tabIndex={0}
@@ -59,8 +59,8 @@ export const SegmentItem: Component<{
       type="button"
       role="tab"
       className={cn(
-        "ring-offset-background data-[state=active]:text-text relative inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-        "focus-visible:ring-accent/30 h-full rounded-md",
+        "relative inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-text",
+        "h-full rounded-md focus-visible:ring-accent/30",
         className,
       )}
       tabIndex={-1}
@@ -77,7 +77,7 @@ export const SegmentItem: Component<{
           layout
           transition={Spring.presets.smooth}
           layoutId={layoutId}
-          className="bg-background absolute inset-0 z-0 rounded-md shadow"
+          className="absolute inset-0 z-0 rounded-md bg-background shadow"
         />
       )}
     </button>
diff --git a/packages/internal/components/src/ui/select/index.tsx b/packages/internal/components/src/ui/select/index.tsx
index 64043b074..33c93239c 100644
--- a/packages/internal/components/src/ui/select/index.tsx
+++ b/packages/internal/components/src/ui/select/index.tsx
@@ -24,13 +24,13 @@ const SelectTrigger = ({
     ref={ref}
     className={cn(
       "flex w-full items-center justify-between whitespace-nowrap rounded-lg bg-transparent",
-      "focus-within:ring-material-medium outline-none transition-all duration-200 focus-within:outline-transparent focus-within:ring-2",
-      "border-border hover:border-fill border",
+      "outline-none transition-all duration-200 focus-within:outline-transparent focus-within:ring-2 focus-within:ring-material-medium",
+      "border border-border hover:border-fill",
       size === "sm" ? "h-8 px-3 text-sm" : "h-9 px-3.5 py-2 text-sm",
       "placeholder:text-text-secondary",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "[&>span]:line-clamp-1",
-      "shadow-material-thin shadow-sm hover:shadow",
+      "shadow-sm shadow-material-thin hover:shadow",
       className,
       props.disabled && "cursor-not-allowed opacity-30",
     )}
@@ -53,7 +53,7 @@ const SelectScrollUpButton = ({
 }) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cn("cursor-menu flex items-center justify-center py-1", className)}
+    className={cn("flex cursor-menu items-center justify-center py-1", className)}
     {...props}
   >
     <i className="i-mingcute-up-line size-3.5" />
@@ -70,7 +70,7 @@ const SelectScrollDownButton = ({
 }) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cn("cursor-menu flex items-center justify-center py-1", className)}
+    className={cn("flex cursor-menu items-center justify-center py-1", className)}
     {...props}
   >
     <i className="i-mingcute-down-line size-3.5" />
@@ -91,9 +91,9 @@ const SelectContent = ({
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-material-medium backdrop-blur-background text-text z-[60] max-h-96 min-w-32 overflow-hidden rounded-[6px] border p-1",
+        "z-[60] max-h-96 min-w-32 overflow-hidden rounded-[6px] border bg-material-medium p-1 text-text backdrop-blur-background",
         "shadow-context-menu",
-        "motion-scale-in-75 motion-duration-150 text-body lg:animate-none",
+        "text-body motion-scale-in-75 motion-duration-150 lg:animate-none",
         className,
       )}
       position={position}
@@ -125,7 +125,7 @@ const SelectLabel = ({
 } & { ref?: React.Ref<React.ElementRef<typeof SelectPrimitive.Label> | null> }) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("text-text px-2 py-1.5 font-semibold", inset && "pl-8", className)}
+    className={cn("px-2 py-1.5 font-semibold text-text", inset && "pl-8", className)}
     {...props}
   />
 )
@@ -143,8 +143,8 @@ const SelectItem = ({
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "cursor-menu focus:bg-theme-selection-active focus:text-theme-selection-foreground relative flex select-none items-center rounded-[5px] px-2.5 py-1 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "data-[highlighted]:bg-theme-selection-hover focus-within:outline-transparent",
+      "relative flex cursor-menu select-none items-center rounded-[5px] px-2.5 py-1 outline-none focus:bg-theme-selection-active focus:text-theme-selection-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus-within:outline-transparent data-[highlighted]:bg-theme-selection-hover",
       "h-[28px] w-full",
       inset && "pl-8",
       className,
@@ -168,7 +168,7 @@ const SelectSeparator = ({
   ref?: React.Ref<React.ElementRef<typeof SelectPrimitive.Separator> | null>
 }) => (
   <SelectPrimitive.Separator
-    className="backdrop-blur-background mx-2 my-1 h-px"
+    className="mx-2 my-1 h-px backdrop-blur-background"
     asChild
     ref={ref}
     {...props}
diff --git a/packages/internal/components/src/ui/select/responsive.tsx b/packages/internal/components/src/ui/select/responsive.tsx
index 13ac6c59e..45081c7b5 100644
--- a/packages/internal/components/src/ui/select/responsive.tsx
+++ b/packages/internal/components/src/ui/select/responsive.tsx
@@ -64,9 +64,9 @@ export const ResponsiveSelect = ({
         data-testid={triggerTestId}
         onClick={() => realSelectRef?.click()}
         className={cn(
-          "placeholder:text-text-secondary flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-          "ring-accent/20 focus:border-accent/80 duration-200 focus:outline-none focus:ring-2",
-          "border-border border",
+          "flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent placeholder:text-text-secondary disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+          "ring-accent/20 duration-200 focus:border-accent/80 focus:outline-none focus:ring-2",
+          "border border-border",
           size === "sm" ? "h-7 p-2 text-sm" : "h-9 px-3 py-2 text-sm",
           "hover:border-accent/80",
           "relative",
diff --git a/packages/internal/components/src/ui/sheet/Sheet.tsx b/packages/internal/components/src/ui/sheet/Sheet.tsx
index 2c4f6f78e..16a1e9343 100644
--- a/packages/internal/components/src/ui/sheet/Sheet.tsx
+++ b/packages/internal/components/src/ui/sheet/Sheet.tsx
@@ -114,7 +114,7 @@ export const PresentSheet = ({
           }}
           aria-describedby={undefined}
           className={cn(
-            "bg-theme-background fixed inset-x-0 bottom-0 flex max-h-[calc(100svh-3rem)] flex-col rounded-t-[10px] border-t pt-4",
+            "fixed inset-x-0 bottom-0 flex max-h-[calc(100svh-3rem)] flex-col rounded-t-[10px] border-t bg-theme-background pt-4",
             modalClassName,
           )}
         >
@@ -153,7 +153,7 @@ export const PresentSheet = ({
             <RootPortalContext value={contentInnerRef.current!}>
               <div
                 className={cn(
-                  "pb-safe-offset-4 flex grow flex-col overflow-auto px-4",
+                  "flex grow flex-col overflow-auto px-4 pb-safe-offset-4",
                   contentClassName,
                 )}
               >
diff --git a/packages/internal/components/src/ui/shiny-text/ShinyText.tsx b/packages/internal/components/src/ui/shiny-text/ShinyText.tsx
index 4054aaf38..531596b6f 100644
--- a/packages/internal/components/src/ui/shiny-text/ShinyText.tsx
+++ b/packages/internal/components/src/ui/shiny-text/ShinyText.tsx
@@ -21,7 +21,7 @@ export const ShinyText: FC<AnimatedShinyTextProps> = ({
         } as CSSProperties
       }
       className={cn(
-        "text-text-secondary mx-auto max-w-md",
+        "mx-auto max-w-md text-text-secondary",
 
         // Shine effect
         "bg-clip-text bg-repeat-x",
diff --git a/packages/internal/components/src/ui/skeleton/index.tsx b/packages/internal/components/src/ui/skeleton/index.tsx
index b5db74c06..022fd266a 100644
--- a/packages/internal/components/src/ui/skeleton/index.tsx
+++ b/packages/internal/components/src/ui/skeleton/index.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@follow/utils/utils"
 
 export function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("bg-fill-tertiary animate-pulse rounded-md", className)} {...props} />
+  return <div className={cn("animate-pulse rounded-md bg-fill-tertiary", className)} {...props} />
 }
diff --git a/packages/internal/components/src/ui/slider/index.tsx b/packages/internal/components/src/ui/slider/index.tsx
index ec8c4142a..2041da679 100644
--- a/packages/internal/components/src/ui/slider/index.tsx
+++ b/packages/internal/components/src/ui/slider/index.tsx
@@ -37,7 +37,7 @@ export const Slider = ({
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb
       className={cn(
-        "bg-background block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
+        "block size-4 rounded-full border bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
         variant === "primary"
           ? "border-accent/50 focus-visible:ring-accent"
           : "border-zinc-400 focus-visible:ring-zinc-400 dark:border-zinc-500 dark:focus-visible:ring-zinc-500",
diff --git a/packages/internal/components/src/ui/switch/index.tsx b/packages/internal/components/src/ui/switch/index.tsx
index 9d177465a..e18179fd5 100644
--- a/packages/internal/components/src/ui/switch/index.tsx
+++ b/packages/internal/components/src/ui/switch/index.tsx
@@ -71,7 +71,7 @@ function Switch({
       onChange={handleChange}
       style={{ width: switchWidth, padding: thumbPadding }}
       className={cn(
-        "focus-visible:ring-border cursor-switch data-[checked]:bg-accent bg-fill relative flex shrink-0 items-center justify-start rounded-full transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "relative flex shrink-0 cursor-switch items-center justify-start rounded-full bg-fill transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:bg-accent",
         size === "sm" ? "h-5" : "h-6",
         className,
       )}
@@ -117,7 +117,7 @@ function Switch({
         data-slot="switch-thumb"
         whileTap="tab"
         className={cn(
-          "bg-background z-[1] flex items-center justify-center rounded-full text-neutral-500 shadow-lg ring-0 dark:text-neutral-400",
+          "z-[1] flex items-center justify-center rounded-full bg-background text-neutral-500 shadow-lg ring-0 dark:text-neutral-400",
           size === "sm" ? "[&_svg]:size-2.5" : "[&_svg]:size-3",
           "absolute",
         )}
diff --git a/packages/internal/components/src/ui/table/index.tsx b/packages/internal/components/src/ui/table/index.tsx
index 301755423..03a7756a1 100644
--- a/packages/internal/components/src/ui/table/index.tsx
+++ b/packages/internal/components/src/ui/table/index.tsx
@@ -45,7 +45,7 @@ const TableFooter = ({
 }) => (
   <tfoot
     ref={ref}
-    className={cn("bg-material-thin border-t font-medium [&>tr]:last:border-b-0", className)}
+    className={cn("border-t bg-material-thin font-medium [&>tr]:last:border-b-0", className)}
     {...props}
   />
 )
@@ -60,7 +60,7 @@ const TableRow = ({
 }) => (
   <tr
     ref={ref}
-    className={cn("data-[state=selected]:bg-material-medium transition-colors", className)}
+    className={cn("transition-colors data-[state=selected]:bg-material-medium", className)}
     {...props}
   />
 )
@@ -78,7 +78,7 @@ const TableHead = ({
   <th
     ref={ref}
     className={cn(
-      "text-text-secondary text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+      "text-left align-middle font-medium text-text-secondary [&:has([role=checkbox])]:pr-0",
       tableHeadVariants({ size, className }),
     )}
     {...props}
@@ -112,7 +112,7 @@ const TableCaption = ({
   ...props
 }: React.HTMLAttributes<HTMLTableCaptionElement> & {
   ref?: React.Ref<HTMLTableCaptionElement | null>
-}) => <caption ref={ref} className={cn("text-text-secondary mt-4 text-sm", className)} {...props} />
+}) => <caption ref={ref} className={cn("mt-4 text-sm text-text-secondary", className)} {...props} />
 TableCaption.displayName = "TableCaption"
 
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }
diff --git a/packages/internal/components/src/ui/tabs/index.tsx b/packages/internal/components/src/ui/tabs/index.tsx
index eff6bf67c..555a01a6e 100644
--- a/packages/internal/components/src/ui/tabs/index.tsx
+++ b/packages/internal/components/src/ui/tabs/index.tsx
@@ -68,7 +68,7 @@ const TabsList = ({
     <TabsPrimitive.List
       ref={ref}
       className={cn(
-        "text-text-secondary relative inline-flex items-center justify-center",
+        "relative inline-flex items-center justify-center text-text-secondary",
         className,
       )}
     >
@@ -78,8 +78,8 @@ const TabsList = ({
           className={cn(
             "absolute left-0 duration-200 will-change-[transform,width]",
             variant === "rounded"
-              ? "bg-material-medium group-hover:bg-theme-item-hover inset-0 z-0 h-full rounded-lg"
-              : "bg-accent bottom-0 h-0.5 rounded",
+              ? "inset-0 z-0 h-full rounded-lg bg-material-medium group-hover:bg-theme-item-hover"
+              : "bottom-0 h-0.5 rounded bg-accent",
           )}
           style={{
             width: indicator.w,
@@ -150,7 +150,7 @@ const TabsTrigger = ({
     <TabsPrimitive.Trigger
       ref={triggerRef as any}
       className={cn(
-        "ring-offset-background data-[state=active]:text-text inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium ring-offset-background transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-text",
         "group relative z-[1]",
         tabsTriggerVariants({ variant }),
       )}
@@ -171,7 +171,7 @@ const TabsContent = ({
 }) => (
   <TabsPrimitive.Content
     ref={ref}
-    className={cn("ring-offset-background mt-2 focus-visible:outline-none", className)}
+    className={cn("mt-2 ring-offset-background focus-visible:outline-none", className)}
     {...props}
   />
 )
@@ -190,7 +190,7 @@ export const TabsScrollAreaContent = ({
 }) => (
   <TabsPrimitive.Content
     ref={ref}
-    className={cn("ring-offset-background mt-2 focus-visible:outline-none", className)}
+    className={cn("mt-2 ring-offset-background focus-visible:outline-none", className)}
     {...props}
   >
     <ScrollArea.ScrollArea