Skip to content
Open
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .nvmrc

This file was deleted.

14 changes: 7 additions & 7 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@
"browserslist": "defaults, not ie <= 11",
"dependencies": {
"@algolia/autocomplete-core": "^1.18.0",
"@headlessui/react": "^2.2.0",
"@headlessui/tailwindcss": "^0.2.1",
"@headlessui/react": "^2.2.9",
"@headlessui/tailwindcss": "^0.2.2",
"@heroicons/react": "^2.2.0",
"@mdx-js/loader": "^3.1.0",
"@mdx-js/react": "^3.1.0",
"@next/mdx": "15.5.8",
"@scalar/api-reference-react": "^0.4.25",
"@shikijs/transformers": "^1.29.2",
"@sindresorhus/slugify": "^2.1.1",
"@tailwindcss/typography": "^0.5.15",
"@tailwindcss/typography": "^0.5.19",
"@types/mdast": "^4.0.4",
"@types/mdx": "^2.0.13",
"@types/node": "^22.10.0",
Expand All @@ -39,11 +39,11 @@
"next": "15.5.8",
"next-sitemap": "^4.2.3",
"next-themes": "^0.4.6",
"next-view-transitions": "^0.3.4",
"next-view-transitions": "^0.3.5",
"npm-to-yarn": "^3.0.0",
"react": "19.2.2",
"react-dom": "19.2.2",
"react-highlight-words": "^0.20.0",
"react-highlight-words": "^0.21.0",
"recma-import-images": "^0.0.3",
"remark": "^15.0.1",
"remark-gfm": "^4.0.0",
Expand All @@ -52,8 +52,8 @@
"sharp": "0.33.5",
"shiki": "^1.29.2",
"simple-functional-loader": "^1.2.1",
"tailwindcss": "^3.4.16",
"typescript": "5.8.3",
"tailwindcss": "^4.1.18",
"typescript": "5.9.3",
"unified": "^11.0.5",
"unist-util-filter": "^5.0.1",
"unist-util-visit": "^5.0.0",
Expand Down
6 changes: 3 additions & 3 deletions examples/backend-adapters/client-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
"devDependencies": {
"@types/react": "19.2.7",
"@types/react-dom": "19.2.3",
"@vitejs/plugin-react-swc": "^3.7.2",
"typescript": "5.8.3",
"vite": "^6.3.4"
"@vitejs/plugin-react-swc": "^4.2.2",
"typescript": "5.9.3",
"vite": "^7.2.7"
}
}
4 changes: 2 additions & 2 deletions examples/backend-adapters/client-vanilla/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"uploadthing": "7.7.4"
},
"devDependencies": {
"typescript": "5.8.3",
"vite": "^6.3.4"
"typescript": "5.9.3",
"vite": "^7.2.7"
}
}
6 changes: 3 additions & 3 deletions examples/backend-adapters/client-vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
"vue": "^3.4.21"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"typescript": "5.8.3",
"vite": "^6.3.4",
"@vitejs/plugin-vue": "^6.0.3",
"typescript": "5.9.3",
"vite": "^7.2.7",
"vue-tsc": "^2.0.6"
}
}
2 changes: 1 addition & 1 deletion examples/backend-adapters/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"@playwright/test": "1.52.0",
"@uploadthing/react": "7.3.3",
"concurrently": "^9.1.2",
"typescript": "5.8.3",
"typescript": "5.9.3",
"uploadthing": "7.7.4"
}
}
14 changes: 7 additions & 7 deletions examples/backend-adapters/server/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@
"dev:effect": "NODE_ENV=development PORT=3003 tsx watch src/effect-platform.ts"
},
"dependencies": {
"@effect/platform": "0.90.3",
"@effect/platform-node": "0.96.0",
"@effect/platform": "0.93.8",
"@effect/platform-node": "0.103.0",
"@elysiajs/cors": "^1.2.0",
"@fastify/cors": "^10.0.1",
"@hono/node-server": "^1.13.7",
"@sinclair/typebox": "^0.34.13",
"cors": "^2.8.5",
"dotenv": "^16.4.5",
"effect": "3.17.7",
"effect": "3.19.12",
"elysia": "^1.2.9",
"express": "^5.0.1",
"fastify": "^5.2.0",
Expand All @@ -31,12 +31,12 @@
"uploadthing": "7.7.4"
},
"devDependencies": {
"@cloudflare/workers-types": "^4.20241230.0",
"@cloudflare/workers-types": "^4.20251213.0",
"@types/bun": "^1.2.5",
"@types/cors": "^2.8.17",
"@types/express": "^5.0.0",
"@types/cors": "^2.8.19",
"@types/express": "^5.0.6",
"tsx": "^4.19.2",
"typescript": "5.8.3",
"typescript": "5.9.3",
"wrangler": "^3.99.0"
}
}
2 changes: 1 addition & 1 deletion examples/minimal-appdir/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@
"@types/node": "^22.10.0",
"@types/react": "19.2.7",
"@types/react-dom": "19.2.3",
"typescript": "5.8.3"
"typescript": "5.9.3"
}
}
2 changes: 1 addition & 1 deletion examples/minimal-astro-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@
"@astrojs/check": "0.9.4",
"@types/react": "19.2.7",
"@types/react-dom": "19.2.3",
"typescript": "5.8.3"
"typescript": "5.9.3"
}
}
14 changes: 7 additions & 7 deletions examples/minimal-expo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
"@gorhom/bottom-sheet": "^4.6.1",
"@shopify/flash-list": "1.6.4",
"@tanstack/react-query": "^5.29.2",
"@trpc/client": "11.0.0-rc.772",
"@trpc/server": "11.0.0-rc.772",
"@trpc/tanstack-react-query": "11.0.0-rc.772",
"@trpc/client": "11.8.0",
"@trpc/server": "11.8.0",
"@trpc/tanstack-react-query": "11.8.0",
"@uploadthing/expo": "7.2.6",
"expo": "~51.0.8",
"expo-constants": "^16.0.0",
Expand All @@ -45,10 +45,10 @@
"zod": "^3.24.1"
},
"devDependencies": {
"@babel/core": "^7.24.4",
"@babel/runtime": "^7.24.4",
"@babel/core": "^7.28.5",
"@babel/runtime": "^7.28.4",
"@types/react": "19.2.7",
"tailwindcss": "^3.4.16",
"typescript": "5.8.3"
"tailwindcss": "^4.1.18",
"typescript": "5.9.3"
}
}
2 changes: 1 addition & 1 deletion examples/minimal-pagedir/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,6 @@
"@types/node": "^22.10.0",
"@types/react": "19.2.7",
"@types/react-dom": "19.2.3",
"typescript": "5.8.3"
"typescript": "5.9.3"
}
}
5 changes: 2 additions & 3 deletions examples/minimal-solidstart/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@
"node": ">=18"
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"postcss": "8.4.49",
"tailwindcss": "^3.4.16"
"postcss": "8.5.6",
"tailwindcss": "^4.1.18"
}
}
4 changes: 2 additions & 2 deletions examples/minimal-sveltekit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"svelte": "^5.16.1",
"svelte-check": "^4.1.1",
"typescript": "5.8.3",
"vite": "^6.3.4"
"typescript": "5.9.3",
"vite": "^7.2.7"
},
"type": "module"
}
4 changes: 2 additions & 2 deletions examples/minimal-tanstack-start/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"devDependencies": {
"@types/react": "19.2.7",
"@types/react-dom": "19.2.3",
"typescript": "5.8.3",
"vite": "^6.3.4"
"typescript": "5.9.3",
"vite": "^7.2.7"
}
}
10 changes: 5 additions & 5 deletions examples/profile-picture/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,15 @@
"zod": "^3.24.1"
},
"devDependencies": {
"@tailwindcss/postcss": "npm:@tailwindcss/postcss@4.0.0-beta.8",
"@tailwindcss/postcss": "4.1.18",
"@types/node": "^22.10.0",
"@types/react": "19.2.7",
"@types/react-dom": "19.2.3",
"drizzle-kit": "^0.30.1",
"eslint": "9.25.1",
"postcss": "8.4.49",
"tailwindcss": "npm:tailwindcss@4.0.0-beta.8",
"typescript": "5.8.3",
"typescript-eslint": "8.31.0"
"postcss": "8.5.6",
"tailwindcss": "4.1.18",
"typescript": "5.9.3",
"typescript-eslint": "8.49.0"
}
}
2 changes: 1 addition & 1 deletion examples/with-clerk-appdir/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"@types/react-dom": "19.2.3",
"eslint": "9.25.1",
"eslint-config-next": "15.5.8",
"typescript": "5.8.3"
"typescript": "5.9.3"
},
"ct3aMetadata": {
"initVersion": "7.20.0"
Expand Down
2 changes: 1 addition & 1 deletion examples/with-clerk-pagesdir/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"@types/react-dom": "19.2.3",
"eslint": "9.25.1",
"eslint-config-next": "15.5.8",
"typescript": "5.8.3"
"typescript": "5.9.3"
},
"ct3aMetadata": {
"initVersion": "7.20.0"
Expand Down
8 changes: 4 additions & 4 deletions examples/with-clerk-react-router/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@
"@react-router/dev": "^7.0.0",
"@types/react": "19.2.7",
"@types/react-dom": "19.2.3",
"postcss": "8.4.49",
"tailwindcss": "^3.4.16",
"typescript": "5.8.3",
"vite": "^6.3.4",
"postcss": "8.5.6",
"tailwindcss": "^4.1.18",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# Find the example directory structure
find examples/with-clerk-react-router -type f -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" -o -name "*.json" | grep -E "\.(tsx?|jsx?|json)$" | head -20

Repository: pingdotgg/uploadthing

Length of output: 729


🏁 Script executed:

# Check if Tailwind config exists
find examples/with-clerk-react-router -name "tailwind.config.*" -o -name "postcss.config.*"

Repository: pingdotgg/uploadthing

Length of output: 167


🏁 Script executed:

# Look at the main example files
ls -la examples/with-clerk-react-router/src/ 2>/dev/null || echo "src directory not found"

Repository: pingdotgg/uploadthing

Length of output: 88


🏁 Script executed:

# Search for Tailwind CSS usage patterns (old v3 vs new v4 syntax)
rg -i "tailwind|@apply|@layer" examples/with-clerk-react-router --type tsx --type ts --type jsx --type js --type css -A 2

Repository: pingdotgg/uploadthing

Length of output: 92


🏁 Script executed:

# Check the package.json to understand dependencies
cat examples/with-clerk-react-router/package.json

Repository: pingdotgg/uploadthing

Length of output: 1012


🏁 Script executed:

cat examples/with-clerk-react-router/tailwind.config.ts

Repository: pingdotgg/uploadthing

Length of output: 248


🏁 Script executed:

cat examples/with-clerk-react-router/postcss.config.js

Repository: pingdotgg/uploadthing

Length of output: 123


🏁 Script executed:

cat -n examples/with-clerk-react-router/app/root.tsx

Repository: pingdotgg/uploadthing

Length of output: 1355


🏁 Script executed:

cat -n examples/with-clerk-react-router/app/routes/_index.tsx

Repository: pingdotgg/uploadthing

Length of output: 1677


🏁 Script executed:

# Search for CSS files that might contain Tailwind directives
find examples/with-clerk-react-router -name "*.css" -o -name "*.scss"

Repository: pingdotgg/uploadthing

Length of output: 114


🏁 Script executed:

cat examples/with-clerk-react-router/app/tailwind.css

Repository: pingdotgg/uploadthing

Length of output: 586


🌐 Web query:

Tailwind CSS v4 breaking changes migration guide

💡 Result:

Below is a concise migration checklist for upgrading projects from Tailwind CSS v3 → v4, with the most important breaking changes and the minimal steps to fix them.

Quick upgrade steps

  • Run the official upgrade tool in a new Git branch: npx @tailwindcss/upgrade (review diffs & test). (v3.tailwindcss.com)
  • Ensure Node.js ≥ 20 (upgrade tool requirement). (twcss.cn)
  • Update build packages: switch PostCSS plugin to @tailwindcss/postcss, Tailwind CLI to @tailwindcss/cli, and (if using Vite) use @tailwindcss/vite plugin. Adjust build scripts accordingly. (twcss.cn)

Major breaking changes you need to know (and how to fix)

  • Configuration: tailwind.config.js → CSS-first configuration using CSS variables; many theme values are exposed as CSS vars. Prefer var(--color-...) over theme() where possible. For rare cases keep theme() but use the CSS variable names. (tailwindcss.com)
  • Importing: The old @tailwind base/components/utilities directives are removed — import Tailwind via a normal CSS @import (upgrade tool will help). (tailwindcss.com)
  • Package split: tailwindcss PostCSS plugin moved to @tailwindcss/postcss; Tailwind CLI moved to @tailwindcss/cli; update dependencies and build setups. (twcss.cn)
  • Browser support: v4 targets modern browsers (e.g., Safari 16.4+, Chrome 111+, Firefox 128+); if you must support older browsers, stay on v3.4 or use compatibility strategies. (tailwindcss.com)
  • Removed/renamed utilities:
    • outline-none renamed to outline-hidden; outline-none now sets outline-style:none — search & replace usages. (tailwindcss.com)
    • Default ring size changed from 3px → 1px; replace plain ring with ring-3 if you relied on old size. (tailwindcss.com)
  • Space utilities: space-x/y selector changed (performance fix). If you used them with inline children or custom margins, consider switching to gap (flex/grid) or adjust markup. (tailwindcss.com)
  • Transitions: transition-[...transform] no longer works for transformed utilities; use explicit properties like transition-[opacity,scale] when transitioning scale. (tailwindcss.com)
  • corePlugins: Disabling core plugins via corePlugins option is no longer supported — remove or replace any logic depending on this. (tailwindcss.com)

Other notes and recommendations

  • Use the upgrade tool to automate the bulk of changes, then manually review for app-specific edge cases (complex configs, plugins, or dynamic class generation). (v3.tailwindcss.com)
  • Update any third‑party libraries (Nativewind, plugins, component libs) that reference v3 classnames or internals. (nativewind.dev)
  • Test visually across pages (esp. forms, focus outlines, ring sizes, spacing, and transition effects).

Primary sources

  • Tailwind upgrade guide / v4 docs (breaking changes + migration tool). (tailwindcss.com)
  • Manual migration notes (PostCSS/Vite/CLI changes). (twcss.cn)

If you want, I can:

  • run npx @tailwindcss/upgrade for you in a sample repo (show the expected diff), or
  • scan your project files (tailwind.config.js and a few sample templates) and produce an itemized list of replacements to make. Which would you like?

Citations:


🏁 Script executed:

# Check the with-clerk-remix example for comparison
cat examples/with-clerk-remix/app/tailwind.css

Repository: pingdotgg/uploadthing

Length of output: 586


🏁 Script executed:

# Verify if this is a widespread pattern
find examples -name "tailwind.css" -exec echo "=== {} ===" \; -exec head -5 {} \;

Repository: pingdotgg/uploadthing

Length of output: 309


Update Tailwind CSS v4 syntax in source files.

The example uses Tailwind CSS v4.1.18 but the CSS file still contains the v3 @tailwind directives which are removed in v4. Replace @tailwind base; @tailwind components; @tailwind utilities; with @import "tailwindcss"; in app/tailwind.css. Additionally, update postcss.config.js to use the v4 PostCSS plugin: change the tailwindcss plugin to @tailwindcss/postcss.

🤖 Prompt for AI Agents
In examples/with-clerk-react-router/package.json around line 29 and related
project files, the project depends on Tailwind CSS v4 but source files still use
v3 syntax; update app/tailwind.css to replace the removed v3 @tailwind
directives with the v4 import syntax by replacing the three directives with
@import "tailwindcss"; and update postcss.config.js to use the v4 PostCSS plugin
by replacing the current "tailwindcss" plugin entry with "@tailwindcss/postcss"
(ensure package.json dependency remains ^4.1.18 and run install to pick up the
v4 PostCSS plugin if missing).

"typescript": "5.9.3",
"vite": "^7.2.7",
"vite-tsconfig-paths": "^5.1.4"
},
"engines": {
Expand Down
8 changes: 4 additions & 4 deletions examples/with-clerk-remix/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@
"@remix-run/dev": "^2.12.0",
"@types/react": "19.2.7",
"@types/react-dom": "19.2.3",
"postcss": "8.4.49",
"tailwindcss": "^3.4.16",
"typescript": "5.8.3",
"vite": "^6.3.4",
"postcss": "8.5.6",
"tailwindcss": "^4.1.18",
"typescript": "5.9.3",
"vite": "^7.2.7",
"vite-tsconfig-paths": "^5.1.4"
},
"engines": {
Expand Down
2 changes: 1 addition & 1 deletion examples/with-drizzle-appdir/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"@types/react-dom": "19.2.3",
"eslint": "9.25.1",
"eslint-config-next": "15.5.8",
"typescript": "5.8.3"
"typescript": "5.9.3"
},
"ct3aMetadata": {
"initVersion": "7.20.0"
Expand Down
2 changes: 1 addition & 1 deletion examples/with-drizzle-pagesdir/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"@types/react-dom": "19.2.3",
"eslint": "9.25.1",
"eslint-config-next": "15.5.8",
"typescript": "5.8.3"
"typescript": "5.9.3"
},
"ct3aMetadata": {
"initVersion": "7.20.0"
Expand Down
2 changes: 0 additions & 2 deletions examples/with-novel/.env.example

This file was deleted.

40 changes: 0 additions & 40 deletions examples/with-novel/CHANGELOG.md

This file was deleted.

27 changes: 0 additions & 27 deletions examples/with-novel/README.md

This file was deleted.

Binary file removed examples/with-novel/app/_styles/CalSans-SemiBold.otf
Binary file not shown.
Loading
Loading