chore: add twv4 docs

apps/docs/config/routes.json

@@ -43,6 +43,13 @@
           "path": "/docs/guide/forms.mdx",
           "updated": true
         },
+        {
+          "key": "tailwind-v4",
+          "title": "Tailwind v4",
+          "keywords": "migrate, tailwind, v4, heroui",
+          "path": "/docs/guide/tailwind-v4.mdx",
+          "newPost": true
+        },
         {
           "key": "nextui-to-heroui",
           "title": "NextUI to HeroUI",

apps/docs/content/docs/guide/tailwind-v4.mdx

@@ -0,0 +1,93 @@
+---
+title: Tailwind v4
+description: Learn how to migrate your Tailwind v4 project to HeroUI.
+---
+
+# Tailwind v4
+
+TailwindCSS v4 is now available in Beta! This guide will help you migrate your existing TailwindCSS v4 project to HeroUI.
+
+---
+
+<CarbonAd/>
+
+## Migration Steps
+
+1. Follow the [official Tailwind v4 upgrade guide](https://tailwindcss.com/docs/upgrade-guide)
+2. Install the `beta` version of HeroUI
+
+
+
+<PackageManagers
+  commands={{
+    cli: "npx heroui-cli@latest upgrade --all --beta",
+    pnpm: "pnpm install @heroui/react@beta",
+    npm: "npm install @heroui/react@beta",
+    yarn: "yarn install @heroui/react@beta",
+    bun: "bun install @heroui/react@beta"
+  }}
+/>
+
+3. Configure HeroUI with the new Tailwind v4 syntax
+
+### Update CSS Import
+
+```diff-js
+// tailwind.config.js
+- @tailwind base;
+- @tailwind components;
+- @tailwind utilities;
+
++ @import "tailwindcss";
++ @config "../../tailwind.config.js"
+```
+
+### Update PostCSS Configuration
+
+```diff-js
+// postcss.config.js
+- export default {
+-   plugins: {
+-     tailwindcss: {},
+-     autoprefixer: {},
+-   },
+- };
+
++ export default {
++   plugins: {
++     "@tailwindcss/postcss": {},
++   },
++ };
+```
+
+### Update Vite Configuration (Vite Projects Only)
+
+```diff-js
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
++ import tailwindcss from "@tailwindcss/vite"
+
+export default defineConfig({
+-  plugins: [react(), tsconfigPaths()],
++  plugins: [react(), tsconfigPaths(), tailwindcss()],
+})
+```
+
+## Verification
+
+After migration, verify that:
+1. Your styles are being applied correctly
+2. The build process completes without errors
+3. HeroUI components render as expected
+
+<Blockquote color="primary">
+  Make sure to check the Tailwind v4 documentation for any breaking changes that might affect your existing styles.
+</Blockquote>
+
+## Need Help?
+
+If you encounter any issues during migration, please:
+- Join our [Discord community](https://discord.gg/9b6yyZKmH4)
+- [Open an issue](https://github.com/heroui-inc/heroui/issues) on our GitHub repository