feat: support tailwindcss v4 (#1019)

TailwindCSS v4

.changeset/clean-dolphins-tell.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Update styles of toaster

.changeset/curly-ants-speak.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add margin to video elements in typography styles

.changeset/curly-hats-look.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Update build process and style imports for better organization

.changeset/curly-pumas-shout.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/eslint-config': patch
+---
+
+Temporarily disable tailwindcss plugin

.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`

.changeset/happy-hotels-impress.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Update paths for CSS files and include CSS in build process

.changeset/lazy-fans-grin.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add `@tailwindcss/typography` for v4

.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

.changeset/quiet-keys-share.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Adjust Callout component styles for improved appearance

.changeset/smooth-falcons-wash.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Simplify CSS selectors for Shiki styles

.changeset/unlucky-masks-perform.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Adjust line-height for highlighted code blocks in shiki.css

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",

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%'
     }

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>

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>
   )
 }

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}

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 />

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>

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

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);
 }

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",

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%'
     }

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'>

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'>

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'>

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

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>
   )
 }

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 })
         }}

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>

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'
       )}
     >