feat: migrate to tailwindcss v4

README.md

@@ -46,8 +46,6 @@ tooling
   |   └─ shared, fine-grained, eslint presets
   ├─ prettier
   |   └─ shared prettier configuration
-  ├─ tailwind
-  |   └─ shared tailwind configuration
   └─ typescript
       └─ shared tsconfig you can extend from
 ```

apps/web/app/_components/post.tsx

@@ -80,7 +80,9 @@ export const PostCard: React.FC<{ post: RouterOutputs['post']['all'][number] }>
       <Button
         variant="ghost"
         className="m-6 ml-0"
-        onClick={() => deletePost.mutate(post)}
+        onClick={() => {
+          deletePost.mutate(post)
+        }}
       >
         Delete
       </Button>
@@ -91,7 +93,7 @@ export const PostCard: React.FC<{ post: RouterOutputs['post']['all'][number] }>
 export const PostCardSkeleton: React.FC<{ pulse?: boolean }> = ({ pulse = true }) => (
   <Card>
     <CardHeader>
-      <CardTitle className={cn('w-1/4 rounded bg-primary', pulse && 'animate-pulse')}>
+      <CardTitle className={cn('bg-primary w-1/4 rounded', pulse && 'animate-pulse')}>
         &nbsp;
       </CardTitle>
       <CardDescription

apps/web/app/_components/theme-btn.tsx

@@ -10,16 +10,20 @@ export const ThemeBtn: React.FC = () => {
   const { theme, setTheme } = useTheme()
 
   const [isMounted, setMount] = useState<boolean>(false)
-  useEffect(() => setMount(true), [])
+  useEffect(() => {
+    setMount(true)
+  }, [])
   if (!isMounted) return null
 
-  const toggle = () => setTheme(theme === 'dark' ? 'light' : 'dark')
+  const toggle = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark')
+  }
 
   return (
     <Button
       variant="ghost"
       size="icon"
-      className="fixed bottom-4 right-4"
+      className="fixed right-4 bottom-4"
       onClick={toggle}
     >
       {theme === 'dark' ? <SunIcon /> : <MoonIcon />}

apps/web/app/api/auth/[...auth]/route.ts

@@ -22,7 +22,7 @@ export const GET = async (
 
   if (!isCallback) {
     const { url, state } = authProvider.getOAuthUrl()
-    ;(await cookies()).set('oauth_state', `${state}`)
+    ;(await cookies()).set('oauth_state', state)
 
     return NextResponse.redirect(new URL(`${url}`, nextUrl))
   }

apps/web/app/layout.tsx

@@ -14,7 +14,9 @@ import { TRPCReactProvider } from '@/lib/trpc/react'
 const geistSans = Geist({ variable: '--font-sans', subsets: ['latin'] })
 const geistMono = Geist_Mono({ variable: '--font-mono', subsets: ['latin'] })
 
-export default async ({ children }: Readonly<{ children: React.ReactNode }>) => {
+export default async function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
   const session = await auth()
 
   return (

apps/web/app/page.tsx

@@ -7,9 +7,7 @@ import { AuthShowcase } from './_components/auth-showcase'
 import { CreatePostForm, PostCardSkeleton, PostList } from './_components/post'
 import { ThemeBtn } from './_components/theme-btn'
 
-// export const runtime = 'edge'
-
-export default () => {
+export default function HomePage() {
   void api.post.all.prefetch()
 
   return (

apps/web/lib/metadata.ts

@@ -3,7 +3,7 @@ import type { Metadata } from 'next'
 import { getBaseUrl } from '@/lib/utils'
 
 export const createMetadata = (
-  override: Omit<Metadata, 'title'> & { title: string },
+  override: Omit<Metadata, 'title'> & { title?: string },
 ): Metadata => {
   const siteName = 'Create Yuki Turbo'
 

apps/web/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "bun with-env next build",
     "clean": "git clean -xdf .cache .next .turbo node_modules",
-    "dev": "bun with-env next dev --turbopack",
+    "dev": "bun with-env next dev",
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "lint": "eslint",
     "start": "bun with-env next start",
@@ -16,32 +16,32 @@
   "prettier": "@yuki/prettier-config",
   "dependencies": {
     "@t3-oss/env-nextjs": "^0.11.1",
-    "@tanstack/react-query": "^5.64.1",
+    "@tanstack/react-query": "^5.64.2",
     "@trpc/client": "^11.0.0-rc.694",
     "@trpc/react-query": "^11.0.0-rc.694",
     "@trpc/server": "^11.0.0-rc.694",
     "@yuki/api": "workspace:*",
     "@yuki/auth": "workspace:*",
     "@yuki/db": "workspace:*",
     "@yuki/ui": "workspace:*",
-    "next": "15.1.5",
+    "next": "15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "superjson": "^2.2.2",
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@types/node": "^22",
-    "@types/react": "^19.0.7",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/node": "^20",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "^19",
     "@yuki/eslint-config": "workspace:*",
     "@yuki/prettier-config": "workspace:*",
-    "@yuki/tailwind-config": "workspace:*",
     "dotenv-cli": "^8.0.0",
     "eslint": "latest",
     "postcss": "^8.5.1",
     "prettier": "latest",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "latest"
   }
 }

apps/web/postcss.config.js

@@ -1,4 +1,3 @@
-/** @type {import('postcss-load-config').Config} */
-const config = { plugins: { tailwindcss: {} } }
+const config = { plugins: { '@tailwindcss/postcss': {} } }
 
 export default config