diff --git a/.changeset/clean-dolphins-tell.md b/.changeset/clean-dolphins-tell.md
new file mode 100644
index 000000000..3eb583dee
--- /dev/null
+++ b/.changeset/clean-dolphins-tell.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Update styles of toaster
diff --git a/.changeset/curly-ants-speak.md b/.changeset/curly-ants-speak.md
new file mode 100644
index 000000000..f5024fb22
--- /dev/null
+++ b/.changeset/curly-ants-speak.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add margin to video elements in typography styles
diff --git a/.changeset/curly-hats-look.md b/.changeset/curly-hats-look.md
new file mode 100644
index 000000000..212ac391c
--- /dev/null
+++ b/.changeset/curly-hats-look.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Update build process and style imports for better organization
diff --git a/.changeset/curly-pumas-shout.md b/.changeset/curly-pumas-shout.md
new file mode 100644
index 000000000..dc102b6ed
--- /dev/null
+++ b/.changeset/curly-pumas-shout.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/eslint-config': patch
+---
+
+Temporarily disable tailwindcss plugin
diff --git a/.changeset/fair-pears-repeat.md b/.changeset/fair-pears-repeat.md
new file mode 100644
index 000000000..9b7362d0c
--- /dev/null
+++ b/.changeset/fair-pears-repeat.md
@@ -0,0 +1,8 @@
+---
+'@tszhong0411/prettier-config': patch
+---
+
+Upgrade some dependencies
+
+- Upgrade prettier-plugin-sort-json from `^4.0.0` to `^4.1.1`
+- Upgrade prettier-plugin-tailwindcss from `^0.6.9` to `^0.6.11`
diff --git a/.changeset/happy-hotels-impress.md b/.changeset/happy-hotels-impress.md
new file mode 100644
index 000000000..c8c12b2a0
--- /dev/null
+++ b/.changeset/happy-hotels-impress.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Update paths for CSS files and include CSS in build process
diff --git a/.changeset/lazy-fans-grin.md b/.changeset/lazy-fans-grin.md
new file mode 100644
index 000000000..27bb8a66f
--- /dev/null
+++ b/.changeset/lazy-fans-grin.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add `@tailwindcss/typography` for v4
diff --git a/.changeset/odd-zebras-refuse.md b/.changeset/odd-zebras-refuse.md
new file mode 100644
index 000000000..adca23d52
--- /dev/null
+++ b/.changeset/odd-zebras-refuse.md
@@ -0,0 +1,7 @@
+---
+'@tszhong0411/prettier-plugin-package-json': patch
+'@tszhong0411/prettier-config': patch
+'@tszhong0411/utils': patch
+---
+
+Remove `sideEffects` in package.json
diff --git a/.changeset/quiet-keys-share.md b/.changeset/quiet-keys-share.md
new file mode 100644
index 000000000..3d0d052f5
--- /dev/null
+++ b/.changeset/quiet-keys-share.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Adjust Callout component styles for improved appearance
diff --git a/.changeset/smooth-falcons-wash.md b/.changeset/smooth-falcons-wash.md
new file mode 100644
index 000000000..ddadabae1
--- /dev/null
+++ b/.changeset/smooth-falcons-wash.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Simplify CSS selectors for Shiki styles
diff --git a/.changeset/unlucky-masks-perform.md b/.changeset/unlucky-masks-perform.md
new file mode 100644
index 000000000..8c267eee5
--- /dev/null
+++ b/.changeset/unlucky-masks-perform.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Adjust line-height for highlighted code blocks in shiki.css
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 2c8cec5c5..0f1dd7ba3 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -38,9 +38,9 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^15.1.3",
+    "@tailwindcss/postcss": "^4.0.1",
     "@tszhong0411/eslint-config": "workspace:*",
     "@tszhong0411/shared": "workspace:*",
-    "@tszhong0411/tailwind-config": "workspace:*",
     "@tszhong0411/tsconfig": "workspace:*",
     "@types/node": "^22.10.2",
     "@types/react": "19.0.2",
@@ -49,7 +49,7 @@
     "postcss": "^8.5.1",
     "postcss-lightningcss": "^1.0.1",
     "postcss-load-config": "^6.0.1",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^4.0.1"
   },
   "lint-staged": {
     "*.{cjs,mjs,js,jsx,cts,mts,ts,tsx,json}": "eslint --fix",
diff --git a/apps/docs/postcss.config.mjs b/apps/docs/postcss.config.mjs
index dd433ece8..d3ae09cc5 100644
--- a/apps/docs/postcss.config.mjs
+++ b/apps/docs/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     'postcss-lightningcss': {
       browsers: '>= .25%'
     }
diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx
index d51fb78d2..18a386f98 100644
--- a/apps/docs/src/app/layout.tsx
+++ b/apps/docs/src/app/layout.tsx
@@ -2,7 +2,6 @@ import type { Metadata, Viewport } from 'next'
 
 import '@/styles/globals.css'
 
-import { Toaster } from '@tszhong0411/ui'
 import { cn } from '@tszhong0411/utils'
 import { GeistMono } from 'geist/font/mono'
 import { GeistSans } from 'geist/font/sans'
@@ -119,7 +118,6 @@ const Layout = (props: LayoutProps) => {
           <div vaul-drawer-wrapper='' className='bg-background'>
             {children}
           </div>
-          <Toaster />
         </Providers>
       </body>
     </html>
diff --git a/apps/docs/src/app/providers.tsx b/apps/docs/src/app/providers.tsx
index 6426a84e0..cee478465 100644
--- a/apps/docs/src/app/providers.tsx
+++ b/apps/docs/src/app/providers.tsx
@@ -2,6 +2,8 @@
 
 import { ThemeProvider } from 'next-themes'
 
+import Sonner from '@/components/sonner'
+
 type ProvidesProps = {
   children: React.ReactNode
 }
@@ -18,6 +20,7 @@ const Providers = (props: ProvidesProps) => {
       disableTransitionOnChange
     >
       {children}
+      <Sonner />
     </ThemeProvider>
   )
 }
diff --git a/apps/docs/src/components/demos/navigation-menu/navigation-menu.tsx b/apps/docs/src/components/demos/navigation-menu/navigation-menu.tsx
index e24b904fc..01670d052 100644
--- a/apps/docs/src/components/demos/navigation-menu/navigation-menu.tsx
+++ b/apps/docs/src/components/demos/navigation-menu/navigation-menu.tsx
@@ -61,7 +61,7 @@ const NavigationMenuDemo = () => {
               <li className='row-span-3'>
                 <NavigationMenuLink asChild>
                   <Link
-                    className='from-muted/50 to-muted flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md'
+                    className='from-muted/50 to-muted bg-linear-to-b outline-hidden flex size-full select-none flex-col justify-end rounded-md p-6 no-underline focus:shadow-md'
                     href='/'
                   >
                     <Logo className='size-6' />
@@ -110,7 +110,7 @@ const ListItem = (props: ListItemProps) => {
       <NavigationMenuLink asChild>
         <Link
           className={cn(
-            'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors',
+            'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground outline-hidden block select-none space-y-1 rounded-md p-3 leading-none no-underline transition-colors',
             className
           )}
           {...rest}
diff --git a/apps/docs/src/components/layout/header.tsx b/apps/docs/src/components/layout/header.tsx
index 8be17095f..54080dfbb 100644
--- a/apps/docs/src/components/layout/header.tsx
+++ b/apps/docs/src/components/layout/header.tsx
@@ -8,7 +8,7 @@ import ThemeToggle from './theme-toggle'
 
 const Header = () => {
   return (
-    <header className='border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur'>
+    <header className='border-border/40 bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur-sm'>
       <div className='mx-auto flex h-14 max-w-6xl items-center justify-between px-5 md:px-8'>
         <div className='flex items-center gap-2 font-semibold md:gap-6'>
           <MobileNav />
diff --git a/apps/docs/src/components/layout/search.tsx b/apps/docs/src/components/layout/search.tsx
index dd37e5676..92cac420e 100644
--- a/apps/docs/src/components/layout/search.tsx
+++ b/apps/docs/src/components/layout/search.tsx
@@ -62,7 +62,7 @@ const Search = () => {
         }}
       >
         <span>Search documentation</span>
-        <kbd className='bg-muted flex select-none gap-1 rounded border px-1.5 font-mono text-xs font-medium'>
+        <kbd className='bg-muted flex select-none gap-1 rounded-sm border px-1.5 font-mono text-xs font-medium'>
           <span>⌘</span>
           <span>K</span>
         </kbd>
diff --git a/apps/docs/src/components/sonner.tsx b/apps/docs/src/components/sonner.tsx
new file mode 100644
index 000000000..46a329d7a
--- /dev/null
+++ b/apps/docs/src/components/sonner.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { Toaster, type ToasterProps } from '@tszhong0411/ui'
+import { useTheme } from 'next-themes'
+
+const Sonner = () => {
+  const { theme } = useTheme()
+
+  return (
+    <Toaster
+      toastOptions={{
+        duration: 2500
+      }}
+      visibleToasts={5}
+      theme={theme as ToasterProps['theme']}
+      expand
+    />
+  )
+}
+
+export default Sonner
diff --git a/apps/docs/src/styles/globals.css b/apps/docs/src/styles/globals.css
index 52beae7ec..587c00cce 100644
--- a/apps/docs/src/styles/globals.css
+++ b/apps/docs/src/styles/globals.css
@@ -1,23 +1,12 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import '@tszhong0411/ui/styles/preset.css';
+@import '@tszhong0411/ui/styles/shiki.css';
+@import '@tszhong0411/ui/styles/typography.css';
+@source '../../../../packages/ui/src/**/*.{js,jsx,ts,tsx}';
 
-.shiki span {
-  color: var(--shiki-light);
-}
-
-.dark .shiki span {
-  color: var(--shiki-dark);
-}
-
-pre.shiki {
-  font-size: 13px;
-}
+@theme {
+  --max-width-8xl: 92rem;
 
-pre.shiki .highlighted {
-  margin: 0 -16px;
-  padding: 0 16px;
-  display: inline-block;
-  min-width: calc(100% + 32px);
-  background-color: theme('colors.primary.DEFAULT / 10%');
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
 }
diff --git a/apps/docs/tailwind.config.ts b/apps/docs/tailwind.config.ts
deleted file mode 100644
index 0464eb2fc..000000000
--- a/apps/docs/tailwind.config.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-import sharedConfig from '@tszhong0411/tailwind-config'
-
-const config: Config = {
-  content: ['./src/**/*.{js,ts,jsx,tsx,md,mdx}', '../../packages/ui/src/**/*.{js,ts,jsx,tsx}'],
-  presets: [sharedConfig],
-  theme: {
-    extend: {
-      maxWidth: {
-        '8xl': '92rem'
-      }
-    }
-  }
-}
-
-export default config
diff --git a/apps/web/package.json b/apps/web/package.json
index caef739e1..f7f897e91 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -78,12 +78,12 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
     "@next/bundle-analyzer": "^15.1.3",
+    "@tailwindcss/postcss": "^4.0.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@tszhong0411/eslint-config": "workspace:*",
     "@tszhong0411/kv": "workspace:*",
     "@tszhong0411/shared": "workspace:*",
-    "@tszhong0411/tailwind-config": "workspace:*",
     "@tszhong0411/tsconfig": "workspace:*",
     "@types/canvas-confetti": "^1.9.0",
     "@types/node": "^22.10.2",
@@ -98,7 +98,7 @@
     "postcss-load-config": "^6.0.1",
     "schema-dts": "^1.1.2",
     "sharp": "^0.33.5",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^4.0.1"
   },
   "lint-staged": {
     "*.{cjs,mjs,js,jsx,cts,mts,ts,tsx,json}": "eslint --fix",
diff --git a/apps/web/postcss.config.mjs b/apps/web/postcss.config.mjs
index dd433ece8..d3ae09cc5 100644
--- a/apps/web/postcss.config.mjs
+++ b/apps/web/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     'postcss-lightningcss': {
       browsers: '>= .25%'
     }
diff --git a/apps/web/src/app/[locale]/(main)/blog/[slug]/header.tsx b/apps/web/src/app/[locale]/(main)/blog/[slug]/header.tsx
index 139465a7a..0c029b20e 100644
--- a/apps/web/src/app/[locale]/(main)/blog/[slug]/header.tsx
+++ b/apps/web/src/app/[locale]/(main)/blog/[slug]/header.tsx
@@ -41,7 +41,7 @@ const Header = () => {
   return (
     <div className='space-y-16 py-16'>
       <div className='space-y-16 sm:px-8'>
-        <h1 className='bg-gradient-to-b from-black via-black/90 to-black/70 to-90% bg-clip-text text-center text-4xl font-bold text-transparent md:text-5xl md:leading-[64px] dark:from-white dark:via-white/90 dark:to-white/70'>
+        <h1 className='bg-linear-to-b from-black via-black/90 to-black/70 to-90% bg-clip-text text-center text-4xl font-bold text-transparent md:text-5xl md:leading-[64px] dark:from-white dark:via-white/90 dark:to-white/70'>
           {title}
         </h1>
         <div className='grid grid-cols-2 text-sm max-md:gap-4 md:grid-cols-4'>
diff --git a/apps/web/src/app/[locale]/(main)/dashboard/metrics.tsx b/apps/web/src/app/[locale]/(main)/dashboard/metrics.tsx
index ccfe6ba42..fef2316a9 100644
--- a/apps/web/src/app/[locale]/(main)/dashboard/metrics.tsx
+++ b/apps/web/src/app/[locale]/(main)/dashboard/metrics.tsx
@@ -136,7 +136,7 @@ const Metrics = () => {
           <Link
             key={metric.title}
             href={link}
-            className='group relative overflow-hidden rounded-lg border p-4 shadow-sm transition-colors hover:bg-zinc-100 dark:bg-zinc-900/50 dark:hover:bg-zinc-900'
+            className='shadow-xs group relative overflow-hidden rounded-lg border p-4 transition-colors hover:bg-zinc-100 dark:bg-zinc-900/50 dark:hover:bg-zinc-900'
           >
             <div className='flex flex-col items-center justify-center gap-2 transition-transform group-hover:-translate-y-24 group-focus:-translate-y-24'>
               <div className='flex items-center gap-2 text-3xl font-semibold'>
diff --git a/apps/web/src/app/[locale]/(main)/guestbook/loader.tsx b/apps/web/src/app/[locale]/(main)/guestbook/loader.tsx
index 6d867c83b..d66b855ac 100644
--- a/apps/web/src/app/[locale]/(main)/guestbook/loader.tsx
+++ b/apps/web/src/app/[locale]/(main)/guestbook/loader.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '@tszhong0411/ui'
 import { cn, range } from '@tszhong0411/utils'
 
 const Placeholder = () => (
-  <div className='rounded-lg border p-4 shadow-sm dark:bg-zinc-900/30'>
+  <div className='shadow-xs rounded-lg border p-4 dark:bg-zinc-900/30'>
     <div className='mb-3 flex gap-3'>
       <Skeleton className='size-10 rounded-full' />
       <div className='flex flex-col justify-center gap-1'>
diff --git a/apps/web/src/app/[locale]/(main)/guestbook/messages.tsx b/apps/web/src/app/[locale]/(main)/guestbook/messages.tsx
index 0dd24f75f..a86e12d3b 100644
--- a/apps/web/src/app/[locale]/(main)/guestbook/messages.tsx
+++ b/apps/web/src/app/[locale]/(main)/guestbook/messages.tsx
@@ -111,7 +111,7 @@ const Message = (props: MessageProps) => {
 
   return (
     <MessageProvider value={context}>
-      <div className='rounded-lg border p-4 shadow-sm dark:bg-zinc-900/30' id={`message-${id}`}>
+      <div className='shadow-xs rounded-lg border p-4 dark:bg-zinc-900/30' id={`message-${id}`}>
         <div className='mb-3 flex gap-3'>
           <Avatar>
             <AvatarImage
diff --git a/apps/web/src/app/[locale]/(main)/guestbook/pinned.tsx b/apps/web/src/app/[locale]/(main)/guestbook/pinned.tsx
index ce2b54239..4a813788f 100644
--- a/apps/web/src/app/[locale]/(main)/guestbook/pinned.tsx
+++ b/apps/web/src/app/[locale]/(main)/guestbook/pinned.tsx
@@ -7,7 +7,7 @@ const Pinned = () => {
 
   return (
     <Card className='relative overflow-hidden'>
-      <div className='absolute inset-0 bg-gradient-to-br from-blue-50/80 via-purple-50/50 to-rose-50/30 dark:from-blue-900/20 dark:via-purple-900/20 dark:to-rose-900/10' />
+      <div className='bg-linear-to-br absolute inset-0 from-blue-50/80 via-purple-50/50 to-rose-50/30 dark:from-blue-900/20 dark:via-purple-900/20 dark:to-rose-900/10' />
 
       <div className='absolute right-4 top-4'>
         <PinIcon className='text-muted-foreground/50 size-5 rotate-45' />
@@ -27,7 +27,7 @@ const Pinned = () => {
         </div>
       </div>
 
-      <div className='h-1 w-full bg-gradient-to-r from-blue-500/30 via-purple-500/30 to-pink-500/30 dark:from-blue-400/40 dark:via-purple-400/40 dark:to-pink-400/40' />
+      <div className='bg-linear-to-r h-1 w-full from-blue-500/30 via-purple-500/30 to-pink-500/30 dark:from-blue-400/40 dark:via-purple-400/40 dark:to-pink-400/40' />
     </Card>
   )
 }
diff --git a/apps/web/src/app/[locale]/(main)/guestbook/sign-in.tsx b/apps/web/src/app/[locale]/(main)/guestbook/sign-in.tsx
index 2def2b6c6..a13c809ca 100644
--- a/apps/web/src/app/[locale]/(main)/guestbook/sign-in.tsx
+++ b/apps/web/src/app/[locale]/(main)/guestbook/sign-in.tsx
@@ -11,7 +11,7 @@ const SignIn = () => {
   return (
     <>
       <Button
-        className='dark:text-foreground inline-block bg-gradient-to-br from-[#fcd34d] via-[#ef4444] to-[#ec4899] font-extrabold'
+        className='dark:text-foreground bg-linear-to-br inline-block from-[#fcd34d] via-[#ef4444] to-[#ec4899] font-extrabold'
         onClick={() => {
           setDialogs({ signIn: true })
         }}
diff --git a/apps/web/src/app/providers.tsx b/apps/web/src/app/providers.tsx
index 6cacb26f3..22559b6a6 100644
--- a/apps/web/src/app/providers.tsx
+++ b/apps/web/src/app/providers.tsx
@@ -1,10 +1,11 @@
 'use client'
 
-import { Toaster, type ToasterProps, TooltipProvider } from '@tszhong0411/ui'
+import { TooltipProvider } from '@tszhong0411/ui'
 import { SessionProvider } from 'next-auth/react'
-import { ThemeProvider, useTheme } from 'next-themes'
+import { ThemeProvider } from 'next-themes'
 import { Suspense } from 'react'
 
+import Sonner from '@/components/sonner'
 import { TRPCReactProvider } from '@/trpc/react'
 
 import Debug from './debug'
@@ -15,7 +16,6 @@ type ProvidesProps = {
 
 const Providers = (props: ProvidesProps) => {
   const { children } = props
-  const { theme = 'system' } = useTheme()
 
   return (
     <TRPCReactProvider>
@@ -29,14 +29,7 @@ const Providers = (props: ProvidesProps) => {
         <SessionProvider>
           <TooltipProvider>
             {children}
-            <Toaster
-              toastOptions={{
-                duration: 2500
-              }}
-              visibleToasts={5}
-              theme={theme as ToasterProps['theme']}
-              expand
-            />
+            <Sonner />
             <Suspense>
               <Debug />
             </Suspense>
diff --git a/apps/web/src/components/comments/comment-editor.tsx b/apps/web/src/components/comments/comment-editor.tsx
index af163cf8f..cf1524289 100644
--- a/apps/web/src/components/comments/comment-editor.tsx
+++ b/apps/web/src/components/comments/comment-editor.tsx
@@ -129,7 +129,7 @@ const CommentEditor = (props: CommentEditorProps) => {
     <div
       className={cn(
         'bg-background ring-offset-background focus-within:ring-ring rounded-lg border pb-1',
-        'focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2',
+        'focus-within:outline-hidden focus-within:ring-2 focus-within:ring-offset-2',
         'aria-disabled:cursor-not-allowed aria-disabled:opacity-80'
       )}
     >
diff --git a/apps/web/src/components/home/get-in-touch.tsx b/apps/web/src/components/home/get-in-touch.tsx
index f228b1f91..31309c278 100644
--- a/apps/web/src/components/home/get-in-touch.tsx
+++ b/apps/web/src/components/home/get-in-touch.tsx
@@ -70,25 +70,25 @@ const GetInTouch = () => {
             />
             <div
               id='next-js'
-              className='absolute bottom-12 left-14 rounded-3xl border bg-gradient-to-b from-zinc-50 to-zinc-100 px-2 py-1.5 text-xs opacity-40 dark:from-zinc-800 dark:to-zinc-900'
+              className='bg-linear-to-b absolute bottom-12 left-14 rounded-3xl border from-zinc-50 to-zinc-100 px-2 py-1.5 text-xs opacity-40 dark:from-zinc-800 dark:to-zinc-900'
             >
               Next.js
             </div>
             <div
               id='react-js'
-              className='absolute left-2 top-20 rounded-3xl border bg-gradient-to-b from-zinc-50 to-zinc-100 px-2 py-1.5 text-xs opacity-40 dark:from-zinc-800 dark:to-zinc-900'
+              className='bg-linear-to-b absolute left-2 top-20 rounded-3xl border from-zinc-50 to-zinc-100 px-2 py-1.5 text-xs opacity-40 dark:from-zinc-800 dark:to-zinc-900'
             >
               React.js
             </div>
             <div
               id='typescript'
-              className='absolute bottom-20 right-1 rounded-3xl border bg-gradient-to-b from-zinc-50 to-zinc-100 px-2 py-1.5 text-xs opacity-40 dark:from-zinc-800 dark:to-zinc-900'
+              className='bg-linear-to-b absolute bottom-20 right-1 rounded-3xl border from-zinc-50 to-zinc-100 px-2 py-1.5 text-xs opacity-40 dark:from-zinc-800 dark:to-zinc-900'
             >
               TypeScript
             </div>
             <div
               id='javascript'
-              className='absolute right-8 top-10 rounded-3xl border bg-gradient-to-b from-zinc-50 to-zinc-100 px-2 py-1.5 text-xs opacity-40 dark:from-zinc-800 dark:to-zinc-900'
+              className='bg-linear-to-b absolute right-8 top-10 rounded-3xl border from-zinc-50 to-zinc-100 px-2 py-1.5 text-xs opacity-40 dark:from-zinc-800 dark:to-zinc-900'
             >
               JavaScript
             </div>
@@ -116,7 +116,7 @@ const GetInTouch = () => {
           </div>
 
           <div className='flex flex-col justify-center px-4'>
-            <p className='mb-2 bg-gradient-to-r from-black to-black/70 bg-clip-text text-3xl font-semibold text-transparent dark:from-zinc-100 dark:to-zinc-400'>
+            <p className='bg-linear-to-r mb-2 from-black to-black/70 bg-clip-text text-3xl font-semibold text-transparent dark:from-zinc-100 dark:to-zinc-400'>
               {t('homepage.get-in-touch.title')}
             </p>
             <p className='text-zinc-800 dark:text-zinc-300'>
diff --git a/apps/web/src/components/home/hero.tsx b/apps/web/src/components/home/hero.tsx
index ba3859749..c96c4ad96 100644
--- a/apps/web/src/components/home/hero.tsx
+++ b/apps/web/src/components/home/hero.tsx
@@ -9,22 +9,22 @@ const TEXTS = [
   {
     key: 'amazing',
     className:
-      'bg-clip-text text-center text-transparent bg-gradient-to-r from-[#ff1835] to-[#ffc900]'
+      'bg-clip-text text-center text-transparent bg-linear-to-r from-[#ff1835] to-[#ffc900]'
   },
   {
     key: 'stunning',
     className:
-      'bg-clip-text text-center text-transparent bg-gradient-to-r from-[#0077ff] to-[#00e7df]'
+      'bg-clip-text text-center text-transparent bg-linear-to-r from-[#0077ff] to-[#00e7df]'
   },
   {
     key: 'fantastic',
     className:
-      'bg-clip-text text-center text-transparent bg-gradient-to-r from-[#7f00de] to-[#ff007f]'
+      'bg-clip-text text-center text-transparent bg-linear-to-r from-[#7f00de] to-[#ff007f]'
   },
   {
     key: 'attractive',
     className:
-      'bg-clip-text text-center text-transparent bg-gradient-to-r from-[#2ecc70] to-[#1ca085]'
+      'bg-clip-text text-center text-transparent bg-linear-to-r from-[#2ecc70] to-[#1ca085]'
   }
 ] as const
 
@@ -129,7 +129,7 @@ const Hero = () => {
             alt='Hong'
             lazy={false}
           />
-          <div className='absolute inset-0 -z-10 bg-gradient-to-tl from-purple-700 to-orange-700 opacity-50 blur-2xl' />
+          <div className='bg-linear-to-tl absolute inset-0 -z-10 from-purple-700 to-orange-700 opacity-50 blur-2xl' />
         </motion.div>
       </div>
     </div>
diff --git a/apps/web/src/components/layout/footer.tsx b/apps/web/src/components/layout/footer.tsx
index a534e0576..8b156203e 100644
--- a/apps/web/src/components/layout/footer.tsx
+++ b/apps/web/src/components/layout/footer.tsx
@@ -19,7 +19,7 @@ const Footer = () => {
   const t = useTranslations()
 
   return (
-    <footer className='bg-background/30 relative mx-auto mb-6 flex max-w-5xl flex-col rounded-2xl p-8 shadow-sm saturate-100 backdrop-blur-[10px]'>
+    <footer className='bg-background/30 shadow-xs relative mx-auto mb-6 flex max-w-5xl flex-col rounded-2xl p-8 saturate-100 backdrop-blur-[10px]'>
       {flags.spotify ? <NowPlaying /> : null}
       <div className='mt-12 grid grid-cols-2 sm:grid-cols-3'>
         {FOOTER_LINKS.map((list) => (
diff --git a/apps/web/src/components/layout/header.tsx b/apps/web/src/components/layout/header.tsx
index 2f2eb3bbc..ff9a20783 100644
--- a/apps/web/src/components/layout/header.tsx
+++ b/apps/web/src/components/layout/header.tsx
@@ -38,7 +38,7 @@ const Header = () => {
   return (
     <motion.header
       className={cn(
-        'bg-background/30 fixed inset-x-0 top-4 z-40 mx-auto flex h-[60px] max-w-5xl items-center justify-between rounded-2xl px-8 shadow-sm saturate-100 backdrop-blur-[10px] transition-colors',
+        'bg-background/30 shadow-xs fixed inset-x-0 top-4 z-40 mx-auto flex h-[60px] max-w-5xl items-center justify-between rounded-2xl px-8 saturate-100 backdrop-blur-[10px] transition-colors',
         isScrolled && 'bg-background/80'
       )}
       initial={{
@@ -53,7 +53,7 @@ const Header = () => {
     >
       <a
         href='#skip-nav'
-        className='bg-background focus-visible:ring-ring fixed left-4 top-4 -translate-y-20 rounded-sm border p-2 font-medium shadow-sm transition-transform focus-visible:translate-y-0 focus-visible:ring focus-visible:ring-offset-2'
+        className='bg-background focus-visible:ring-ring rounded-xs shadow-xs focus-visible:ring-3 fixed left-4 top-4 -translate-y-20 border p-2 font-medium transition-transform focus-visible:translate-y-0 focus-visible:ring-offset-2'
       >
         <span>{t('layout.skip-to-main-content')}</span>
       </a>
diff --git a/apps/web/src/components/layout/navbar.tsx b/apps/web/src/components/layout/navbar.tsx
index 26fca7066..7c08826c7 100644
--- a/apps/web/src/components/layout/navbar.tsx
+++ b/apps/web/src/components/layout/navbar.tsx
@@ -22,7 +22,7 @@ const Navbar = () => {
             <li key={link.key} className='relative flex h-[60px] items-center justify-center'>
               <Link
                 className={cn(
-                  'rounded px-3 py-2 text-sm font-medium transition-colors',
+                  'rounded-sm px-3 py-2 text-sm font-medium transition-colors',
                   {
                     ['text-muted-foreground hover:text-foreground']: !isActive
                   },
@@ -37,7 +37,7 @@ const Navbar = () => {
               {isActive ? (
                 <>
                   <div className='bg-nav-link-indicator dark:bg-nav-link-indicator-dark absolute bottom-0 left-1/2 h-px w-12 -translate-x-1/2' />
-                  <div className='absolute bottom-0 left-1/2 size-2.5 -translate-x-1/2 rounded-[4px] bg-[rgb(255_122_151)] blur dark:bg-[rgb(223_29_72)]' />
+                  <div className='absolute bottom-0 left-1/2 size-2.5 -translate-x-1/2 rounded-[4px] bg-[rgb(255_122_151)] blur-sm dark:bg-[rgb(223_29_72)]' />
                 </>
               ) : null}
             </li>
diff --git a/apps/web/src/components/mdx/item-grid.tsx b/apps/web/src/components/mdx/item-grid.tsx
index 6d13baefd..76e425152 100644
--- a/apps/web/src/components/mdx/item-grid.tsx
+++ b/apps/web/src/components/mdx/item-grid.tsx
@@ -25,7 +25,7 @@ const ItemGrid = (props: ItemGridProps) => {
         <Link
           key={item.name}
           href={item.url}
-          className='flex gap-6 rounded-lg border p-4 no-underline shadow-sm transition-colors hover:bg-zinc-100 sm:flex-col sm:gap-3 dark:bg-zinc-900 dark:hover:bg-zinc-800'
+          className='shadow-xs flex gap-6 rounded-lg border p-4 no-underline transition-colors hover:bg-zinc-100 sm:flex-col sm:gap-3 dark:bg-zinc-900 dark:hover:bg-zinc-800'
         >
           <BlurImage
             src={item.image}
diff --git a/apps/web/src/components/mdx/mdx.tsx b/apps/web/src/components/mdx/mdx.tsx
index fa7d80771..538bb8e0d 100644
--- a/apps/web/src/components/mdx/mdx.tsx
+++ b/apps/web/src/components/mdx/mdx.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { getMDXComponent, type MDXComponents } from '@tszhong0411/mdx'
-import { BlurImage, CodeBlock, Kbd, TreeView } from '@tszhong0411/ui'
+import { BlurImage, CodeBlock, Kbd } from '@tszhong0411/ui'
 
 import ImageZoom from '../image-zoom'
 import Link from '../link'
@@ -11,6 +11,7 @@ import ItemGrid from './item-grid'
 import LinkCard from './link-card'
 import Logo from './logo'
 import Table from './table'
+import TreeView from './tree-view'
 import Video from './video'
 
 type MdxProps = {
diff --git a/apps/web/src/components/mdx/tree-view.tsx b/apps/web/src/components/mdx/tree-view.tsx
new file mode 100644
index 000000000..86568dcd0
--- /dev/null
+++ b/apps/web/src/components/mdx/tree-view.tsx
@@ -0,0 +1,23 @@
+import { createTreeCollection, type Node, TreeView as UITreeView } from '@tszhong0411/ui'
+
+type TreeViewProps = { collection: Node } & Omit<
+  React.ComponentProps<typeof UITreeView>,
+  'collection'
+>
+
+const TreeView = (props: TreeViewProps) => {
+  const { collection, ...rest } = props
+
+  return (
+    <UITreeView
+      collection={createTreeCollection({
+        nodeToValue: (node) => node.id,
+        nodeToString: (node) => node.name,
+        rootNode: collection
+      })}
+      {...rest}
+    />
+  )
+}
+
+export default TreeView
diff --git a/apps/web/src/components/sonner.tsx b/apps/web/src/components/sonner.tsx
new file mode 100644
index 000000000..46a329d7a
--- /dev/null
+++ b/apps/web/src/components/sonner.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { Toaster, type ToasterProps } from '@tszhong0411/ui'
+import { useTheme } from 'next-themes'
+
+const Sonner = () => {
+  const { theme } = useTheme()
+
+  return (
+    <Toaster
+      toastOptions={{
+        duration: 2500
+      }}
+      visibleToasts={5}
+      theme={theme as ToasterProps['theme']}
+      expand
+    />
+  )
+}
+
+export default Sonner
diff --git a/apps/web/src/content/en/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx b/apps/web/src/content/en/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx
index 4aadc600d..3ba12f8d9 100644
--- a/apps/web/src/content/en/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx
+++ b/apps/web/src/content/en/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx
@@ -6,8 +6,6 @@ summary: Using Next.js to build a blog is very easy!
 language: en
 ---
 
-import { createTreeCollection } from '@tszhong0411/ui'
-
 ## Preface
 
 The packages to be used:
@@ -47,55 +45,51 @@ Next, create the following file:
 
 <TreeView
   defaultExpandedValue={['components', 'data', 'data/blog', 'lib', 'pages', 'pages/blog']}
-  collection={createTreeCollection({
-    nodeToValue: (node) => node.id,
-    nodeToString: (node) => node.name,
-    rootNode: {
-      id: 'ROOT',
-      name: '',
-      children: [
-        {
-          id: 'components',
-          name: 'components',
-          children: [{ id: 'components/layout.jsx', name: 'layout.jsx' }]
-        },
-        {
-          id: 'data',
-          name: 'data',
-          children: [
-            {
-              id: 'data/blog',
-              name: 'blog',
-              children: [
-                { id: 'data/blog/markdown.mdx', name: 'markdown.mdx' },
-                { id: 'data/blog/nextjs.mdx', name: 'nextjs.mdx' },
-                { id: 'data/blog/react.mdx', name: 'react.mdx' }
-              ]
-            }
-          ]
-        },
-        {
-          id: 'lib',
-          name: 'lib',
-          children: [
-            { id: 'lib/format-date.js', name: 'format-date.js' },
-            { id: 'lib/mdx.js', name: 'mdx.js' }
-          ]
-        },
-        {
-          id: 'pages',
-          name: 'pages',
-          children: [
-            {
-              id: 'pages/blog',
-              name: 'blog',
-              children: [{ id: 'pages/blog/[slug].jsx', name: '[slug].jsx' }]
-            }
-          ]
-        }
-      ]
-    }
-  })}
+  collection={{
+    id: 'ROOT',
+    name: '',
+    children: [
+      {
+        id: 'components',
+        name: 'components',
+        children: [{ id: 'components/layout.jsx', name: 'layout.jsx' }]
+      },
+      {
+        id: 'data',
+        name: 'data',
+        children: [
+          {
+            id: 'data/blog',
+            name: 'blog',
+            children: [
+              { id: 'data/blog/markdown.mdx', name: 'markdown.mdx' },
+              { id: 'data/blog/nextjs.mdx', name: 'nextjs.mdx' },
+              { id: 'data/blog/react.mdx', name: 'react.mdx' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'lib',
+        name: 'lib',
+        children: [
+          { id: 'lib/format-date.js', name: 'format-date.js' },
+          { id: 'lib/mdx.js', name: 'mdx.js' }
+        ]
+      },
+      {
+        id: 'pages',
+        name: 'pages',
+        children: [
+          {
+            id: 'pages/blog',
+            name: 'blog',
+            children: [{ id: 'pages/blog/[slug].jsx', name: '[slug].jsx' }]
+          }
+        ]
+      }
+    ]
+  }}
 />
 
 ### How to handle Markdown files
diff --git a/apps/web/src/content/zh-CN/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx b/apps/web/src/content/zh-CN/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx
index 853345fa7..81597f8e3 100644
--- a/apps/web/src/content/zh-CN/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx
+++ b/apps/web/src/content/zh-CN/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx
@@ -6,8 +6,6 @@ summary: 使用 Next.js 建立博客非常简单！
 language: zh-CN
 ---
 
-import { createTreeCollection } from '@tszhong0411/ui'
-
 ## 前言
 
 将使用的套件：
@@ -47,55 +45,51 @@ yarn create next-app nextjs-mdx-blog
 
 <TreeView
   defaultExpandedValue={['components', 'data', 'data/blog', 'lib', 'pages', 'pages/blog']}
-  collection={createTreeCollection({
-    nodeToValue: (node) => node.id,
-    nodeToString: (node) => node.name,
-    rootNode: {
-      id: 'ROOT',
-      name: '',
-      children: [
-        {
-          id: 'components',
-          name: 'components',
-          children: [{ id: 'components/layout.jsx', name: 'layout.jsx' }]
-        },
-        {
-          id: 'data',
-          name: 'data',
-          children: [
-            {
-              id: 'data/blog',
-              name: 'blog',
-              children: [
-                { id: 'data/blog/markdown.mdx', name: 'markdown.mdx' },
-                { id: 'data/blog/nextjs.mdx', name: 'nextjs.mdx' },
-                { id: 'data/blog/react.mdx', name: 'react.mdx' }
-              ]
-            }
-          ]
-        },
-        {
-          id: 'lib',
-          name: 'lib',
-          children: [
-            { id: 'lib/format-date.js', name: 'format-date.js' },
-            { id: 'lib/mdx.js', name: 'mdx.js' }
-          ]
-        },
-        {
-          id: 'pages',
-          name: 'pages',
-          children: [
-            {
-              id: 'pages/blog',
-              name: 'blog',
-              children: [{ id: 'pages/blog/[slug].jsx', name: '[slug].jsx' }]
-            }
-          ]
-        }
-      ]
-    }
-  })}
+  collection={{
+    id: 'ROOT',
+    name: '',
+    children: [
+      {
+        id: 'components',
+        name: 'components',
+        children: [{ id: 'components/layout.jsx', name: 'layout.jsx' }]
+      },
+      {
+        id: 'data',
+        name: 'data',
+        children: [
+          {
+            id: 'data/blog',
+            name: 'blog',
+            children: [
+              { id: 'data/blog/markdown.mdx', name: 'markdown.mdx' },
+              { id: 'data/blog/nextjs.mdx', name: 'nextjs.mdx' },
+              { id: 'data/blog/react.mdx', name: 'react.mdx' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'lib',
+        name: 'lib',
+        children: [
+          { id: 'lib/format-date.js', name: 'format-date.js' },
+          { id: 'lib/mdx.js', name: 'mdx.js' }
+        ]
+      },
+      {
+        id: 'pages',
+        name: 'pages',
+        children: [
+          {
+            id: 'pages/blog',
+            name: 'blog',
+            children: [{ id: 'pages/blog/[slug].jsx', name: '[slug].jsx' }]
+          }
+        ]
+      }
+    ]
+  }}
 />
 
 ### 如何处理 Markdown 档案
diff --git a/apps/web/src/content/zh-TW/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx b/apps/web/src/content/zh-TW/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx
index 79690db0b..dbe1654ff 100644
--- a/apps/web/src/content/zh-TW/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx
+++ b/apps/web/src/content/zh-TW/blog/how-to-build-a-blog-with-nextjs-and-mdx.mdx
@@ -6,8 +6,6 @@ summary: 使用 Next.js 建立部落格非常簡單！
 language: zh-TW
 ---
 
-import { createTreeCollection } from '@tszhong0411/ui'
-
 ## 前言
 
 將使用的套件：
@@ -47,55 +45,51 @@ yarn create next-app nextjs-mdx-blog
 
 <TreeView
   defaultExpandedValue={['components', 'data', 'data/blog', 'lib', 'pages', 'pages/blog']}
-  collection={createTreeCollection({
-    nodeToValue: (node) => node.id,
-    nodeToString: (node) => node.name,
-    rootNode: {
-      id: 'ROOT',
-      name: '',
-      children: [
-        {
-          id: 'components',
-          name: 'components',
-          children: [{ id: 'components/layout.jsx', name: 'layout.jsx' }]
-        },
-        {
-          id: 'data',
-          name: 'data',
-          children: [
-            {
-              id: 'data/blog',
-              name: 'blog',
-              children: [
-                { id: 'data/blog/markdown.mdx', name: 'markdown.mdx' },
-                { id: 'data/blog/nextjs.mdx', name: 'nextjs.mdx' },
-                { id: 'data/blog/react.mdx', name: 'react.mdx' }
-              ]
-            }
-          ]
-        },
-        {
-          id: 'lib',
-          name: 'lib',
-          children: [
-            { id: 'lib/format-date.js', name: 'format-date.js' },
-            { id: 'lib/mdx.js', name: 'mdx.js' }
-          ]
-        },
-        {
-          id: 'pages',
-          name: 'pages',
-          children: [
-            {
-              id: 'pages/blog',
-              name: 'blog',
-              children: [{ id: 'pages/blog/[slug].jsx', name: '[slug].jsx' }]
-            }
-          ]
-        }
-      ]
-    }
-  })}
+  collection={{
+    id: 'ROOT',
+    name: '',
+    children: [
+      {
+        id: 'components',
+        name: 'components',
+        children: [{ id: 'components/layout.jsx', name: 'layout.jsx' }]
+      },
+      {
+        id: 'data',
+        name: 'data',
+        children: [
+          {
+            id: 'data/blog',
+            name: 'blog',
+            children: [
+              { id: 'data/blog/markdown.mdx', name: 'markdown.mdx' },
+              { id: 'data/blog/nextjs.mdx', name: 'nextjs.mdx' },
+              { id: 'data/blog/react.mdx', name: 'react.mdx' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'lib',
+        name: 'lib',
+        children: [
+          { id: 'lib/format-date.js', name: 'format-date.js' },
+          { id: 'lib/mdx.js', name: 'mdx.js' }
+        ]
+      },
+      {
+        id: 'pages',
+        name: 'pages',
+        children: [
+          {
+            id: 'pages/blog',
+            name: 'blog',
+            children: [{ id: 'pages/blog/[slug].jsx', name: '[slug].jsx' }]
+          }
+        ]
+      }
+    ]
+  }}
 />
 
 ### 如何處理 Markdown 檔案
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index b48e833cf..1526ba312 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -1,35 +1,46 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import '@tszhong0411/ui/styles/preset.css';
+@import '@tszhong0411/ui/styles/shiki.css';
+@import '@tszhong0411/ui/styles/typography.css';
+@source '../../../../packages/ui/src/**/*.{js,jsx,ts,tsx}';
 
-@layer components {
-  .h-content {
-    min-height: calc(100vh - 416px - 96px - 96px - 64px - 24px);
-  }
+@utility h-content {
+  min-height: calc(100vh - 416px - 96px - 96px - 64px - 24px);
 
   @media (max-width: 640px) {
-    .h-content {
-      min-height: calc(100vh - 600px - 96px - 96px - 64px - 24px);
-    }
+    min-height: calc(100vh - 600px - 96px - 96px - 64px - 24px);
   }
 }
 
-.shiki span {
-  color: var(--shiki-light);
-}
+@theme {
+  --background-image-nav-link-indicator: var(--nav-link-indicator);
+  --background-image-email-button: var(--email-button);
 
-.dark .shiki span {
-  color: var(--shiki-dark);
-}
+  --shadow-feature-card: var(--feature-card);
 
-pre.shiki {
-  font-size: 13px;
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
 }
 
-pre.shiki .highlighted {
-  margin: 0 -16px;
-  padding: 0 16px;
-  display: inline-block;
-  min-width: calc(100% + 32px);
-  background-color: theme('colors.primary.DEFAULT / 10%');
+@layer base {
+  :root {
+    --nav-link-indicator: radial-gradient(
+      44.6% 825% at 50% 50%,
+      rgb(255 133 133) 0%,
+      rgb(255 72 109 / 0) 100%
+    );
+    --email-button: linear-gradient(180deg, rgb(210 10 30) 5%, rgb(239 90 90) 100%);
+
+    --feature-card: 0 -1px 3px 0 rgb(0 0 0 / 0.05);
+  }
+
+  .dark {
+    --nav-link-indicator: radial-gradient(
+      44.6% 825% at 50% 50%,
+      rgb(255 28 28) 0%,
+      rgb(255 72 109 / 0) 100%
+    );
+
+    --feature-card: 0 0 0 1px rgb(255 255 255 / 0.06), 0 -1px rgb(255 255 255 / 0.1);
+  }
 }
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
deleted file mode 100644
index 102e1f49c..000000000
--- a/apps/web/tailwind.config.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-import sharedConfig from '@tszhong0411/tailwind-config'
-
-const config: Config = {
-  darkMode: 'class',
-  content: ['./src/**/*.{js,ts,jsx,tsx,md,mdx}', '../../packages/ui/src/**/*.{js,ts,jsx,tsx}'],
-  presets: [sharedConfig],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'nav-link-indicator':
-          'radial-gradient(44.6% 825% at 50% 50%, rgb(255 133 133) 0%, rgb(255 72 109 / 0) 100%)',
-        'nav-link-indicator-dark':
-          'radial-gradient(44.6% 825% at 50% 50%, rgb(255 28 28) 0%, rgb(255 72 109 / 0) 100%)',
-        'email-button': 'linear-gradient(180deg, rgb(210 10 30) 5%, rgb(239 90 90) 100%)'
-      },
-      boxShadow: {
-        'feature-card': '0 -1px 3px 0 rgb(0 0 0 / 0.05)',
-        'feature-card-dark': '0 0 0 1px rgb(255 255 255 / 0.06), 0 -1px rgb(255 255 255 / 0.1)'
-      }
-    }
-  }
-}
-
-export default config
diff --git a/knip.config.ts b/knip.config.ts
index 0f59deb0e..1e508c063 100644
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -5,7 +5,8 @@ const config: KnipConfig = {
   vitest: {
     config: ['vitest.{config,shared,workspace}.ts']
   },
-  ignoreDependencies: ['prettier-plugin-*', 'sharp'],
+  // tailwindcss v4 is not supported currently
+  ignoreDependencies: ['prettier-plugin-*', 'sharp', 'tailwindcss'],
   workspaces: {
     '.': {
       entry: ['turbo/generators/config.ts']
@@ -24,7 +25,8 @@ const config: KnipConfig = {
       }
     },
     'packages/eslint-config': {
-      ignoreDependencies: ['@eslint/config-inspector']
+      // @see https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/325
+      ignoreDependencies: ['@eslint/config-inspector', 'eslint-plugin-tailwindcss']
     },
     'packages/prettier-config': {
       prettier: {
@@ -33,7 +35,7 @@ const config: KnipConfig = {
     },
     'packages/ui': {
       // https://github.com/shadcn-ui/ui/issues/4792
-      ignoreDependencies: ['@radix-ui/react-context']
+      ignoreDependencies: ['@radix-ui/react-context', '@tailwindcss/typography']
     }
   }
 }
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
index b7a5ed2a9..6e8b5c7db 100644
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
@@ -27,7 +27,6 @@
     "postpublish": "bash ./scripts/update-git-repo.sh",
     "type-check": "tsc --noEmit"
   },
-  "sideEffects": false,
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@eslint-react/eslint-plugin": "^1.22.1",
diff --git a/packages/eslint-config/src/configs/tailwindcss.ts b/packages/eslint-config/src/configs/tailwindcss.ts
index f13e04c3a..8a349dfbf 100644
--- a/packages/eslint-config/src/configs/tailwindcss.ts
+++ b/packages/eslint-config/src/configs/tailwindcss.ts
@@ -1,25 +1,26 @@
-import type { Linter } from 'eslint'
+console.log('Hello from tailwindcss.ts')
+// import type { Linter } from 'eslint'
 
-import { tailwindcssPlugin } from '@/plugins'
+// import { tailwindcssPlugin } from '@/plugins'
 
-export const tailwindcss: Linter.Config[] = [
-  {
-    name: 'tszhong0411:tailwindcss',
-    plugins: {
-      tailwindcss: tailwindcssPlugin
-    },
-    rules: {
-      ...tailwindcssPlugin.configs.recommended.rules,
+// export const tailwindcss: Linter.Config[] = [
+//   {
+//     name: 'tszhong0411:tailwindcss',
+//     plugins: {
+//       tailwindcss: tailwindcssPlugin
+//     },
+//     rules: {
+//       ...tailwindcssPlugin.configs.recommended.rules,
 
-      // Done by Prettier
-      'tailwindcss/classnames-order': 'off',
-      // Turn off due to poor performance
-      'tailwindcss/no-custom-classname': 'off'
-    },
-    settings: {
-      tailwindcss: {
-        callees: ['cn', 'clsx', 'cva', 'tv']
-      }
-    }
-  }
-]
+//       // Done by Prettier
+//       'tailwindcss/classnames-order': 'off',
+//       // Turn off due to poor performance
+//       'tailwindcss/no-custom-classname': 'off'
+//     },
+//     settings: {
+//       tailwindcss: {
+//         callees: ['cn', 'clsx', 'cva', 'tv']
+//       }
+//     }
+//   }
+// ]
diff --git a/packages/eslint-config/src/index.ts b/packages/eslint-config/src/index.ts
index a80648e5a..1fbf2cace 100644
--- a/packages/eslint-config/src/index.ts
+++ b/packages/eslint-config/src/index.ts
@@ -10,7 +10,7 @@ import { playwright } from './configs/playwright'
 import { prettier } from './configs/prettier'
 import { react } from './configs/react'
 import { sonarjs } from './configs/sonarjs'
-import { tailwindcss } from './configs/tailwindcss'
+// import { tailwindcss } from './configs/tailwindcss'
 import { testingLibrary } from './configs/testing-library'
 import { turbo } from './configs/turbo'
 import { typescript } from './configs/typescript'
@@ -57,7 +57,8 @@ const tszhong0411 = async (options: Options = {}, ...userConfigs: Configs): Prom
     ...comments,
     ...importSort,
     ...sonarjs,
-    ...tailwindcss,
+    // @see https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/325
+    // ...tailwindcss,
     ...imports,
     ...prettier
   )
diff --git a/packages/eslint-config/src/plugins.ts b/packages/eslint-config/src/plugins.ts
index 4b90a3d18..6ccda15f3 100644
--- a/packages/eslint-config/src/plugins.ts
+++ b/packages/eslint-config/src/plugins.ts
@@ -14,7 +14,7 @@ export { default as prettierPlugin } from 'eslint-plugin-prettier'
 export { default as reactHooksPlugin } from 'eslint-plugin-react-hooks'
 export { default as simpleImportSortPlugin } from 'eslint-plugin-simple-import-sort'
 export * as sonarjsPlugin from 'eslint-plugin-sonarjs'
-export { default as tailwindcssPlugin } from 'eslint-plugin-tailwindcss'
+// export { default as tailwindcssPlugin } from 'eslint-plugin-tailwindcss'
 export { default as testingLibraryPlugin } from 'eslint-plugin-testing-library'
 export * as turboPlugin from 'eslint-plugin-turbo'
 export { default as unicornPlugin } from 'eslint-plugin-unicorn'
diff --git a/packages/mdx/package.json b/packages/mdx/package.json
index 3eef52065..671d111a8 100644
--- a/packages/mdx/package.json
+++ b/packages/mdx/package.json
@@ -31,7 +31,6 @@
     "lint:fix": "eslint --fix .",
     "type-check": "tsc --noEmit"
   },
-  "sideEffects": false,
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@shikijs/rehype": "^1.24.4",
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index c520e5de4..8ad32fedc 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -26,13 +26,12 @@
     "lint:fix": "eslint --fix .",
     "type-check": "tsc --noEmit"
   },
-  "sideEffects": false,
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@tszhong0411/prettier-plugin-package-json": "workspace:*",
     "prettier-plugin-prisma": "^5.0.0",
-    "prettier-plugin-sort-json": "^4.0.0",
-    "prettier-plugin-tailwindcss": "^0.6.9"
+    "prettier-plugin-sort-json": "^4.1.1",
+    "prettier-plugin-tailwindcss": "^0.6.11"
   },
   "peerDependencies": {
     "prettier": "3.x"
diff --git a/packages/prettier-plugin-package-json/package.json b/packages/prettier-plugin-package-json/package.json
index 0db72c6c2..0929bf97e 100644
--- a/packages/prettier-plugin-package-json/package.json
+++ b/packages/prettier-plugin-package-json/package.json
@@ -26,7 +26,6 @@
     "lint:fix": "eslint --fix .",
     "type-check": "tsc --noEmit"
   },
-  "sideEffects": false,
   "types": "./dist/index.d.ts",
   "dependencies": {
     "prettier-package-json": "^2.8.0"
diff --git a/packages/tailwind-config/CHANGELOG.md b/packages/tailwind-config/CHANGELOG.md
deleted file mode 100644
index a011b409a..000000000
--- a/packages/tailwind-config/CHANGELOG.md
+++ /dev/null
@@ -1,147 +0,0 @@
-# @tszhong0411/tailwind-config
-
-## 0.0.23
-
-### Patch Changes
-
-- 2fe0305: Move the custom plugin directly into the Tailwind config file
-
-## 0.0.22
-
-### Patch Changes
-
-- [#996](https://github.com/tszhong0411/honghong.me/pull/996) [`a5bd348`](https://github.com/tszhong0411/honghong.me/commit/a5bd3488276a5defc06af8fe62dd3521870e69c0): Add Tree View component
-
-## 0.0.21
-
-### Patch Changes
-
-- [#987](https://github.com/tszhong0411/honghong.me/pull/987) [`0729a10`](https://github.com/tszhong0411/honghong.me/commit/0729a107f17a8946f4d70b6b2f0b8481169300da): Add input-otp component
-
-## 0.0.20
-
-### Patch Changes
-
-- [`e7f7d28`](https://github.com/tszhong0411/honghong.me/commit/e7f7d286936c594f041bcc1c79f5525e1135012d): Disable kbd styles in tailwind prose
-
-## 0.0.19
-
-### Patch Changes
-
-- [`9dd5a76`](https://github.com/tszhong0411/honghong.me/commit/9dd5a76f1174c3bff26fdf377c5f678756afbcca): Refactor tailwind plugin to solve a ESLint error
-
-## 0.0.18
-
-### Patch Changes
-
-- [`73035da`](https://github.com/tszhong0411/honghong.me/commit/73035dad0a4baeaffe3f5fadc7a580b86349fd57): Remove Cal Sans
-
-- [`fdba13e`](https://github.com/tszhong0411/honghong.me/commit/fdba13e933085bec17f85ec686161377295e13f7): Update license
-
-- [#929](https://github.com/tszhong0411/honghong.me/pull/929) [`b3a181c`](https://github.com/tszhong0411/honghong.me/commit/b3a181cc0d4f778e2e9cb971b2121e685ecf994e): Add accordion component
-
-## 0.0.17
-
-### Patch Changes
-
-- [`b982db2`](https://github.com/tszhong0411/honghong.me/commit/b982db22f671e5f2719fbffc0b8da48c1d9f93c1): Add sidebar
-
-## 0.0.16
-
-### Patch Changes
-
-- [#878](https://github.com/tszhong0411/honghong.me/pull/878) [`20b6739`](https://github.com/tszhong0411/honghong.me/commit/20b67390fd52928160a0709a2ae64991cbc1f19f): Upgrade tailwindcss
-
-## 0.0.15
-
-### Patch Changes
-
-- [`14a91df`](https://github.com/tszhong0411/honghong.me/commit/14a91df468fa5591b2c10263b9c34c1f30b02672): Change dark background color from `0 0% 0%` to `0 0% 2%`.
-
-## 0.0.14
-
-### Patch Changes
-
-- [`c55d148`](https://github.com/tszhong0411/honghong.me/commit/c55d14871ce7510226d2cb0b02222e86f23a8b40): Use plugin instead
-
-## 0.0.13
-
-### Patch Changes
-
-- [`cf4c3af`](https://github.com/tszhong0411/honghong.me/commit/cf4c3af98757bc3d2daf6dddb60ec68f5d492c29): Export css
-
-## 0.0.12
-
-### Patch Changes
-
-- [#841](https://github.com/tszhong0411/honghong.me/pull/841) [`7287d58`](https://github.com/tszhong0411/honghong.me/commit/7287d58e01d380c935f96d8e45ffa8a69bd8e575): Update destructive color in dark mode
-
-## 0.0.11
-
-### Patch Changes
-
-- [#836](https://github.com/tszhong0411/honghong.me/pull/836) [`32cf8ad`](https://github.com/tszhong0411/honghong.me/commit/32cf8ade55089eb5fc8909ec222f3aba4167f135): Update the style of ul, blockquote
-
-- [#836](https://github.com/tszhong0411/honghong.me/pull/836) [`80e221c`](https://github.com/tszhong0411/honghong.me/commit/80e221c06956636387a75438fb9d94c2bc4f0bfb): Set blockquote to normal font style
-
-## 0.0.10
-
-### Patch Changes
-
-- [`221776c`](https://github.com/tszhong0411/honghong.me/commit/221776c1d71aa0f2d252da9ad7a97406ee7e5e29): Publish the src folder as well
-
-## 0.0.9
-
-### Patch Changes
-
-- [`354ee2f`](https://github.com/tszhong0411/honghong.me/commit/354ee2fb54efb4aa35737760cd008271a0765ff2): Add plugin
-
-## 0.0.8
-
-### Patch Changes
-
-- [`4572db9`](https://github.com/tszhong0411/honghong.me/commit/4572db99b755ec13ddeed22c6034a096c2f701fc): Add peerDependencies
-
-## 0.0.7
-
-### Patch Changes
-
-- [`b613eb3`](https://github.com/tszhong0411/honghong.me/commit/b613eb37f940d1c9f9d20cd923ff0d2fa26057df): Update code style
-
-## 0.0.6
-
-### Patch Changes
-
-- [#779](https://github.com/tszhong0411/honghong.me/pull/779) [`40cb17d`](https://github.com/tszhong0411/honghong.me/commit/40cb17de95dfa621d926aecba94f65b0de412a1f): Bump packages
-
-## 0.0.5
-
-### Patch Changes
-
-- [`e56a965`](https://github.com/tszhong0411/honghong.me/commit/e56a96595ccc1d702377c74d3329d77f247c22ca): Sort json
-
-## 0.0.4
-
-### Patch Changes
-
-- [`4d4342e`](https://github.com/tszhong0411/honghong.me/commit/4d4342e75709ba9939561b76171466e2e6becac9): Update code style
-
-- [`9ec0941`](https://github.com/tszhong0411/honghong.me/commit/9ec0941334638c7a6d2d57c1977665c8f6b4b239): Lint json with eslint
-
-## 0.0.3
-
-### Patch Changes
-
-- [`0293f1e`](https://github.com/tszhong0411/honghong.me/commit/0293f1eef1160f3746fc1bdd5c7d914182f6c044): Add lint-staged
-
-## 0.0.2
-
-### Patch Changes
-
-- [#758](https://github.com/tszhong0411/honghong.me/pull/758) [`c6eccaa`](https://github.com/tszhong0411/honghong.me/commit/c6eccaab231468cdc92f800d06128902bccc79cf): Update ui
-
-## 0.0.1
-
-### Patch Changes
-
-- [`1b03784`](https://github.com/tszhong0411/honghong.me/commit/1b0378433c04b66405375bcc229cca5eeb7f0799): Initial commit
diff --git a/packages/tailwind-config/README.md b/packages/tailwind-config/README.md
deleted file mode 100644
index bc81140e4..000000000
--- a/packages/tailwind-config/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @tszhong0411/tailwind-config
-
-⚠️ Warning: This package is intended for honghong.me's internal use. It might release breaking changes frequently and not be documented. Use it at your own risk.
diff --git a/packages/tailwind-config/eslint.config.mjs b/packages/tailwind-config/eslint.config.mjs
deleted file mode 100644
index b79cc0380..000000000
--- a/packages/tailwind-config/eslint.config.mjs
+++ /dev/null
@@ -1,6 +0,0 @@
-import tszhong0411 from '@tszhong0411/eslint-config'
-
-export default tszhong0411({
-  project: './tsconfig.json',
-  tsconfigRootDir: import.meta.dirname
-})
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
deleted file mode 100644
index 73b0546f4..000000000
--- a/packages/tailwind-config/package.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "@tszhong0411/tailwind-config",
-  "version": "0.0.23",
-  "description": "The Tailwind CSS configuration for tszhong0411's projects",
-  "license": "MIT",
-  "author": "tszhong0411 <me@honghong.me> (https://github.com/tszhong0411/)",
-  "homepage": "https://github.com/tszhong0411/honghong.me#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tszhong0411/honghong.me.git"
-  },
-  "bugs": {
-    "url": "https://github.com/tszhong0411/honghong.me/issues"
-  },
-  "main": "tailwind.config.ts",
-  "files": [
-    "tailwind.config.ts"
-  ],
-  "scripts": {
-    "clean": "rm -rf .turbo",
-    "lint": "eslint . --max-warnings 0",
-    "lint:fix": "eslint --fix .",
-    "type-check": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@tailwindcss/typography": "^0.5.15",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "peerDependencies": {
-    "tailwindcss": "3.x"
-  },
-  "devDependencies": {
-    "@tszhong0411/eslint-config": "workspace:*",
-    "@tszhong0411/tsconfig": "workspace:*",
-    "tailwindcss": "^3.4.17"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "lint-staged": {
-    "*.{cjs,mjs,js,jsx,cts,mts,ts,tsx,json}": "eslint --fix",
-    "**/*": "prettier --write --ignore-unknown"
-  }
-}
diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts
deleted file mode 100644
index d1b071b85..000000000
--- a/packages/tailwind-config/tailwind.config.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-import typography from '@tailwindcss/typography'
-import plugin from 'tailwindcss/plugin'
-import animate from 'tailwindcss-animate'
-
-const config: Partial<Config> = {
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))'
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))'
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))'
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))'
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))'
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))'
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))'
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))'
-        }
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)'
-      },
-      fontFamily: {
-        sans: ['var(--font-geist-sans)'],
-        mono: ['var(--font-geist-mono)']
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' }
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' }
-        },
-        'tree-view-content-down': {
-          from: { height: '0' },
-          to: { height: 'var(--height)' }
-        },
-        'tree-view-content-up': {
-          from: { height: 'var(--height)' },
-          to: { height: '0' }
-        },
-        'caret-blink': {
-          '0%, 70%, 100%': { opacity: '1' },
-          '20%, 50%': { opacity: '0' }
-        },
-        'marquee-left': {
-          from: { transform: 'translateX(0)' },
-          to: { transform: 'translateX(calc(-100% - var(--gap)))' }
-        },
-        'marquee-up': {
-          from: { transform: 'translateY(0)' },
-          to: { transform: 'translateY(calc(-100% - var(--gap)))' }
-        }
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        'tree-view-content-down': 'tree-view-content-down 0.2s ease-out',
-        'tree-view-content-up': 'tree-view-content-up 0.2s ease-out',
-        'caret-blink': 'caret-blink 1.25s ease-out infinite',
-        'marquee-left': 'marquee-left var(--duration, 30s) linear infinite',
-        'marquee-up': 'marquee-up var(--duration, 30s) linear infinite'
-      },
-      typography: {
-        DEFAULT: {
-          css: {
-            '--tw-prose-body': "theme('colors.foreground / 90%')",
-            '--tw-prose-headings': "theme('colors.foreground')",
-            '--tw-prose-lead': "theme('colors.foreground')",
-            '--tw-prose-links': "theme('colors.foreground')",
-            '--tw-prose-bold': "theme('colors.foreground')",
-            '--tw-prose-counters': "theme('colors.muted.foreground')",
-            '--tw-prose-bullets': "theme('colors.muted.foreground')",
-            '--tw-prose-hr': "theme('colors.border')",
-            '--tw-prose-quotes': "theme('colors.foreground')",
-            '--tw-prose-quote-borders': "theme('colors.border')",
-            '--tw-prose-captions': "theme('colors.foreground')",
-            '--tw-prose-th-borders': "theme('colors.border')",
-            '--tw-prose-td-borders': "theme('colors.border')",
-            '--tw-prose-code': "theme('colors.foreground')",
-            '--tw-prose-kbd': false,
-            '--tw-prose-kbd-shadows': false,
-            '--tw-prose-pre-bg': false,
-            '--tw-prose-pre-code': false,
-
-            maxWidth: 'none',
-
-            img: {
-              margin: '0 auto'
-            },
-
-            kbd: false,
-
-            code: {
-              padding: '2px 4px',
-              fontSize: '13px',
-              borderRadius: '6px',
-              background: "theme('colors.secondary.DEFAULT / 50%')",
-              border: '1px solid hsl(var(--border))'
-            },
-
-            'pre code': false,
-            'pre code::after': false,
-            'pre code::before': false,
-            'code::after': false,
-            'code::before': false,
-
-            'blockquote p:first-of-type::before': {
-              content: 'none'
-            },
-            'blockquote p:first-of-type::after': {
-              content: 'none'
-            },
-            blockquote: {
-              fontStyle: 'normal'
-            }
-          }
-        }
-      }
-    }
-  },
-  future: {
-    hoverOnlyWhenSupported: true
-  },
-  plugins: [
-    typography,
-    animate,
-    plugin((api) => {
-      api.addBase({
-        ':root': {
-          '--background': '0 0% 100%',
-          '--foreground': '0 0% 3.9%',
-
-          '--card': '0 0% 99.7%',
-          '--card-foreground': '0 0% 3.9%',
-
-          '--popover': '0 0% 100%',
-          '--popover-foreground': '0 0% 15.1%',
-
-          '--primary': '0 0% 9%',
-          '--primary-foreground': '0 0% 98%',
-
-          '--secondary': '0 0% 96.1%',
-          '--secondary-foreground': '0 0% 9%',
-
-          '--muted': '0 0% 96.1%',
-          '--muted-foreground': '0 0% 45.1%',
-
-          '--accent': '0 0% 94.1%',
-          '--accent-foreground': '0 0% 9%',
-
-          '--destructive': '0 84.2% 60.2%',
-          '--destructive-foreground': '0 0% 98%',
-
-          '--border': '0 0% 89.8%',
-          '--input': '0 0% 89.8%',
-          '--ring': '0 0% 63.9%',
-
-          '--radius': '0.5rem',
-
-          '--sidebar-background': '0 0% 98%',
-          '--sidebar-foreground': '240 5.3% 26.1%',
-          '--sidebar-primary': '240 5.9% 10%',
-          '--sidebar-primary-foreground': '0 0% 98%',
-          '--sidebar-accent': '240 4.8% 95.9%',
-          '--sidebar-accent-foreground': '240 5.9% 10%',
-          '--sidebar-border': '220 13% 91%',
-          '--sidebar-ring': '217.2 91.2% 59.8%'
-        },
-        '.dark': {
-          '--background': '0 0% 2%',
-          '--foreground': '0 0% 100%',
-
-          '--card': '0 0% 4%',
-          '--card-foreground': '0 0% 98%',
-
-          '--popover': '0 0% 4%',
-          '--popover-foreground': '0 0% 88%',
-
-          '--primary': '0 0% 98%',
-          '--primary-foreground': '0 0% 9%',
-
-          '--secondary': '0 0% 12.9%',
-          '--secondary-foreground': '0 0% 98%',
-
-          '--muted': '0 0% 12%',
-          '--muted-foreground': '0 0% 60%',
-
-          '--accent': '0 0% 15%',
-          '--accent-foreground': '0 0% 100%',
-
-          '--destructive': '6 84% 48%',
-          '--destructive-foreground': '0 0% 98%',
-
-          '--border': '0 0% 14%',
-          '--input': '0 0% 14%',
-          '--ring': '0 0% 14.9%',
-
-          '--sidebar-background': '240 5.9% 10%',
-          '--sidebar-foreground': '240 4.8% 95.9%',
-          '--sidebar-primary': '224.3 76.3% 48%',
-          '--sidebar-primary-foreground': '0 0% 100%',
-          '--sidebar-accent': '240 3.7% 15.9%',
-          '--sidebar-accent-foreground': '240 4.8% 95.9%',
-          '--sidebar-border': '240 3.7% 15.9%',
-          '--sidebar-ring': '217.2 91.2% 59.8%'
-        },
-        '*': {
-          'border-color': "theme('colors.border')"
-        },
-        html: {
-          'scroll-behavior': 'smooth'
-        },
-        body: {
-          'background-color': "theme('colors.background')",
-          color: "theme('colors.foreground')",
-          '-webkit-font-smoothing': 'antialiased',
-          '-moz-osx-font-smoothing': 'grayscale'
-        }
-      })
-    })
-  ]
-}
-
-export default config
diff --git a/packages/tailwind-config/tsconfig.json b/packages/tailwind-config/tsconfig.json
deleted file mode 100644
index 8371f249d..000000000
--- a/packages/tailwind-config/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "exclude": ["node_modules"],
-  "extends": "@tszhong0411/tsconfig/base.json",
-  "include": ["**/*.ts"]
-}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e1e7ddf3e..ec35fb332 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -13,10 +13,16 @@
     "url": "https://github.com/tszhong0411/honghong.me/issues"
   },
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles/*": "./styles/*"
+  },
   "files": [
-    "dist"
+    "dist",
+    "styles"
   ],
   "scripts": {
     "build": "tsup",
@@ -26,8 +32,6 @@
     "lint:fix": "eslint --fix .",
     "type-check": "tsc --noEmit"
   },
-  "sideEffects": false,
-  "types": "./dist/index.d.ts",
   "dependencies": {
     "@ark-ui/react": "^4.8.1",
     "@icons-pack/react-simple-icons": "10.2.0",
@@ -57,6 +61,7 @@
     "@radix-ui/react-toggle-group": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@radix-ui/react-visually-hidden": "^1.1.1",
+    "@tailwindcss/typography": "^0.5.16",
     "cmdk": "^1.0.4",
     "cva": "1.0.0-beta.3",
     "embla-carousel-react": "^8.5.2",
@@ -80,7 +85,6 @@
   "devDependencies": {
     "@tanstack/react-table": "^8.20.6",
     "@tszhong0411/eslint-config": "workspace:*",
-    "@tszhong0411/tailwind-config": "workspace:*",
     "@tszhong0411/tsconfig": "workspace:*",
     "@tszhong0411/utils": "workspace:*",
     "@types/react": "19.0.2",
@@ -88,7 +92,7 @@
     "next": "^15.1.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^4.0.1"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/ui/src/alert-dialog.tsx b/packages/ui/src/alert-dialog.tsx
index 3c8d6023e..26e099d57 100644
--- a/packages/ui/src/alert-dialog.tsx
+++ b/packages/ui/src/alert-dialog.tsx
@@ -36,8 +36,8 @@ const AlertDialogContent = (props: AlertDialogContentProps) => {
       <AlertDialogPrimitive.Content
         className={cn(
           'bg-background fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg',
-          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
           className
         )}
         {...rest}
diff --git a/packages/ui/src/badge.tsx b/packages/ui/src/badge.tsx
index 30e01b2cc..747524b32 100644
--- a/packages/ui/src/badge.tsx
+++ b/packages/ui/src/badge.tsx
@@ -5,9 +5,9 @@ const badgeVariants = cva({
   base: 'inline-flex items-center justify-center rounded-full border px-2.5 py-0.5 text-xs font-semibold',
   variants: {
     variant: {
-      default: 'bg-primary text-primary-foreground border-transparent shadow',
-      secondary: 'bg-secondary text-secondary-foreground border-transparent shadow',
-      destructive: 'bg-destructive text-destructive-foreground border-transparent shadow',
+      default: 'bg-primary text-primary-foreground border-transparent shadow-sm',
+      secondary: 'bg-secondary text-secondary-foreground border-transparent shadow-sm',
+      destructive: 'bg-destructive text-destructive-foreground border-transparent shadow-sm',
       outline: 'text-foreground'
     }
   },
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 1a654ca51..7050e71b5 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'cva'
 const buttonVariants = cva({
   base: [
     'ring-offset-background inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors',
-    'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+    'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
     'disabled:pointer-events-none disabled:opacity-50'
   ],
   variants: {
diff --git a/packages/ui/src/callout.tsx b/packages/ui/src/callout.tsx
index 00ec1b513..ca49314db 100644
--- a/packages/ui/src/callout.tsx
+++ b/packages/ui/src/callout.tsx
@@ -20,7 +20,7 @@ const Callout = (props: CalloutProps) => {
     <div
       role='alert'
       className={cn(
-        'bg-card text-muted-foreground my-6 flex w-full flex-row gap-2 rounded-lg border p-3 text-sm shadow-md',
+        'bg-card text-muted-foreground shadow-xs my-6 flex w-full flex-row gap-2 rounded-lg border p-3 text-sm',
         className
       )}
       {...rest}
diff --git a/packages/ui/src/card.tsx b/packages/ui/src/card.tsx
index 94cbc174e..eaaef6328 100644
--- a/packages/ui/src/card.tsx
+++ b/packages/ui/src/card.tsx
@@ -7,7 +7,7 @@ const Card = (props: CardProps) => {
 
   return (
     <div
-      className={cn('bg-card text-card-foreground rounded-lg border shadow-sm', className)}
+      className={cn('bg-card text-card-foreground shadow-xs rounded-lg border', className)}
       {...rest}
     />
   )
diff --git a/packages/ui/src/checkbox.tsx b/packages/ui/src/checkbox.tsx
index a8433fb3d..3de518e54 100644
--- a/packages/ui/src/checkbox.tsx
+++ b/packages/ui/src/checkbox.tsx
@@ -10,8 +10,8 @@ const Checkbox = (props: CheckboxProps) => {
   return (
     <CheckboxPrimitive.Root
       className={cn(
-        'border-primary ring-offset-background peer size-4 shrink-0 rounded-sm border',
-        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'border-primary ring-offset-background rounded-xs peer size-4 shrink-0 border',
+        'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
         'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
         'disabled:cursor-not-allowed disabled:opacity-50',
         className
diff --git a/packages/ui/src/combobox.tsx b/packages/ui/src/combobox.tsx
index b33ffe492..99bd32d58 100644
--- a/packages/ui/src/combobox.tsx
+++ b/packages/ui/src/combobox.tsx
@@ -37,7 +37,7 @@ const ComboboxInput = (props: ComboboxInputProps) => {
       className={cn(
         'border-input bg-background ring-offset-background flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-sm',
         'placeholder:text-muted-foreground',
-        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
         'disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
@@ -98,9 +98,9 @@ const ComboboxItem = (props: ComboboxItemProps) => {
   return (
     <ComboboxPrimitive.Item
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors',
-        'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
-        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        'outline-hidden relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm transition-colors',
+        'data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+        'data-disabled:cursor-not-allowed data-disabled:opacity-50',
         className
       )}
       {...rest}
diff --git a/packages/ui/src/command.tsx b/packages/ui/src/command.tsx
index c96a2d55f..5acb58d43 100644
--- a/packages/ui/src/command.tsx
+++ b/packages/ui/src/command.tsx
@@ -52,7 +52,7 @@ const CommandInput = (props: CommandInputProps) => {
     <div className='border-b pb-2'>
       <CommandPrimitive.Input
         className={cn(
-          'w-full bg-transparent px-4 py-2 text-sm outline-none',
+          'outline-hidden w-full bg-transparent px-4 py-2 text-sm',
           'placeholder:text-muted-foreground',
           'disabled:cursor-not-allowed disabled:opacity-50',
           className
@@ -121,9 +121,9 @@ const CommandItem = (props: CommandItemProps) => {
   return (
     <CommandPrimitive.Item
       className={cn(
-        'flex h-10 cursor-default select-none items-center rounded-lg px-2 text-sm outline-none [&:not(:first-child)]:mt-1',
+        'outline-hidden not-first:mt-1 flex h-10 cursor-default select-none items-center rounded-lg px-2 text-sm',
         '[&_svg]:pointer-events-none [&_svg]:mr-2 [&_svg]:size-3.5',
-        'aria-[selected=true]:bg-accent',
+        'aria-selected:bg-accent',
         'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
         '[&_kbd]:text-muted-foreground [&_kbd]:ml-auto [&_kbd]:text-xs',
         className
diff --git a/packages/ui/src/context-menu.tsx b/packages/ui/src/context-menu.tsx
index 4bd3c0bb3..1603551a4 100644
--- a/packages/ui/src/context-menu.tsx
+++ b/packages/ui/src/context-menu.tsx
@@ -19,7 +19,7 @@ const ContextMenuSubTrigger = (props: ContextMenuSubTriggerProps) => {
   return (
     <ContextMenuPrimitive.SubTrigger
       className={cn(
-        'flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none',
+        'outline-hidden flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         inset && 'pl-8',
@@ -89,9 +89,9 @@ const ContextMenuItem = (props: ContextMenuItemProps) => {
   return (
     <ContextMenuPrimitive.Item
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors',
+        'outline-hidden relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         inset && 'pl-8',
         className
       )}
@@ -108,9 +108,9 @@ const ContextMenuCheckboxItem = (props: ContextMenuCheckboxItemProps) => {
   return (
     <ContextMenuPrimitive.CheckboxItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'outline-hidden relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       checked={checked}
@@ -134,9 +134,9 @@ const ContextMenuRadioItem = (props: ContextMenuRadioItemProps) => {
   return (
     <ContextMenuPrimitive.RadioItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'outline-hidden relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       {...rest}
diff --git a/packages/ui/src/data-table.tsx b/packages/ui/src/data-table.tsx
index e9d80987d..6fb168bc6 100644
--- a/packages/ui/src/data-table.tsx
+++ b/packages/ui/src/data-table.tsx
@@ -346,12 +346,12 @@ const DataTableFacetedFilter = <TData, TValue>(
           {selectedValues.size > 0 && (
             <>
               <Separator orientation='vertical' className='mx-2 h-4' />
-              <Badge variant='secondary' className='rounded-sm px-1 font-normal lg:hidden'>
+              <Badge variant='secondary' className='rounded-xs px-1 font-normal lg:hidden'>
                 {selectedValues.size}
               </Badge>
               <div className='hidden space-x-1 lg:flex'>
                 {selectedValues.size > 2 ? (
-                  <Badge variant='secondary' className='rounded-sm px-1 font-normal'>
+                  <Badge variant='secondary' className='rounded-xs px-1 font-normal'>
                     {selectedValues.size} selected
                   </Badge>
                 ) : (
@@ -361,7 +361,7 @@ const DataTableFacetedFilter = <TData, TValue>(
                       <Badge
                         variant='secondary'
                         key={option.value}
-                        className='rounded-sm px-1 font-normal'
+                        className='rounded-xs px-1 font-normal'
                       >
                         {option.label}
                       </Badge>
@@ -384,7 +384,7 @@ const DataTableFacetedFilter = <TData, TValue>(
             placeholder={title}
             className='rounded-none border-0 border-b bg-transparent py-0 text-sm focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0'
           />
-          <ComboboxContent className='rounded-none border-0 bg-transparent p-1 shadow-none data-[state=closed]:!animate-none data-[state=open]:!animate-none'>
+          <ComboboxContent className='data-[state=closed]:animate-none! data-[state=open]:animate-none! rounded-none border-0 bg-transparent p-1 shadow-none'>
             {collection.items.length === 0 ? (
               <div className='py-6 text-center text-sm'>No results found.</div>
             ) : null}
@@ -392,7 +392,7 @@ const DataTableFacetedFilter = <TData, TValue>(
               <ComboboxItem key={item.value} item={item}>
                 <div
                   className={cn(
-                    'border-primary mr-2 flex size-4 items-center justify-center rounded-sm border',
+                    'border-primary rounded-xs mr-2 flex size-4 items-center justify-center border',
                     selectedValues.has(item.value)
                       ? 'bg-primary text-primary-foreground'
                       : 'opacity-50 [&_svg]:invisible'
diff --git a/packages/ui/src/dialog.tsx b/packages/ui/src/dialog.tsx
index 9ab881b49..a0383b9a6 100644
--- a/packages/ui/src/dialog.tsx
+++ b/packages/ui/src/dialog.tsx
@@ -36,8 +36,8 @@ const DialogContent = (props: DialogContentProps) => {
       <DialogPrimitive.Content
         className={cn(
           'bg-background fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg',
-          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
           className
         )}
         {...rest}
@@ -45,9 +45,9 @@ const DialogContent = (props: DialogContentProps) => {
         {children}
         <DialogPrimitive.Close
           className={cn(
-            'ring-offset-background absolute right-4 top-4 rounded-sm opacity-70 transition-opacity',
+            'ring-offset-background rounded-xs absolute right-4 top-4 opacity-70 transition-opacity',
             'hover:opacity-100',
-            'focus:ring-ring focus:outline-none focus:ring-2 focus:ring-offset-2',
+            'focus:ring-ring focus:outline-hidden focus:ring-2 focus:ring-offset-2',
             'disabled:pointer-events-none'
           )}
           aria-label='Close'
diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
index c5edd2a6f..8081420cb 100644
--- a/packages/ui/src/dropdown-menu.tsx
+++ b/packages/ui/src/dropdown-menu.tsx
@@ -19,7 +19,7 @@ const DropdownMenuSubTrigger = (props: DropdownMenuSubTriggerProps) => {
   return (
     <DropdownMenuPrimitive.SubTrigger
       className={cn(
-        'flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none',
+        'outline-hidden flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         inset && 'pl-8',
@@ -90,9 +90,9 @@ const DropdownMenuItem = (props: DropdownMenuItemProps) => {
   return (
     <DropdownMenuPrimitive.Item
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors',
+        'outline-hidden relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         inset && 'pl-8',
         className
       )}
@@ -109,9 +109,9 @@ const DropdownMenuCheckboxItem = (props: DropdownMenuCheckboxItemProps) => {
   return (
     <DropdownMenuPrimitive.CheckboxItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'outline-hidden relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       checked={checked}
@@ -135,9 +135,9 @@ const DropdownMenuRadioItem = (props: DropdownMenuRadioItemProps) => {
   return (
     <DropdownMenuPrimitive.RadioItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'outline-hidden relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       {...rest}
diff --git a/packages/ui/src/hover-card.tsx b/packages/ui/src/hover-card.tsx
index 228296f82..1b01b92e4 100644
--- a/packages/ui/src/hover-card.tsx
+++ b/packages/ui/src/hover-card.tsx
@@ -14,7 +14,7 @@ const HoverCardContent = (props: HoverCardProps) => {
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'bg-popover text-popover-foreground z-50 w-64 rounded-lg border p-4 shadow-lg outline-none',
+        'bg-popover text-popover-foreground outline-hidden z-50 w-64 rounded-lg border p-4 shadow-lg',
         'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
         'data-[side=top]:slide-in-from-bottom-2',
diff --git a/packages/ui/src/input-otp.tsx b/packages/ui/src/input-otp.tsx
index 8917e2755..24e957383 100644
--- a/packages/ui/src/input-otp.tsx
+++ b/packages/ui/src/input-otp.tsx
@@ -10,10 +10,7 @@ const InputOTP = (props: InputOTPProps) => {
 
   return (
     <OTPInput
-      containerClassName={cn(
-        'flex items-center gap-2 has-[:disabled]:opacity-50',
-        containerClassName
-      )}
+      containerClassName={cn('has-disabled:opacity-50 flex items-center gap-2', containerClassName)}
       className={cn('disabled:cursor-not-allowed', className)}
       {...rest}
     />
@@ -48,7 +45,7 @@ const InputOTPSlot = (props: InputOTPSlotProps) => {
     <div
       role='presentation'
       className={cn(
-        'border-input relative flex size-9 items-center justify-center border-y border-r shadow-sm transition-all',
+        'border-input shadow-xs relative flex size-9 items-center justify-center border-y border-r transition-all',
         'first:rounded-l-md first:border-l',
         'last:rounded-r-md',
         isActive && 'ring-ring z-10 ring-1',
diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
index 4061f64b2..56a7cba0b 100644
--- a/packages/ui/src/input.tsx
+++ b/packages/ui/src/input.tsx
@@ -11,7 +11,7 @@ const Input = (props: InputProps) => {
         'border-input bg-background ring-offset-background flex h-10 w-full rounded-lg border px-3 py-2',
         'file:border-0 file:bg-transparent file:text-sm file:font-medium',
         'placeholder:text-muted-foreground',
-        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
         'disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
diff --git a/packages/ui/src/menubar.tsx b/packages/ui/src/menubar.tsx
index d8976f527..370a485a8 100644
--- a/packages/ui/src/menubar.tsx
+++ b/packages/ui/src/menubar.tsx
@@ -32,7 +32,7 @@ const MenubarTrigger = (props: MenubarTriggerProps) => {
   return (
     <MenubarPrimitive.Trigger
       className={cn(
-        'flex cursor-default select-none items-center rounded-md px-3 py-1.5 text-sm font-medium outline-none',
+        'outline-hidden flex cursor-default select-none items-center rounded-md px-3 py-1.5 text-sm font-medium',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         className
@@ -52,7 +52,7 @@ const MenubarSubTrigger = (props: MenubarSubTriggerProps) => {
   return (
     <MenubarPrimitive.SubTrigger
       className={cn(
-        'flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none',
+        'outline-hidden flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm',
         'focus:bg-accent focus:text-accent-foreground',
         'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         inset && 'pl-8',
@@ -125,9 +125,9 @@ const MenubarItem = (props: MenubarItemProps) => {
   return (
     <MenubarPrimitive.Item
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors',
+        'outline-hidden relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         inset && 'pl-8',
         className
       )}
@@ -144,9 +144,9 @@ const MenubarCheckboxItem = (props: MenubarCheckboxItemProps) => {
   return (
     <MenubarPrimitive.CheckboxItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'outline-hidden relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       checked={checked}
@@ -170,9 +170,9 @@ const MenubarRadioItem = (props: MenubarRadioItemProps) => {
   return (
     <MenubarPrimitive.RadioItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'outline-hidden relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       {...rest}
diff --git a/packages/ui/src/navigation-menu.tsx b/packages/ui/src/navigation-menu.tsx
index 3a5701493..08c002601 100644
--- a/packages/ui/src/navigation-menu.tsx
+++ b/packages/ui/src/navigation-menu.tsx
@@ -37,10 +37,10 @@ const NavigationMenuItem = NavigationMenuPrimitive.Item
 const navigationMenuTriggerVariants = cva({
   base: [
     'bg-background group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors',
-    'focus:bg-accent focus:text-accent-foreground focus:outline-none',
+    'focus:bg-accent focus:text-accent-foreground focus:outline-hidden',
     'disabled:pointer-events-none disabled:opacity-50',
     'hover:bg-accent hover:text-accent-foreground',
-    'data-[active]:bg-accent/50',
+    'data-active:bg-accent/50',
     'data-[state=open]:bg-accent/50'
   ]
 })
@@ -114,7 +114,7 @@ const NavigationMenuIndicator = (props: NavigationMenuIndicatorProps) => {
   return (
     <NavigationMenuPrimitive.Indicator
       className={cn(
-        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        'z-1 top-full flex h-1.5 items-end justify-center overflow-hidden',
         'data-[state=visible]:animate-in data-[state=visible]:fade-in',
         'data-[state=hidden]:animate-out data-[state=hidden]:fade-out',
         className
diff --git a/packages/ui/src/popover.tsx b/packages/ui/src/popover.tsx
index 320a29228..702658454 100644
--- a/packages/ui/src/popover.tsx
+++ b/packages/ui/src/popover.tsx
@@ -16,7 +16,7 @@ const PopoverContent = (props: PopoverContentProps) => {
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground z-50 w-72 rounded-lg border p-4 shadow-lg outline-none',
+          'bg-popover text-popover-foreground outline-hidden z-50 w-72 rounded-lg border p-4 shadow-lg',
           'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
           'data-[side=top]:slide-in-from-bottom-2',
diff --git a/packages/ui/src/radio-group.tsx b/packages/ui/src/radio-group.tsx
index 6ccf409af..b0cdcfe84 100644
--- a/packages/ui/src/radio-group.tsx
+++ b/packages/ui/src/radio-group.tsx
@@ -19,7 +19,7 @@ const RadioGroupItem = (props: RadioGroupItemProps) => {
     <RadioGroupPrimitive.Item
       className={cn(
         'border-primary text-primary ring-offset-background aspect-square size-4 rounded-full border',
-        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
         'disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
diff --git a/packages/ui/src/resizable.tsx b/packages/ui/src/resizable.tsx
index ecf89519e..ffcfe7ab5 100644
--- a/packages/ui/src/resizable.tsx
+++ b/packages/ui/src/resizable.tsx
@@ -29,7 +29,7 @@ const ResizableHandle = (props: ResizableHandleProps) => {
       className={cn(
         'bg-border relative flex w-px items-center justify-center',
         'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0',
-        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
         'after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2',
         '[&[data-panel-group-direction=vertical]>div]:rotate-90',
         className
@@ -37,7 +37,7 @@ const ResizableHandle = (props: ResizableHandleProps) => {
       {...rest}
     >
       {withHandle && (
-        <div className='bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border'>
+        <div className='bg-border rounded-xs z-10 flex h-4 w-3 items-center justify-center border'>
           <GripVerticalIcon className='size-2.5' />
         </div>
       )}
diff --git a/packages/ui/src/segment-group.tsx b/packages/ui/src/segment-group.tsx
index b3618b751..0fbf50389 100644
--- a/packages/ui/src/segment-group.tsx
+++ b/packages/ui/src/segment-group.tsx
@@ -52,7 +52,7 @@ const SegmentGroupItem = (props: SegmentGroupItemProps) => {
         'data-[orientation=horizontal]:px-1 data-[orientation=horizontal]:pb-3',
         'data-[orientation=vertical]:px-3 data-[orientation=vertical]:py-1.5',
         'data-[state=checked]:text-foreground',
-        'data-[disabled]:text-muted-foreground data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        'data-disabled:text-muted-foreground data-disabled:cursor-not-allowed data-disabled:opacity-50',
         className
       )}
       {...rest}
diff --git a/packages/ui/src/select.tsx b/packages/ui/src/select.tsx
index dca6cfa30..1d7eebc09 100644
--- a/packages/ui/src/select.tsx
+++ b/packages/ui/src/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = (props: SelectTriggerProps) => {
       className={cn(
         'border-input bg-background ring-offset-background flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-sm',
         'placeholder:text-muted-foreground',
-        'focus:ring-ring focus:outline-none focus:ring-2 focus:ring-offset-2',
+        'focus:ring-ring focus:outline-hidden focus:ring-2 focus:ring-offset-2',
         'disabled:cursor-not-allowed disabled:opacity-50',
         '[&>span]:line-clamp-1',
         className
@@ -122,9 +122,9 @@ const SelectItem = (props: SelectItemProps) => {
   return (
     <SelectPrimitive.Item
       className={cn(
-        'relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        'outline-hidden relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )}
       {...rest}
diff --git a/packages/ui/src/sheet.tsx b/packages/ui/src/sheet.tsx
index 3fdf3b0a3..c3e390a2e 100644
--- a/packages/ui/src/sheet.tsx
+++ b/packages/ui/src/sheet.tsx
@@ -6,8 +6,8 @@ import { XIcon } from 'lucide-react'
 const sheetVariants = cva({
   base: [
     'bg-background fixed z-50 p-6 shadow-lg transition ease-in-out',
-    'data-[state=open]:animate-in data-[state=closed]:duration-300',
-    'data-[state=closed]:animate-out data-[state=open]:duration-500'
+    'data-[state=open]:animate-in data-[state=open]:duration-500',
+    'data-[state=closed]:animate-out data-[state=closed]:duration-300'
   ],
   variants: {
     side: {
@@ -60,9 +60,9 @@ const SheetContent = (props: SheetContentProps) => {
         {children}
         <SheetPrimitive.Close
           className={cn(
-            'ring-offset-background absolute right-4 top-4 rounded-sm opacity-70 transition-opacity',
+            'ring-offset-background rounded-xs absolute right-4 top-4 opacity-70 transition-opacity',
             'hover:opacity-100',
-            'focus:ring-ring focus:outline-none focus:ring-2 focus:ring-offset-2',
+            'focus:ring-ring focus:outline-hidden focus:ring-2 focus:ring-offset-2',
             'disabled:pointer-events-none'
           )}
           aria-label='Close'
diff --git a/packages/ui/src/sidebar.tsx b/packages/ui/src/sidebar.tsx
index 4f3560c0d..8e6b25e4e 100644
--- a/packages/ui/src/sidebar.tsx
+++ b/packages/ui/src/sidebar.tsx
@@ -136,7 +136,7 @@ const SidebarProvider = (props: SidebarProviderProps) => {
             } as React.CSSProperties
           }
           className={cn(
-            'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
             className
           )}
           {...rest}
@@ -170,7 +170,7 @@ const Sidebar = (props: SidebarProps) => {
     return (
       <div
         className={cn(
-          'bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col',
+          'bg-sidebar text-sidebar-foreground w-(--sidebar-width) flex h-full flex-col',
           className
         )}
         ref={ref}
@@ -187,7 +187,7 @@ const Sidebar = (props: SidebarProps) => {
         <SheetContent
           data-sidebar='sidebar'
           data-mobile='true'
-          className='bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden'
+          className='bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden'
           style={
             {
               '--sidebar-width': SIDEBAR_WIDTH_MOBILE
@@ -217,31 +217,31 @@ const Sidebar = (props: SidebarProps) => {
       {/* This is what handles the sidebar gap on desktop */}
       <div
         className={cn(
-          'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+          'w-(--sidebar-width) relative h-svh bg-transparent transition-[width] duration-200 ease-linear',
           'group-data-[collapsible=offcanvas]:w-0',
           'group-data-[side=right]:rotate-180',
           variant === 'floating' || variant === 'inset'
-            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
-            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
         )}
       />
       <div
         className={cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+          'w-(--sidebar-width) fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex',
           side === 'left'
             ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
           // Adjust the padding for floating and inset variants.
           variant === 'floating' || variant === 'inset'
-            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
           className
         )}
         {...props}
       >
         <div
           data-sidebar='sidebar'
-          className='bg-sidebar group-data-[variant=floating]:border-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow'
+          className='bg-sidebar group-data-[variant=floating]:border-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm'
         >
           {children}
         </div>
@@ -290,9 +290,9 @@ const SidebarRail = (props: SidebarRailProps) => {
       type='button'
       className={cn(
         'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
         '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
         '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
         '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
         className
@@ -311,7 +311,7 @@ const SidebarInset = (props: SidebarInsetProps) => {
     <main
       className={cn(
         'bg-background relative flex min-h-svh flex-1 flex-col',
-        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        'peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
         className
       )}
       {...rest}
@@ -413,7 +413,7 @@ const SidebarGroupLabel = (props: SidebarGroupLabelProps) => {
     <Comp
       data-sidebar='group-label'
       className={cn(
-        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear',
+        'text-sidebar-foreground/70 ring-sidebar-ring outline-hidden flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opa] duration-200 ease-linear',
         'focus-visible:ring-2',
         '[&>svg]:size-4 [&>svg]:shrink-0',
         'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
@@ -436,12 +436,12 @@ const SidebarGroupAction = (props: SidebarGroupActionProps) => {
     <Comp
       data-sidebar='group-action'
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform',
+        'text-sidebar-foreground ring-sidebar-ring outline-hidden absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform',
         'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
         'focus-visible:ring-2',
         '[&>svg]:size-4 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 after:md:hidden',
+        'after:absolute after:-inset-2 md:after:hidden',
         'group-data-[collapsible=icon]:hidden',
         className
       )}
@@ -484,16 +484,16 @@ const SidebarMenuItem = (props: SidebarMenuItemProps) => {
 
 const sidebarMenuButtonVariants = cva({
   base: [
-    'peer/menu-button ring-sidebar-ring flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding]',
+    'peer/menu-button ring-sidebar-ring outline-hidden flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding]',
     'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
     'active:bg-sidebar-accent active:text-sidebar-accent-foreground',
     'aria-disabled:pointer-events-none aria-disabled:opacity-50',
-    'group-has-[[data-sidebar=menu-action]]/menu-item:pr-8',
+    'group-has-data-[sidebar=menu-action]/menu-item:pr-8',
     'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[active=true]:font-medium',
     'data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground',
     'disabled:pointer-events-none disabled:opacity-50',
     'focus-visible:ring-2',
-    'group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0'
+    'group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0'
   ],
   variants: {
     variant: {
@@ -504,7 +504,7 @@ const sidebarMenuButtonVariants = cva({
     size: {
       default: 'h-8 text-sm',
       sm: 'h-7 text-xs',
-      lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0'
+      lg: 'group-data-[collapsible=icon]:p-0! h-12 text-sm'
     }
   },
   defaultVariants: {
@@ -580,11 +580,11 @@ const SidebarMenuAction = (props: SidebarMenuActionProps) => {
     <Comp
       data-sidebar='menu-action'
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform',
+        'text-sidebar-foreground ring-sidebar-ring outline-hidden absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform',
         'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
         'peer-hover/menu-button:text-sidebar-accent-foreground',
         // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 after:md:hidden',
+        'after:absolute after:-inset-2 md:after:hidden',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',
         'peer-data-[size=lg]/menu-button:top-2.5',
@@ -640,7 +640,7 @@ const SidebarMenuSkeleton = (props: SidebarMenuSkeletonProps) => {
     >
       {showIcon && <Skeleton className='size-4 rounded-md' data-sidebar='menu-skeleton-icon' />}
       <Skeleton
-        className='h-4 max-w-[--skeleton-width] flex-1'
+        className='max-w-(--skeleton-width) h-4 flex-1'
         data-sidebar='menu-skeleton-text'
         style={
           {
@@ -691,7 +691,7 @@ const SidebarMenuSubButton = (props: SidebarMenuSubButtonProps) => {
       data-size={size}
       data-active={isActive}
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none',
+        'text-sidebar-foreground ring-sidebar-ring outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2',
         'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
         'disabled:pointer-events-none disabled:opacity-50',
         'aria-disabled:pointer-events-none aria-disabled:opacity-50',
diff --git a/packages/ui/src/slider.tsx b/packages/ui/src/slider.tsx
index f13ee23d9..da8ba5f4c 100644
--- a/packages/ui/src/slider.tsx
+++ b/packages/ui/src/slider.tsx
@@ -60,7 +60,7 @@ const SliderThumb = (props: SliderThumbProps) => {
     <SliderPrimitive.Thumb
       className={cn(
         'border-primary bg-background ring-offset-background size-5 rounded-full border-2 transition-colors',
-        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
         'disabled:pointer-events-none disabled:opacity-50',
         className
       )}
@@ -79,7 +79,7 @@ const SliderMarker = (props: SliderMarkProps) => {
   return (
     <SliderPrimitive.Marker
       className={cn(
-        "text-muted-foreground before:bg-background dark:before:bg-foreground dark:before:data-[state=under-value]:bg-background text-sm before:relative before:-top-1.5 before:left-1/2 before:block before:size-1 before:-translate-x-1/2 before:rounded-full before:content-['']",
+        "text-muted-foreground before:bg-background dark:before:bg-foreground dark:data-[state=under-value]:before:bg-background text-sm before:relative before:-top-1.5 before:left-1/2 before:block before:size-1 before:-translate-x-1/2 before:rounded-full before:content-['']",
         className
       )}
       {...rest}
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
index b5c61c956..58bb1e809 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles.css
@@ -1,3 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import '../styles/preset.css';
diff --git a/packages/ui/src/switch.tsx b/packages/ui/src/switch.tsx
index f82c074b5..a4a3e6614 100644
--- a/packages/ui/src/switch.tsx
+++ b/packages/ui/src/switch.tsx
@@ -9,9 +9,9 @@ const Switch = (props: SwitchProps) => {
   return (
     <SwitchPrimitives.Root
       className={cn(
-        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
+        'shadow-xs peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors',
         'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-        'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
         'disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
diff --git a/packages/ui/src/table.tsx b/packages/ui/src/table.tsx
index 9af5b7b40..a17f9a2f4 100644
--- a/packages/ui/src/table.tsx
+++ b/packages/ui/src/table.tsx
@@ -36,7 +36,7 @@ const TableFooter = (props: TableFooterProps) => {
 
   return (
     <tfoot
-      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+      className={cn('bg-muted/50 border-t font-medium last:[&>tr]:border-b-0', className)}
       {...rest}
     />
   )
diff --git a/packages/ui/src/tabs.tsx b/packages/ui/src/tabs.tsx
index 33c0ef6e3..ca7a4e8d3 100644
--- a/packages/ui/src/tabs.tsx
+++ b/packages/ui/src/tabs.tsx
@@ -28,9 +28,9 @@ const TabsTrigger = (props: TabsTriggerProps) => {
     <TabsPrimitive.Trigger
       className={cn(
         'ring-offset-background inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all',
-        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
         'disabled:pointer-events-none disabled:opacity-50',
-        'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+        'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
         className
       )}
       {...rest}
@@ -47,7 +47,7 @@ const TabsContent = (props: TabsContentProps) => {
     <TabsPrimitive.Content
       className={cn(
         'ring-offset-background mt-2',
-        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
         className
       )}
       {...rest}
diff --git a/packages/ui/src/textarea.tsx b/packages/ui/src/textarea.tsx
index 3fa34b65a..f98fb6ca1 100644
--- a/packages/ui/src/textarea.tsx
+++ b/packages/ui/src/textarea.tsx
@@ -11,7 +11,7 @@ const Textarea = (props: TextareaProps) => {
       className={cn(
         'border-input bg-background ring-offset-background flex min-h-20 w-full rounded-lg border px-3 py-2',
         'placeholder:text-muted-foreground',
-        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
         'disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
diff --git a/packages/ui/src/toaster.tsx b/packages/ui/src/toaster.tsx
index a4d4a744d..113b23aaf 100644
--- a/packages/ui/src/toaster.tsx
+++ b/packages/ui/src/toaster.tsx
@@ -4,23 +4,18 @@ import { Toaster as Sonner } from 'sonner'
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
 const Toaster = (props: ToasterProps) => {
-  const { theme = 'system', toastOptions, ...rest } = props
+  const { theme = 'system', ...rest } = props
 
   return (
     <Sonner
       theme={theme}
-      className='toaster group'
-      toastOptions={{
-        classNames: {
-          toast:
-            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-          description: 'group-[.toast]:text-muted-foreground',
-          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
-          ...toastOptions?.classNames
-        },
-        ...toastOptions
-      }}
+      style={
+        {
+          '--normal-border': 'var(--color-border)',
+          '--normal-bg': 'var(--color-background)',
+          '--normal-text': 'var(--color-foreground)'
+        } as React.CSSProperties
+      }
       icons={{
         success: <CheckCircle2Icon className='size-5 text-green-500' />,
         error: <AlertCircleIcon className='size-5 text-red-500' />,
diff --git a/packages/ui/src/toggle.tsx b/packages/ui/src/toggle.tsx
index 0f8355015..2154192cf 100644
--- a/packages/ui/src/toggle.tsx
+++ b/packages/ui/src/toggle.tsx
@@ -7,7 +7,7 @@ const toggleVariants = cva({
     'inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors',
     'data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
     'hover:bg-muted hover:text-muted-foreground',
-    'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+    'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2',
     'disabled:pointer-events-none disabled:opacity-50',
     '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0'
   ],
@@ -15,7 +15,7 @@ const toggleVariants = cva({
     variant: {
       default: 'bg-transparent',
       outline:
-        'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm'
+        'border-input hover:bg-accent hover:text-accent-foreground shadow-xs border bg-transparent'
     },
     size: {
       default: 'h-9 min-w-9 px-2',
diff --git a/packages/ui/src/tree-view.tsx b/packages/ui/src/tree-view.tsx
index 19f3126d0..dcec73a2d 100644
--- a/packages/ui/src/tree-view.tsx
+++ b/packages/ui/src/tree-view.tsx
@@ -57,7 +57,7 @@ const TreeViewNode = (props: TreeViewNodeProps) => {
           </TreeViewPrimitive.BranchContent>
         </TreeViewPrimitive.Branch>
       ) : (
-        <TreeViewPrimitive.Item className='hover:bg-accent hover:text-accent-foreground data-[selected]:bg-accent relative rounded-md px-2 py-1.5 pl-[calc(var(--depth)*8px)] text-sm'>
+        <TreeViewPrimitive.Item className='hover:bg-accent hover:text-accent-foreground data-selected:bg-accent relative rounded-md px-2 py-1.5 pl-[calc(var(--depth)*8px)] text-sm'>
           <TreeViewPrimitive.ItemText className='flex items-center gap-2'>
             <FileIcon className='size-4' />
             {node.name}
diff --git a/packages/ui/styles/animations.css b/packages/ui/styles/animations.css
new file mode 100644
index 000000000..248ac142e
--- /dev/null
+++ b/packages/ui/styles/animations.css
@@ -0,0 +1,255 @@
+@theme inline {
+  /* Animation Delay https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-delay.md */
+  --animation-delay-0: 0s;
+  --animation-delay-75: 75ms;
+  --animation-delay-100: 0.1s;
+  --animation-delay-150: 0.15s;
+  --animation-delay-200: 0.2s;
+  --animation-delay-300: 0.3s;
+  --animation-delay-500: 0.5s;
+  --animation-delay-700: 0.7s;
+  --animation-delay-1000: 1s;
+
+  /* Animation Direction https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-direction.md */
+  --animation-direction-normal: normal;
+  --animation-direction-reverse: reverse;
+  --animation-direction-alternate: alternate;
+  --animation-direction-alternate-reverse: alternate-reverse;
+
+  /* Animation Fill Mode https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-fill-mode.md */
+  --animation-fill-mode-none: none;
+  --animation-fill-mode-forwards: forwards;
+  --animation-fill-mode-backwards: backwards;
+  --animation-fill-mode-both: both;
+
+  /* Animation Iteration Count https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-iteration-count.md */
+  --animation-repeat-0: 0;
+  --animation-repeat-1: 1;
+  --animation-repeat-infinite: infinite;
+
+  --percentage-0: 0;
+  --percentage-5: 0.05;
+  --percentage-10: 0.1;
+  --percentage-15: 0.15;
+  --percentage-20: 0.2;
+  --percentage-25: 0.25;
+  --percentage-30: 0.3;
+  --percentage-35: 0.35;
+  --percentage-40: 0.4;
+  --percentage-45: 0.45;
+  --percentage-50: 0.5;
+  --percentage-55: 0.55;
+  --percentage-60: 0.6;
+  --percentage-65: 0.65;
+  --percentage-70: 0.7;
+  --percentage-75: 0.75;
+  --percentage-80: 0.8;
+  --percentage-85: 0.85;
+  --percentage-90: 0.9;
+  --percentage-95: 0.95;
+  --percentage-100: 1;
+
+  --rotate-0: 0deg;
+  --rotate-1: 1deg;
+  --rotate-2: 2deg;
+  --rotate-3: 3deg;
+  --rotate-6: 6deg;
+  --rotate-12: 12deg;
+  --rotate-45: 45deg;
+  --rotate-90: 90deg;
+  --rotate-180: 180deg;
+
+  /* Enter Animations https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation.md */
+  --animate-in: enter var(--tw-duration, 150ms) var(--tw-ease, ease);
+  /* Exit Animations https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation.md */
+  --animate-out: exit var(--tw-duration, 150ms) var(--tw-ease, ease);
+
+  @keyframes enter {
+    from {
+      opacity: var(--tw-enter-opacity, 1);
+      transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
+        scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
+        rotate(var(--tw-enter-rotate, 0));
+    }
+  }
+
+  @keyframes exit {
+    to {
+      opacity: var(--tw-exit-opacity, 1);
+      transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
+        scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
+        rotate(var(--tw-exit-rotate, 0));
+    }
+  }
+}
+
+/* Animation Delay https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-delay.md */
+@utility delay-* {
+  animation-delay: --value([ *]);
+  animation-delay: calc(--value(integer) * 1ms);
+  animation-delay: --value(--animation-delay- *);
+}
+
+/* Animation Direction https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-direction.md */
+@utility direction-* {
+  animation-direction: --value(--animation-direction- *);
+}
+
+/* Animation Fill Mode https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-fill-mode.md */
+@utility fill-mode-* {
+  animation-fill-mode: --value(--animation-fill-mode- *);
+}
+
+/* Animation Iteration Count https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-iteration-count.md */
+@utility repeat-* {
+  animation-iteration-count: --value(--animation-repeat- *, integer);
+}
+
+/* Animation Play State https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-play-state.md */
+@utility running {
+  animation-play-state: running;
+}
+
+@utility paused {
+  animation-play-state: paused;
+}
+
+/* Enter Animation Opacity https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-opacity.md */
+@utility fade-in {
+  --tw-enter-opacity: 0;
+}
+
+@utility fade-in-* {
+  --tw-enter-opacity: --value(--percentage- *);
+}
+
+/* Exit Animation Opacity https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-opacity.md */
+@utility fade-out {
+  --tw-exit-opacity: 0;
+}
+
+@utility fade-out-* {
+  --tw-exit-opacity: --value(--percentage- *);
+}
+
+/* Enter Animation Rotate https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-rotate.md */
+@utility spin-in {
+  --tw-enter-rotate: 30deg;
+}
+
+@utility spin-in-* {
+  --tw-enter-rotate: --value([ *]);
+  --tw-enter-rotate: calc(--value(integer) * 1deg);
+  --tw-enter-rotate: --value(--rotate- *);
+}
+
+/* Exit Animation Rotate https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-rotate.md */
+@utility spin-out {
+  --tw-exit-rotate: 30deg;
+}
+
+@utility spin-out-* {
+  --tw-exit-rotate: --value([ *]);
+  --tw-exit-rotate: calc(--value(integer) * 1deg);
+  --tw-exit-rotate: --value(--rotate- *);
+}
+
+/* Enter Animation Scale https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-scale.md */
+@utility zoom-in {
+  --tw-enter-scale: 0;
+}
+
+@utility zoom-in-* {
+  --tw-enter-scale: --value(--percentage- *);
+}
+
+/* Exit Animation Scale https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-scale.md */
+@utility zoom-out {
+  --tw-exit-scale: 0;
+}
+
+@utility zoom-out-* {
+  --tw-exit-scale: --value(--percentage- *);
+}
+
+/* Enter Animation Translate https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-translate.md */
+@utility slide-in-from-top {
+  --tw-enter-translate-y: -100%;
+}
+
+@utility slide-in-from-top-* {
+  --tw-enter-translate-y: calc(--value([ *]) * -1);
+  --tw-enter-translate-y: calc(var(--spacing) * --value(integer) * -1);
+  --tw-enter-translate-y: calc(100% * --value(ratio) * -1);
+}
+
+@utility slide-in-from-bottom {
+  --tw-enter-translate-y: 100%;
+}
+
+@utility slide-in-from-bottom-* {
+  --tw-enter-translate-y: --value([ *]);
+  --tw-enter-translate-y: calc(var(--spacing) * --value(integer));
+  --tw-enter-translate-y: calc(100% * --value(ratio));
+}
+
+@utility slide-in-from-left {
+  --tw-enter-translate-x: -100%;
+}
+
+@utility slide-in-from-left-* {
+  --tw-enter-translate-x: calc(--value([ *]) * -1);
+  --tw-enter-translate-x: calc(var(--spacing) * --value(integer) * -1);
+  --tw-enter-translate-x: calc(100% * --value(ratio) * -1);
+}
+
+@utility slide-in-from-right {
+  --tw-enter-translate-x: 100%;
+}
+
+@utility slide-in-from-right-* {
+  --tw-enter-translate-x: --value([ *]);
+  --tw-enter-translate-x: calc(var(--spacing) * --value(integer));
+  --tw-enter-translate-x: calc(100% * --value(ratio));
+}
+
+/* Exit Animation Translate https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-translate.md */
+@utility slide-out-to-top {
+  --tw-exit-translate-y: -100%;
+}
+
+@utility slide-out-to-top-* {
+  --tw-exit-translate-y: calc(--value([ *]) * -1);
+  --tw-exit-translate-y: calc(var(--spacing) * --value(integer) * -1);
+  --tw-exit-translate-y: calc(100% * --value(ratio) * -1);
+}
+
+@utility slide-out-to-bottom {
+  --tw-exit-translate-y: 100%;
+}
+
+@utility slide-out-to-bottom-* {
+  --tw-exit-translate-y: --value([ *]);
+  --tw-exit-translate-y: calc(var(--spacing) * --value(integer));
+  --tw-exit-translate-y: calc(100% * --value(ratio));
+}
+
+@utility slide-out-to-left {
+  --tw-exit-translate-x: -100%;
+}
+
+@utility slide-out-to-left-* {
+  --tw-exit-translate-x: calc(--value([ *]) * -1);
+  --tw-exit-translate-x: calc(var(--spacing) * --value(integer) * -1);
+  --tw-exit-translate-x: calc(100% * --value(ratio) * -1);
+}
+
+@utility slide-out-to-right {
+  --tw-exit-translate-x: 100%;
+}
+
+@utility slide-out-to-right-* {
+  --tw-exit-translate-x: --value([ *]);
+  --tw-exit-translate-x: calc(var(--spacing) * --value(integer));
+  --tw-exit-translate-x: calc(100% * --value(ratio));
+}
diff --git a/packages/ui/styles/preset.css b/packages/ui/styles/preset.css
new file mode 100644
index 000000000..b0328e453
--- /dev/null
+++ b/packages/ui/styles/preset.css
@@ -0,0 +1,224 @@
+@import './animations.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-sidebar: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-tree-view-content-down: tree-view-content-down 0.2s ease-out;
+  --animate-tree-view-content-up: tree-view-content-up 0.2s ease-out;
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+  --animate-marquee-left: marquee-left var(--duration, 30s) linear infinite;
+  --animate-marquee-up: marquee-up var(--duration, 30s) linear infinite;
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes tree-view-content-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--height);
+    }
+  }
+
+  @keyframes tree-view-content-up {
+    from {
+      height: var(--height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes marquee-left {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% - var(--gap)));
+    }
+  }
+
+  @keyframes marquee-up {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(calc(-100% - var(--gap)));
+    }
+  }
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 99.7%;
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 15.1%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 94.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 63.9%;
+
+    --radius: 0.5rem;
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --background: 0 0% 2%;
+    --foreground: 0 0% 100%;
+
+    --card: 0 0% 4%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 4%;
+    --popover-foreground: 0 0% 88%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 12.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 12%;
+    --muted-foreground: 0 0% 60%;
+
+    --accent: 0 0% 15%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 6 84% 48%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14%;
+    --input: 0 0% 14%;
+    --ring: 0 0% 14.9%;
+
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer utilities {
+  * {
+    @apply border-border;
+  }
+
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+}
diff --git a/packages/ui/styles/shiki.css b/packages/ui/styles/shiki.css
new file mode 100644
index 000000000..496ef0884
--- /dev/null
+++ b/packages/ui/styles/shiki.css
@@ -0,0 +1,20 @@
+.shiki span {
+  color: var(--shiki-light);
+}
+
+.dark .shiki span {
+  color: var(--shiki-dark);
+}
+
+pre.shiki {
+  font-size: 13px;
+}
+
+pre.shiki .highlighted {
+  margin: 0 -16px;
+  padding: 0 16px;
+  display: inline-block;
+  min-width: calc(100% + 32px);
+  background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+  line-height: 20px;
+}
diff --git a/packages/ui/styles/typography.css b/packages/ui/styles/typography.css
new file mode 100644
index 000000000..603fa686b
--- /dev/null
+++ b/packages/ui/styles/typography.css
@@ -0,0 +1,55 @@
+@plugin '@tailwindcss/typography';
+
+.prose {
+  --tw-prose-body: color-mix(in oklab, var(--color-foreground) 90%, transparent);
+  --tw-prose-headings: var(--color-foreground);
+  --tw-prose-lead: var(--color-foreground);
+  --tw-prose-links: var(--color-foreground);
+  --tw-prose-bold: var(--color-foreground);
+  --tw-prose-counters: var(--color-muted-foreground);
+  --tw-prose-bullets: var(--color-muted-foreground);
+  --tw-prose-hr: var(--color-border);
+  --tw-prose-quotes: var(--color-foreground);
+  --tw-prose-quote-borders: var(--color-border);
+  --tw-prose-captions: var(--color-foreground);
+  --tw-prose-th-borders: var(--color-border);
+  --tw-prose-td-borders: var(--color-border);
+  --tw-prose-code: var(--color-foreground);
+
+  & {
+    max-width: none;
+  }
+
+  :where(img):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    margin: 0 auto;
+  }
+
+  :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    padding: 2px 4px;
+    font-size: 13px;
+    border-radius: 6px;
+    background: color-mix(in oklab, var(--color-secondary) 50%, transparent);
+    border: 1px solid hsl(var(--border));
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+
+  :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    font-style: normal;
+
+    p {
+      &:first-of-type::before,
+      &:last-of-type::after {
+        content: none;
+      }
+    }
+  }
+
+  :where(video):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+}
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
deleted file mode 100644
index d8ba2943e..000000000
--- a/packages/ui/tailwind.config.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-import sharedConfig from '@tszhong0411/tailwind-config'
-
-const config: Pick<Config, 'presets' | 'content'> = {
-  content: ['./src/**/*.tsx'],
-  presets: [sharedConfig]
-}
-
-export default config
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 28f9e1831..37a159b66 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -26,7 +26,6 @@
     "lint:fix": "eslint --fix .",
     "type-check": "tsc --noEmit"
   },
-  "sideEffects": false,
   "types": "./dist/index.d.ts",
   "dependencies": {
     "clsx": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef807401f..65f70110e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -106,7 +106,7 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.0.4
-        version: 3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(@vitest/ui@3.0.4)(jsdom@26.0.0)(lightningcss@1.26.0)(terser@5.37.0)
+        version: 3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(@vitest/ui@3.0.4)(jsdom@26.0.0)(lightningcss@1.29.1)(terser@5.37.0)
 
   apps/docs:
     dependencies:
@@ -168,15 +168,15 @@ importers:
       '@next/bundle-analyzer':
         specifier: ^15.1.3
         version: 15.1.3
+      '@tailwindcss/postcss':
+        specifier: ^4.0.1
+        version: 4.0.1
       '@tszhong0411/eslint-config':
         specifier: workspace:*
         version: link:../../packages/eslint-config
       '@tszhong0411/shared':
         specifier: workspace:*
         version: link:../../packages/shared
-      '@tszhong0411/tailwind-config':
-        specifier: workspace:*
-        version: link:../../packages/tailwind-config
       '@tszhong0411/tsconfig':
         specifier: workspace:*
         version: link:../../packages/tsconfig
@@ -202,8 +202,8 @@ importers:
         specifier: ^6.0.1
         version: 6.0.1(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(yaml@2.7.0)
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.3))
+        specifier: ^4.0.1
+        version: 4.0.1
 
   apps/web:
     dependencies:
@@ -376,6 +376,9 @@ importers:
       '@next/bundle-analyzer':
         specifier: ^15.1.3
         version: 15.1.3
+      '@tailwindcss/postcss':
+        specifier: ^4.0.1
+        version: 4.0.1
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.6.3
@@ -391,9 +394,6 @@ importers:
       '@tszhong0411/shared':
         specifier: workspace:*
         version: link:../../packages/shared
-      '@tszhong0411/tailwind-config':
-        specifier: workspace:*
-        version: link:../../packages/tailwind-config
       '@tszhong0411/tsconfig':
         specifier: workspace:*
         version: link:../../packages/tsconfig
@@ -417,7 +417,7 @@ importers:
         version: 1.4.6
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.3.4(vite@5.4.2(@types/node@22.10.2)(lightningcss@1.26.0)(terser@5.37.0))
+        version: 4.3.4(vite@5.4.2(@types/node@22.10.2)(lightningcss@1.29.1)(terser@5.37.0))
       jiti:
         specifier: ^2.4.2
         version: 2.4.2
@@ -437,8 +437,8 @@ importers:
         specifier: ^0.33.5
         version: 0.33.5
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.3))
+        specifier: ^4.0.1
+        version: 4.0.1
 
   packages/db:
     dependencies:
@@ -558,7 +558,7 @@ importers:
         version: 3.0.1(eslint@9.17.0(jiti@2.4.2))
       eslint-plugin-tailwindcss:
         specifier: ^3.17.5
-        version: 3.17.5(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3)))
+        version: 3.17.5(tailwindcss@4.0.1)
       eslint-plugin-testing-library:
         specifier: ^7.1.1
         version: 7.1.1(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.3)
@@ -741,11 +741,11 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0(prettier@3.4.2)
       prettier-plugin-sort-json:
-        specifier: ^4.0.0
-        version: 4.0.0(prettier@3.4.2)
+        specifier: ^4.1.1
+        version: 4.1.1(prettier@3.4.2)
       prettier-plugin-tailwindcss:
-        specifier: ^0.6.9
-        version: 0.6.9(prettier@3.4.2)
+        specifier: ^0.6.11
+        version: 0.6.11(prettier@3.4.2)
     devDependencies:
       '@tszhong0411/eslint-config':
         specifier: workspace:*
@@ -776,25 +776,6 @@ importers:
         specifier: workspace:*
         version: link:../tsconfig
 
-  packages/tailwind-config:
-    dependencies:
-      '@tailwindcss/typography':
-        specifier: ^0.5.15
-        version: 0.5.15(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3)))
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3)))
-    devDependencies:
-      '@tszhong0411/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
-      '@tszhong0411/tsconfig':
-        specifier: workspace:*
-        version: link:../tsconfig
-      tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3))
-
   packages/tsconfig:
     dependencies:
       next:
@@ -890,6 +871,9 @@ importers:
       '@radix-ui/react-visually-hidden':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@19.0.3(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@tailwindcss/typography':
+        specifier: ^0.5.16
+        version: 0.5.16(tailwindcss@4.0.1)
       cmdk:
         specifier: ^1.0.4
         version: 1.0.4(@types/react-dom@19.0.3(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -933,9 +917,6 @@ importers:
       '@tszhong0411/eslint-config':
         specifier: workspace:*
         version: link:../eslint-config
-      '@tszhong0411/tailwind-config':
-        specifier: workspace:*
-        version: link:../tailwind-config
       '@tszhong0411/tsconfig':
         specifier: workspace:*
         version: link:../tsconfig
@@ -958,8 +939,8 @@ importers:
         specifier: 19.0.0
         version: 19.0.0(react@19.0.0)
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3))
+        specifier: ^4.0.1
+        version: 4.0.1
 
   packages/utils:
     dependencies:
@@ -4917,10 +4898,86 @@ packages:
       typescript:
         optional: true
 
-  '@tailwindcss/typography@0.5.15':
-    resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
+  '@tailwindcss/node@4.0.1':
+    resolution: {integrity: sha512-lc+ly6PKHqgCVl7eO8D2JlV96Lks5bmL6pdtM6UasyUHLU2zmrOqU6jfgln120IVnCh3VC8GG/ca24xVTtSokw==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.1':
+    resolution: {integrity: sha512-eP/rI9WaAElpeiiHDqGtDqga9iDsOClXxIqdHayHsw93F24F03b60CwgGhrGF9Io/EuWIpz3TMRhPVOLhoXivw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.1':
+    resolution: {integrity: sha512-jZVUo0kNd1IjxdCYwg4dwegDNsq7PoUx4LM814RmgY3gfJ63Y6GlpJXHOpd5FLv1igpeZox5LzRk2oz8MQoJwQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.1':
+    resolution: {integrity: sha512-E31wHiIf4LB0aKRohrS4U6XfFSACCL9ifUFfPQ16FhcBIL4wU5rcBidvWvT9TQFGPkpE69n5dyXUcqiMrnF/Ig==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.1':
+    resolution: {integrity: sha512-8/3ZKLMYqgAsBzTeczOKWtT4geF02g9S7cntY5gvqQZ4E0ImX724cHcZJi9k6fkE6aLbvwxxHxaShFvRxblwKQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.1':
+    resolution: {integrity: sha512-EYjbh225klQfWzy6LeIAfdjHCK+p71yLV/GjdPNW47Bfkkq05fTzIhHhCgshUvNp78EIA33iQU+ktWpW06NgHw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.1':
+    resolution: {integrity: sha512-PrX2SwIqWNP5cYeSyQfrhbk4ffOM338T6CrEwIAGvLPoUZiklt19yknlsBme6bReSw7TSAMy+8KFdLLi5fcWNQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.1':
+    resolution: {integrity: sha512-iuoFGhKDojtfloi5uj6MIk4kxEOGcsAk/kPbZItF9Dp7TnzVhxo2U/718tXhxGrg6jSL3ST3cQHIjA6yw3OeXw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.1':
+    resolution: {integrity: sha512-pNUrGQYyE8RK+N9yvkPmHnlKDfFbni9A3lsi37u4RoA/6Yn+zWVoegvAQMZu3w+jqnpb2A/bYJ+LumcclUZ3yg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.1':
+    resolution: {integrity: sha512-xSGWaDcT6SJ75su9zWXj8GYb2jM/przXwZGH96RTS7HGDIoI1tvgpls88YajG5Sx7hXaqAWCufjw5L/dlu+lzg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.1':
+    resolution: {integrity: sha512-BUNL2isUZ2yWnbplPddggJpZxsqGHPZ1RJAYpu63W4znUnKCzI4m/jiy0WpyYqqOKL9jDM5q0QdsQ9mc3aw5YQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.1':
+    resolution: {integrity: sha512-ZtcVu+XXOddGsPlvO5nh2fnbKmwly2C07ZB1lcYCf/b8qIWF04QY9o6vy6/+6ioLRfbp3E7H/ipFio38DZX4oQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.1':
+    resolution: {integrity: sha512-3z1SpWoDeaA6K6jd92CRrGyDghOcRILEgyWVHRhaUm/tcpiazwJpU9BSG0xB7GGGnl9capojaC+zme/nKsZd/w==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.0.1':
+    resolution: {integrity: sha512-fZHL49vCDauQymdm2U1jehuUeX8msYVDKB/2v+jWhTQleH3QE8J1dJ2dnL5tqRvB0udjBP4kwUC1ZIVIdv66YA==}
+
+  '@tailwindcss/typography@0.5.16':
+    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
     peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20'
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
   '@tanstack/query-core@5.62.15':
     resolution: {integrity: sha512-wT20X14CxcWY8YLJ/1pnsXn/y1Q2uRJZYWW93PWRtZt+3/JlGZyiyTcO4pGnqycnP7CokCROAyatsraosqZsDA==}
@@ -5694,9 +5751,6 @@ packages:
   arg@4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -5960,10 +6014,6 @@ packages:
   camel-case@3.0.0:
     resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -6651,9 +6701,6 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   diff@4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
@@ -6662,9 +6709,6 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -8422,64 +8466,128 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  lightningcss-darwin-arm64@1.29.1:
+    resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
   lightningcss-darwin-x64@1.26.0:
     resolution: {integrity: sha512-Rf9HuHIDi1R6/zgBkJh25SiJHF+dm9axUZW/0UoYCW1/8HV0gMI0blARhH4z+REmWiU1yYT/KyNF3h7tHyRXUg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
+  lightningcss-darwin-x64@1.29.1:
+    resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
   lightningcss-freebsd-x64@1.26.0:
     resolution: {integrity: sha512-C/io7POAxp6sZxFSVGezjajMlCKQ8KSwISLLGRq8xLQpQMokYrUoqYEwmIX8mLmF6C/CZPk0gFmRSzd8biWM0g==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
+  lightningcss-freebsd-x64@1.29.1:
+    resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
   lightningcss-linux-arm-gnueabihf@1.26.0:
     resolution: {integrity: sha512-Aag9kqXqkyPSW+dXMgyWk66C984Nay2pY8Nws+67gHlDzV3cWh7TvFlzuaTaVFMVqdDTzN484LSK3u39zFBnzg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
   lightningcss-linux-arm64-gnu@1.26.0:
     resolution: {integrity: sha512-iJmZM7fUyVjH+POtdiCtExG+67TtPUTer7K/5A8DIfmPfrmeGvzfRyBltGhQz13Wi15K1lf2cPYoRaRh6vcwNA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-arm64-gnu@1.29.1:
+    resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-arm64-musl@1.26.0:
     resolution: {integrity: sha512-XxoEL++tTkyuvu+wq/QS8bwyTXZv2y5XYCMcWL45b8XwkiS8eEEEej9BkMGSRwxa5J4K+LDeIhLrS23CpQyfig==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-arm64-musl@1.29.1:
+    resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-x64-gnu@1.26.0:
     resolution: {integrity: sha512-1dkTfZQAYLj8MUSkd6L/+TWTG8V6Kfrzfa0T1fSlXCXQHrt1HC1/UepXHtKHDt/9yFwyoeayivxXAsApVxn6zA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
+  lightningcss-linux-x64-gnu@1.29.1:
+    resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-linux-x64-musl@1.26.0:
     resolution: {integrity: sha512-yX3Rk9m00JGCUzuUhFEojY+jf/6zHs3XU8S8Vk+FRbnr4St7cjyMXdNjuA2LjiT8e7j8xHRCH8hyZ4H/btRE4A==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
+  lightningcss-linux-x64-musl@1.29.1:
+    resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-win32-arm64-msvc@1.26.0:
     resolution: {integrity: sha512-X/597/cFnCogy9VItj/+7Tgu5VLbAtDF7KZDPdSw0MaL6FL940th1y3HiOzFIlziVvAtbo0RB3NAae1Oofr+Tw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
+  lightningcss-win32-arm64-msvc@1.29.1:
+    resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
   lightningcss-win32-x64-msvc@1.26.0:
     resolution: {integrity: sha512-pYS3EyGP3JRhfqEFYmfFDiZ9/pVNfy8jVIYtrx9TVNusVyDK3gpW1w/rbvroQ4bDJi7grdUtyrYU6V2xkY/bBw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
+  lightningcss-win32-x64-msvc@1.29.1:
+    resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
   lightningcss@1.26.0:
     resolution: {integrity: sha512-a/XZ5hdgifrofQJUArr5AiJjx26SwMam3SJUSMjgebZbESZ96i+6Qsl8tLi0kaUsdMzBWXh9sN1Oe6hp2/dkQw==}
     engines: {node: '>= 12.0.0'}
 
+  lightningcss@1.29.1:
+    resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.2:
     resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
     engines: {node: '>=14'}
@@ -9270,10 +9378,6 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.2:
     resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
     engines: {node: '>= 0.4'}
@@ -9599,10 +9703,6 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
   pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
@@ -9646,36 +9746,12 @@ packages:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
   postcss-lightningcss@1.0.1:
     resolution: {integrity: sha512-9IrtZVt2HQ92iZJTkO43Qipx7E3PM+lLzZM8aGwMmMjNQHcir5jNC42U33p3Gh2lj1nES/ireYWEbMrJNiRBoQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >= 21}
     peerDependencies:
       postcss: ^8.0.0
 
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
   postcss-load-config@6.0.1:
     resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
     engines: {node: '>= 18'}
@@ -9694,23 +9770,10 @@ packages:
       yaml:
         optional: true
 
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
   postcss-selector-parser@6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
-  postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-
   postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -9783,21 +9846,21 @@ packages:
     peerDependencies:
       prettier: '>=2 || >=3'
 
-  prettier-plugin-sort-json@4.0.0:
-    resolution: {integrity: sha512-zV5g+bWFD2zAqyQ8gCkwUTC49o9FxslaUdirwivt5GZHcf57hCocavykuyYqbExoEsuBOg8IU36OY7zmVEMOWA==}
+  prettier-plugin-sort-json@4.1.1:
+    resolution: {integrity: sha512-uJ49wCzwJ/foKKV4tIPxqi4jFFvwUzw4oACMRG2dcmDhBKrxBv0L2wSKkAqHCmxKCvj0xcCZS4jO2kSJO/tRJw==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       prettier: ^3.0.0
 
-  prettier-plugin-tailwindcss@0.6.9:
-    resolution: {integrity: sha512-r0i3uhaZAXYP0At5xGfJH876W3HHGHDp+LCRUJrs57PBeQ6mYHMwr25KH8NPX44F2yGTvdnH7OqCshlQx183Eg==}
+  prettier-plugin-tailwindcss@0.6.11:
+    resolution: {integrity: sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==}
     engines: {node: '>=14.21.3'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
       '@prettier/plugin-pug': '*'
       '@shopify/prettier-plugin-liquid': '*'
       '@trivago/prettier-plugin-sort-imports': '*'
-      '@zackad/prettier-plugin-twig-melody': '*'
+      '@zackad/prettier-plugin-twig': '*'
       prettier: ^3.0
       prettier-plugin-astro: '*'
       prettier-plugin-css-order: '*'
@@ -9819,7 +9882,7 @@ packages:
         optional: true
       '@trivago/prettier-plugin-sort-imports':
         optional: true
-      '@zackad/prettier-plugin-twig-melody':
+      '@zackad/prettier-plugin-twig':
         optional: true
       prettier-plugin-astro:
         optional: true
@@ -10136,9 +10199,6 @@ packages:
     resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
     engines: {node: '>=0.10.0'}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -10862,15 +10922,8 @@ packages:
   tailwind-merge@2.6.0:
     resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
 
-  tailwindcss-animate@1.0.7:
-    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
-
-  tailwindcss@3.4.17:
-    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.0.1:
+    resolution: {integrity: sha512-UK5Biiit/e+r3i0O223bisoS5+y7ZT1PM8Ojn0MxRHzXN1VPZ2KY6Lo6fhu1dOfCfyUAlK7Lt6wSxowRabATBw==}
 
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -11674,11 +11727,6 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
-  yaml@2.6.1:
-    resolution: {integrity: sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==}
-    engines: {node: '>= 14'}
-    hasBin: true
-
   yaml@2.7.0:
     resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
     engines: {node: '>= 14'}
@@ -15932,13 +15980,75 @@ snapshots:
     optionalDependencies:
       typescript: 5.7.3
 
-  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3)))':
+  '@tailwindcss/node@4.0.1':
+    dependencies:
+      enhanced-resolve: 5.18.0
+      jiti: 2.4.2
+      tailwindcss: 4.0.1
+
+  '@tailwindcss/oxide-android-arm64@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.1':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.1':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.1
+      '@tailwindcss/oxide-darwin-arm64': 4.0.1
+      '@tailwindcss/oxide-darwin-x64': 4.0.1
+      '@tailwindcss/oxide-freebsd-x64': 4.0.1
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.1
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.1
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.1
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.1
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.1
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.1
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.1
+
+  '@tailwindcss/postcss@4.0.1':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.0.1
+      '@tailwindcss/oxide': 4.0.1
+      lightningcss: 1.29.1
+      postcss: 8.5.1
+      tailwindcss: 4.0.1
+
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.0.1)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3))
+      tailwindcss: 4.0.1
 
   '@tanstack/query-core@5.62.15': {}
 
@@ -16416,14 +16526,14 @@ snapshots:
       next: 15.1.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react: 19.0.0
 
-  '@vitejs/plugin-react@4.3.4(vite@5.4.2(@types/node@22.10.2)(lightningcss@1.26.0)(terser@5.37.0))':
+  '@vitejs/plugin-react@4.3.4(vite@5.4.2(@types/node@22.10.2)(lightningcss@1.29.1)(terser@5.37.0))':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.0)
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.0)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 5.4.2(@types/node@22.10.2)(lightningcss@1.26.0)(terser@5.37.0)
+      vite: 5.4.2(@types/node@22.10.2)(lightningcss@1.29.1)(terser@5.37.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -16441,7 +16551,7 @@ snapshots:
       std-env: 3.8.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(@vitest/ui@3.0.4)(jsdom@26.0.0)(lightningcss@1.26.0)(terser@5.37.0)
+      vitest: 3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(@vitest/ui@3.0.4)(jsdom@26.0.0)(lightningcss@1.29.1)(terser@5.37.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -16452,13 +16562,13 @@ snapshots:
       chai: 5.1.2
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.0.4(vite@5.4.2(@types/node@22.10.10)(lightningcss@1.26.0)(terser@5.37.0))':
+  '@vitest/mocker@3.0.4(vite@5.4.2(@types/node@22.10.10)(lightningcss@1.29.1)(terser@5.37.0))':
     dependencies:
       '@vitest/spy': 3.0.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 5.4.2(@types/node@22.10.10)(lightningcss@1.26.0)(terser@5.37.0)
+      vite: 5.4.2(@types/node@22.10.10)(lightningcss@1.29.1)(terser@5.37.0)
 
   '@vitest/pretty-format@3.0.4':
     dependencies:
@@ -16488,7 +16598,7 @@ snapshots:
       sirv: 3.0.0
       tinyglobby: 0.2.10
       tinyrainbow: 2.0.0
-      vitest: 3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(@vitest/ui@3.0.4)(jsdom@26.0.0)(lightningcss@1.26.0)(terser@5.37.0)
+      vitest: 3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(@vitest/ui@3.0.4)(jsdom@26.0.0)(lightningcss@1.29.1)(terser@5.37.0)
 
   '@vitest/utils@3.0.4':
     dependencies:
@@ -17053,8 +17163,6 @@ snapshots:
 
   arg@4.1.3: {}
 
-  arg@5.0.2: {}
-
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -17338,8 +17446,6 @@ snapshots:
       no-case: 2.3.2
       upper-case: 1.1.3
 
-  camelcase-css@2.0.1: {}
-
   camelcase@5.3.1: {}
 
   camelcase@6.3.0: {}
@@ -18083,16 +18189,12 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  didyoumean@1.2.2: {}
-
   diff@4.0.2: {}
 
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
 
-  dlv@1.1.3: {}
-
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -18822,11 +18924,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-tailwindcss@3.17.5(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3))):
+  eslint-plugin-tailwindcss@3.17.5(tailwindcss@4.0.1):
     dependencies:
       fast-glob: 3.3.2
       postcss: 8.5.1
-      tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3))
+      tailwindcss: 4.0.1
 
   eslint-plugin-testing-library@7.1.1(eslint@9.17.0(jiti@2.4.2))(typescript@5.7.3):
     dependencies:
@@ -20089,7 +20191,8 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jiti@1.21.6: {}
+  jiti@1.21.6:
+    optional: true
 
   jiti@2.4.2: {}
 
@@ -20288,33 +20391,63 @@ snapshots:
   lightningcss-darwin-arm64@1.26.0:
     optional: true
 
+  lightningcss-darwin-arm64@1.29.1:
+    optional: true
+
   lightningcss-darwin-x64@1.26.0:
     optional: true
 
+  lightningcss-darwin-x64@1.29.1:
+    optional: true
+
   lightningcss-freebsd-x64@1.26.0:
     optional: true
 
+  lightningcss-freebsd-x64@1.29.1:
+    optional: true
+
   lightningcss-linux-arm-gnueabihf@1.26.0:
     optional: true
 
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    optional: true
+
   lightningcss-linux-arm64-gnu@1.26.0:
     optional: true
 
+  lightningcss-linux-arm64-gnu@1.29.1:
+    optional: true
+
   lightningcss-linux-arm64-musl@1.26.0:
     optional: true
 
+  lightningcss-linux-arm64-musl@1.29.1:
+    optional: true
+
   lightningcss-linux-x64-gnu@1.26.0:
     optional: true
 
+  lightningcss-linux-x64-gnu@1.29.1:
+    optional: true
+
   lightningcss-linux-x64-musl@1.26.0:
     optional: true
 
+  lightningcss-linux-x64-musl@1.29.1:
+    optional: true
+
   lightningcss-win32-arm64-msvc@1.26.0:
     optional: true
 
+  lightningcss-win32-arm64-msvc@1.29.1:
+    optional: true
+
   lightningcss-win32-x64-msvc@1.26.0:
     optional: true
 
+  lightningcss-win32-x64-msvc@1.29.1:
+    optional: true
+
   lightningcss@1.26.0:
     dependencies:
       detect-libc: 1.0.3
@@ -20330,6 +20463,21 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.26.0
       lightningcss-win32-x64-msvc: 1.26.0
 
+  lightningcss@1.29.1:
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.1
+      lightningcss-darwin-x64: 1.29.1
+      lightningcss-freebsd-x64: 1.29.1
+      lightningcss-linux-arm-gnueabihf: 1.29.1
+      lightningcss-linux-arm64-gnu: 1.29.1
+      lightningcss-linux-arm64-musl: 1.29.1
+      lightningcss-linux-x64-gnu: 1.29.1
+      lightningcss-linux-x64-musl: 1.29.1
+      lightningcss-win32-arm64-msvc: 1.29.1
+      lightningcss-win32-x64-msvc: 1.29.1
+
   lilconfig@3.1.2: {}
 
   lilconfig@3.1.3: {}
@@ -21443,8 +21591,6 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.2: {}
 
   object-keys@1.1.1: {}
@@ -21789,8 +21935,6 @@ snapshots:
 
   pidtree@0.6.0: {}
 
-  pify@2.3.0: {}
-
   pify@4.0.1: {}
 
   pirates@4.0.6: {}
@@ -21825,40 +21969,12 @@ snapshots:
 
   possible-typed-array-names@1.0.0: {}
 
-  postcss-import@15.1.0(postcss@8.5.1):
-    dependencies:
-      postcss: 8.5.1
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
-
-  postcss-js@4.0.1(postcss@8.5.1):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.1
-
   postcss-lightningcss@1.0.1(postcss@8.5.1):
     dependencies:
       browserslist: 4.23.3
       lightningcss: 1.26.0
       postcss: 8.5.1
 
-  postcss-load-config@4.0.2(postcss@8.5.1)(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3)):
-    dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.6.1
-    optionalDependencies:
-      postcss: 8.5.1
-      ts-node: 10.9.2(@types/node@22.10.10)(typescript@5.7.3)
-
-  postcss-load-config@4.0.2(postcss@8.5.1)(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.3)):
-    dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.6.1
-    optionalDependencies:
-      postcss: 8.5.1
-      ts-node: 10.9.2(@types/node@22.10.2)(typescript@5.7.3)
-
   postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(yaml@2.7.0):
     dependencies:
       lilconfig: 3.1.2
@@ -21868,23 +21984,11 @@ snapshots:
       tsx: 4.19.2
       yaml: 2.7.0
 
-  postcss-nested@6.2.0(postcss@8.5.1):
-    dependencies:
-      postcss: 8.5.1
-      postcss-selector-parser: 6.1.2
-
   postcss-selector-parser@6.0.10:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
-  postcss-value-parser@4.2.0: {}
-
   postcss@8.4.31:
     dependencies:
       nanoid: 3.3.8
@@ -21956,11 +22060,11 @@ snapshots:
       '@prisma/prisma-schema-wasm': 4.17.0-26.6b0aef69b7cdfc787f822ecd7cdc76d5f1991584
       prettier: 3.4.2
 
-  prettier-plugin-sort-json@4.0.0(prettier@3.4.2):
+  prettier-plugin-sort-json@4.1.1(prettier@3.4.2):
     dependencies:
       prettier: 3.4.2
 
-  prettier-plugin-tailwindcss@0.6.9(prettier@3.4.2):
+  prettier-plugin-tailwindcss@0.6.11(prettier@3.4.2):
     dependencies:
       prettier: 3.4.2
 
@@ -22346,10 +22450,6 @@ snapshots:
 
   react@19.0.0: {}
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   read-pkg-up@7.0.1:
     dependencies:
       find-up: 4.1.0
@@ -23237,63 +23337,7 @@ snapshots:
 
   tailwind-merge@2.6.0: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3))):
-    dependencies:
-      tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3))
-
-  tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.1
-      postcss-import: 15.1.0(postcss@8.5.1)
-      postcss-js: 4.0.1(postcss@8.5.1)
-      postcss-load-config: 4.0.2(postcss@8.5.1)(ts-node@10.9.2(@types/node@22.10.10)(typescript@5.7.3))
-      postcss-nested: 6.2.0(postcss@8.5.1)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-
-  tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.3)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.1
-      postcss-import: 15.1.0(postcss@8.5.1)
-      postcss-js: 4.0.1(postcss@8.5.1)
-      postcss-load-config: 4.0.2(postcss@8.5.1)(ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.3))
-      postcss-nested: 6.2.0(postcss@8.5.1)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.0.1: {}
 
   tapable@2.2.1: {}
 
@@ -23453,25 +23497,6 @@ snapshots:
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
 
-  ts-node@10.9.2(@types/node@22.10.2)(typescript@5.7.3):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.11
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 22.10.2
-      acorn: 8.14.0
-      acorn-walk: 8.3.3
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.7.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optional: true
-
   ts-pattern@5.6.0: {}
 
   tsconfig-paths@3.15.0:
@@ -23852,13 +23877,13 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite-node@3.0.4(@types/node@22.10.10)(lightningcss@1.26.0)(terser@5.37.0):
+  vite-node@3.0.4(@types/node@22.10.10)(lightningcss@1.29.1)(terser@5.37.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0
       es-module-lexer: 1.6.0
       pathe: 2.0.2
-      vite: 5.4.2(@types/node@22.10.10)(lightningcss@1.26.0)(terser@5.37.0)
+      vite: 5.4.2(@types/node@22.10.10)(lightningcss@1.29.1)(terser@5.37.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -23870,7 +23895,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite@5.4.2(@types/node@22.10.10)(lightningcss@1.26.0)(terser@5.37.0):
+  vite@5.4.2(@types/node@22.10.10)(lightningcss@1.29.1)(terser@5.37.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.1
@@ -23878,10 +23903,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.10.10
       fsevents: 2.3.3
-      lightningcss: 1.26.0
+      lightningcss: 1.29.1
       terser: 5.37.0
 
-  vite@5.4.2(@types/node@22.10.2)(lightningcss@1.26.0)(terser@5.37.0):
+  vite@5.4.2(@types/node@22.10.2)(lightningcss@1.29.1)(terser@5.37.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.1
@@ -23889,13 +23914,13 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.10.2
       fsevents: 2.3.3
-      lightningcss: 1.26.0
+      lightningcss: 1.29.1
       terser: 5.37.0
 
-  vitest@3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(@vitest/ui@3.0.4)(jsdom@26.0.0)(lightningcss@1.26.0)(terser@5.37.0):
+  vitest@3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(@vitest/ui@3.0.4)(jsdom@26.0.0)(lightningcss@1.29.1)(terser@5.37.0):
     dependencies:
       '@vitest/expect': 3.0.4
-      '@vitest/mocker': 3.0.4(vite@5.4.2(@types/node@22.10.10)(lightningcss@1.26.0)(terser@5.37.0))
+      '@vitest/mocker': 3.0.4(vite@5.4.2(@types/node@22.10.10)(lightningcss@1.29.1)(terser@5.37.0))
       '@vitest/pretty-format': 3.0.4
       '@vitest/runner': 3.0.4
       '@vitest/snapshot': 3.0.4
@@ -23911,8 +23936,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 5.4.2(@types/node@22.10.10)(lightningcss@1.26.0)(terser@5.37.0)
-      vite-node: 3.0.4(@types/node@22.10.10)(lightningcss@1.26.0)(terser@5.37.0)
+      vite: 5.4.2(@types/node@22.10.10)(lightningcss@1.29.1)(terser@5.37.0)
+      vite-node: 3.0.4(@types/node@22.10.10)(lightningcss@1.29.1)(terser@5.37.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/debug': 4.1.12
@@ -24095,8 +24120,6 @@ snapshots:
 
   yaml@1.10.2: {}
 
-  yaml@2.6.1: {}
-
   yaml@2.7.0: {}
 
   yargs-parser@18.1.3:
diff --git a/turbo/generators/templates/package/package.json.hbs b/turbo/generators/templates/package/package.json.hbs
index 82e92e2bd..8cf1f9f05 100644
--- a/turbo/generators/templates/package/package.json.hbs
+++ b/turbo/generators/templates/package/package.json.hbs
@@ -28,7 +28,6 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "sideEffects": false,
   {{else}}
   "main": "./src/index.ts",
   {{/if}}