Merge branch 'main' of github.com:heroui-inc/heroui into canary

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

@@ -197,7 +197,7 @@ and add  the following code to your main css file:
 @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 *))
+@custom-variant dark (&:is(.dark *));
 ```
 
 ### Setup Provider
@@ -437,7 +437,7 @@ and add  the following code to your main css file:
 @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 *))
+@custom-variant dark (&:is(.dark *));
 ```
 
 ### Setup Provider

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

@@ -170,7 +170,7 @@ and add  the following code to your main css file:
 @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 *))
+@custom-variant dark (&:is(.dark *));
 ```
 
 ### Provider Setup

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

@@ -184,7 +184,7 @@ and add  the following code to your main css file:
 @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 *))
+@custom-variant dark (&:is(.dark *));
 ```
 
 ### Provider Setup

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

@@ -174,11 +174,11 @@ export default heroui();
 and add  the following code to your main css file:
 
 ```css
- @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 *))
+@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 *));
 ```
 
 #### Provider Setup

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

@@ -34,25 +34,27 @@ TailwindCSS v4 is now available since 2.8.0! This guide will help you migrate yo
 
 Since Tailwind v4 favors a CSS-first approach, `tailwind.config.js` will not be required.
 
-Create `hero.ts` file
+Create `hero.ts` file to export `heroui` plugin.
 
 ```tsx
 // hero.ts
 import { heroui } from "@heroui/react";
+// or import from theme package if you are using individual packages.
+// import { heroui } from "@heroui/theme";
 export default heroui();
 ```
 
-Update your main css file
+Update your main css file as below
 
-```diff-js
-// your main css file
+```diff-css
+/* 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
+/* 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 *));
 ```
@@ -61,19 +63,22 @@ Update your main css file
 
 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
+```diff-css
+/* 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
+/* Note: You may need to change the path to fit your project structure */
 + @config "../../tailwind.config.js";
 ```
 
 ### Update PostCSS Configuration
 
+- `tailwindcss` was a PostCSS plugin in v3 and now it is in `@tailwindcss/postcss` package.
+- `autoprefixer` is no longer required as prefixing is handled automatically.
+
 ```diff-js
 // postcss.config.js
 - export default {

apps/docs/tailwind.config.js

@@ -108,7 +108,7 @@ module.exports = {
             },
             "h2 small": {
               fontSize: 'var(--text-lg);',
-              lineHeight: 'var(--text-lg--line-height););',
+              lineHeight: 'var(--text-lg--line-height);',
             },
             "h3 small": {
               fontSize: 'var(--text-base); ',