diff --git a/.changeset/many-cloths-sort.md b/.changeset/many-cloths-sort.md
new file mode 100644
index 00000000..63ce0a68
--- /dev/null
+++ b/.changeset/many-cloths-sort.md
@@ -0,0 +1,5 @@
+---
+"@r4ai/remark-callout": patch
+---
+
+update Astro Tailwind CSS setup to @tailwindcss/vite
diff --git a/packages/remark-callout/README.md b/packages/remark-callout/README.md
index 8e2f0f64..04b1f8a0 100644
--- a/packages/remark-callout/README.md
+++ b/packages/remark-callout/README.md
@@ -128,25 +128,22 @@ yields:
 
    <https://github.com/r4ai/remark-callout/blob/40d857e9885d335ca0c688d6eb2755e54dd2567b/packages/website/src/pages/playground/_callout.css#L1-L384>
 
-   To use the above CSS, you need to configure Astro's TailwindCSS integration to support nested syntax:
+   The above CSS uses nested syntax. If you are using Tailwind CSS v4 with the [`@tailwindcss/vite`](https://tailwindcss.com/docs/installation/framework-guides/astro) plugin (recommended for Astro ≥ 5.2), CSS nesting is supported natively and no extra configuration is needed:
 
    ```ts
    // astro.config.ts
-   import { defineConfig } from 'astro/config';
-   import tailwind from '@astrojs/tailwind';
+   import { defineConfig } from "astro/config";
+   import tailwindcss from "@tailwindcss/vite";
 
    export default defineConfig({
-     integrations: [
-       tailwind({
-         // Example: Allow writing nested CSS declarations
-         // alongside Tailwind's syntax
-         nesting: true,
-       }),
-     ],
+     vite: {
+       plugins: [tailwindcss()],
+     },
    });
    ```
 
-   cf. <https://docs.astro.build/en/guides/integrations-guide/tailwind/#nesting>
+   > [!NOTE]
+   > The legacy `@astrojs/tailwind` integration is deprecated. See the [Tailwind CSS Astro guide](https://tailwindcss.com/docs/installation/framework-guides/astro) for the current setup instructions.
 
    Or if you are using MDX, you can use custom components to style the callouts: