fix: use callout to show css modules warning

Author: arnaugomez

src/content/editor/getting-started/style-editor/index.mdx

@@ -2,40 +2,43 @@
 title: Styling the Editor
 meta:
   title: Style your editor | Tiptap Editor Docs
-  description: Apply custom styles to your Tiptap editor using plain HTML, custom classes, or Tailwind CSS. Learn more in the docs!
+  description: Apply custom styles to your Tiptap editor using plain HTML, custom classes, or Tailwind CSS. Learn more in the docs.
   category: Editor
 ---
 
+import { ArrowRightIcon } from 'lucide-react'
+import contentTemplatesImage from '@/assets/content-templates.png'
 import { CodeDemo } from '@/components/CodeDemo'
+import * as ImageCard from '@/components/ImageCard'
 import Link from '@/components/Link'
-import { ArrowRightIcon } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
-import * as ImageCard from '@/components/ImageCard'
-import contentTemplatesImage from '@/assets/content-templates.png'
-
+import { Callout } from '@/components/ui/Callout'
 
 Tiptap is headless, which means there is no styling provided. That also means you are in full control of how your editor looks. The following methods allow you to apply custom styles to the editor.
 
 <ImageCard.Card>
-    <ImageCard.Image src={contentTemplatesImage.src} alt="User interface templates for Tiptap" />
-    <ImageCard.Content>
-        <ImageCard.Title>Wanna take a shortcut?</ImageCard.Title>
-        <ImageCard.Paragraph>Speed up your Tiptap integration into your React app with our UI template. It's ready for deployment as-is or can be customized to your needs.</ImageCard.Paragraph>
-        <div className="flex items-center gap-2 mt-8">
-            <Button asChild variant="secondary">
-                <Link href="https://templates.tiptap.dev/">
-                    Try demo
-                    <ArrowRightIcon className="size-4" />
-                </Link>
-            </Button>
-            <Button asChild variant="tertirary">
-                <Link href="https://cloud.tiptap.dev/react-templates">
-                    Get access
-                    <ArrowRightIcon className="size-4" />
-                </Link>
-            </Button>
-        </div>
-    </ImageCard.Content>
+  <ImageCard.Image src={contentTemplatesImage.src} alt="User interface templates for Tiptap" />
+  <ImageCard.Content>
+    <ImageCard.Title>Wanna take a shortcut?</ImageCard.Title>
+    <ImageCard.Paragraph>
+      Speed up your Tiptap integration into your React app with our UI template. It$apos;s ready for
+      deployment as-is or can be customized to your needs.
+    </ImageCard.Paragraph>
+    <div className="flex items-center gap-2 mt-8">
+      <Button asChild variant="secondary">
+        <Link href="https://templates.tiptap.dev/">
+          Try demo
+          <ArrowRightIcon className="size-4" />
+        </Link>
+      </Button>
+      <Button asChild variant="tertirary">
+        <Link href="https://cloud.tiptap.dev/react-templates">
+          Get access
+          <ArrowRightIcon className="size-4" />
+        </Link>
+      </Button>
+    </div>
+  </ImageCard.Content>
 </ImageCard.Card>
 
 ## Style plain HTML
@@ -49,6 +52,12 @@ The entire editor is rendered inside a container with the class `.tiptap`. You c
 }
 ```
 
+<Callout title="Style with CSS modules" variant="warning">
+  In [CSS modules](https://github.com/css-modules/css-modules), class names are modified to enable
+  local scoping, which may prevent styles from applying when targeting the `.tiptap` class. Use
+  global styles or the `:global(.tiptap)` modifier to ensure styles are applied correctly.
+</Callout>
+
 If you're rendering the stored content elsewhere, there won't be a `.tiptap` container, so you can globally add styling to the relevant HTML tags:
 
 ```css
@@ -58,8 +67,6 @@ p {
 }
 ```
 
-**_Note:_** When using CSS modules, class names are modified to enable local scoping, which may prevent styles from applying if targeting the .tiptap class. Use global styles or the :global(.tiptap) modifier in your CSS module to ensure styles are applied correctly.
-
 ## Add custom classes
 
 You can control the whole rendering, including adding classes to everything.