chore(docs): update TW v4 doc (#5210)

* chore(docs): update TW v4 doc link

* chore(docs): supplement "Update CSS Import"

apps/docs/content/blog/v2.3.0.mdx

@@ -44,7 +44,7 @@ our new CLI, and several enhancements and bug fixes.
 
 Requirements:
 
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 
 Upgrade today by running one of the following commands:
 

apps/docs/content/docs/frameworks/astro.mdx

@@ -8,7 +8,7 @@ description: How to use HeroUI with Astro
 Requirements:
 
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/astro) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/astro) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ------

apps/docs/content/docs/frameworks/laravel.mdx

@@ -10,7 +10,7 @@ Requirements:
 - [Laravel 11](https://laravel.com/)
 - [PHP v8.2](https://www.php.net/)
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/laravel#vite) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/laravel#vite) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ------

apps/docs/content/docs/frameworks/nextjs.mdx

@@ -10,7 +10,7 @@ Requirements:
 
 - [Next.js 12](https://nextjs.org/) or later
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/nextjs) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/nextjs) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ------

apps/docs/content/docs/frameworks/remix.mdx

@@ -8,7 +8,7 @@ description: How to use HeroUI with Remix
 Requirements:
 
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/remix) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/remix) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ------

apps/docs/content/docs/frameworks/vite.mdx

@@ -9,7 +9,7 @@ Requirements:
 
 - [Vite 2](https://vitejs.dev/) or later
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/vite#react) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/docs/guides/vite#react) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ------

apps/docs/content/docs/guide/installation.mdx

@@ -8,7 +8,7 @@ description: Get started with HeroUI in the official documentation, and learn mo
 Requirements:
 
 - [React 18](https://reactjs.org/) or later
-- [Tailwind CSS 3.4](https://v3.tailwindcss.com/) (For Tailwind CSS v4, please refer to our [beta version](https://beta.heroui.com/docs/guide/tailwind-v4))
+- [Tailwind CSS 3.4](https://v3.tailwindcss.com/) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))
 - [Framer Motion 11.9](https://www.framer.com/motion/) or later
 
 ---

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

@@ -32,13 +32,45 @@ TailwindCSS v4 is now available in Beta! This guide will help you migrate your e
 
 ### Update CSS Import
 
+#### Without `tailwind.config.js`
+
+Since Tailwind v4 favors a CSS-first approach, `tailwind.config.js` will not be required. 
+
+Create `hero.ts` file
+
+```tsx
+// hero.ts
+import { heroui } from "@heroui/react";
+export default heroui();
+```
+
+Update your main css file
+
 ```diff-js
-// tailwind.config.js
+// your main css file
 - @tailwind base;
 - @tailwind components;
 - @tailwind utilities;
 
 + @import "tailwindcss";
++ @plugin './hero.ts';
+// Note: You may need to change the path to fit your project structure
++ @source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
++ @custom-variant dark (&:is(.dark *));
+```
+
+#### With `tailwind.config.js`
+
+In Tailwind v4, `tailwind.config.js` is still supported for backward compatibility. If you still need to use it, you can load it explicity as below.
+
+```diff-js
+// your main css file
+- @tailwind base;
+- @tailwind components;
+- @tailwind utilities;
+
++ @import "tailwindcss";
+// Note: You may need to change the path to fit your project structure
 + @config "../../tailwind.config.js";
 ```