diff --git a/docs/content/docs/getting-started/shadcn.mdx b/docs/content/docs/getting-started/shadcn.mdx index 1c9062d243..07039e67ef 100644 --- a/docs/content/docs/getting-started/shadcn.mdx +++ b/docs/content/docs/getting-started/shadcn.mdx @@ -25,20 +25,31 @@ To use BlockNote with ShadCN, you can import `BlockNoteView` from `@blocknote/sh To ensure Tailwind generates the necessary CSS for all utility classes used by BlockNote components, make sure to add the `@source` directive to your stylesheet that imports Tailwind: ```css -@import tailwindcss; +@import "tailwindcss"; ... /* Path to your installed `@blocknote/shadcn` package. */ @source "../node_modules/@blocknote/shadcn"; ``` +{/* TODO: Figure out why `@source` directive isn't working in StackBlitz sandbox. */} +{/* https://stackblitz.com/edit/github-xdutga97?file=src%2FApp.tsx */} + + + Because the ShadCN version of BlockNote requires being in a Tailwind app, + viewing the demo below on StackBlitz will have missing styles. + + ## Usage with Tailwind Only -If your app doesn't use ShadCN components and only uses TailwindCSS, you just need to extend your Tailwind theme with ShadCN utility classes to get ecerything working. You can do this by simply copying the styles below into your stylesheet that imports Tailwind. +If your app doesn't use ShadCN components and only uses TailwindCSS, you just need to extend your Tailwind theme with ShadCN utility classes to get everything working. You can do this by simply copying the styles below into your stylesheet that imports Tailwind. ```css -@import tailwindcss; +@import "tailwindcss"; +... +/* Path to your installed `@blocknote/shadcn` package. */ +@source "../node_modules/@blocknote/shadcn"; ... @custom-variant dark (&:is(.dark *)); diff --git a/examples/01-basic/09-shadcn/README.md b/examples/01-basic/09-shadcn/README.md index e3030d4929..9955d6d54a 100644 --- a/examples/01-basic/09-shadcn/README.md +++ b/examples/01-basic/09-shadcn/README.md @@ -2,6 +2,11 @@ This example shows how you can use BlockNote with ShadCN (instead of Mantine). + +Because the ShadCN version of BlockNote requires being in a Tailwind app, +viewing the demo below on StackBlitz will have missing styles. + + **Relevant Docs:** - [Getting Started with ShadCN](/docs/getting-started/shadcn) diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx index a481fea1ee..f1198ab754 100644 --- a/playground/src/examples.gen.tsx +++ b/playground/src/examples.gen.tsx @@ -186,7 +186,7 @@ "pathFromRoot": "examples/01-basic", "slug": "basic" }, - "readme": "This example shows how you can use BlockNote with ShadCN (instead of Mantine).\n\n**Relevant Docs:**\n\n- [Getting Started with ShadCN](/docs/getting-started/shadcn)" + "readme": "This example shows how you can use BlockNote with ShadCN (instead of Mantine).\n\n\nBecause the ShadCN version of BlockNote requires being in a Tailwind app,\nviewing the demo below on StackBlitz will have missing styles.\n\n\n**Relevant Docs:**\n\n- [Getting Started with ShadCN](/docs/getting-started/shadcn)" }, { "projectSlug": "localization",