Merge pull request #186 from n14little/note-on-css-modules

chore: add note on css modules

Author: arnaugomez

.changeset/fast-guests-brush.md

@@ -0,0 +1,5 @@
+---
+'tiptap-docs': patch
+---
+
+Add a note on styling with css modules

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