UI: add css prefix by default

fuma-nama · Dec 29, 2024 · f3298ea · f3298ea
1 parent e95be52
commit f3298ea
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 11 deletions.
diff --git a/.changeset/silly-impalas-double.md b/.changeset/silly-impalas-double.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Add css prefix by default
diff --git a/apps/docs/content/docs/ui/theme.mdx b/apps/docs/content/docs/ui/theme.mdx
@@ -44,11 +44,7 @@ To enable RTL, set the `dir` prop to `rtl` in body and root provider (required f
 import { RootProvider } from 'fumadocs-ui/provider';
 import type { ReactNode } from 'react';
 
-export default function RootLayout({
-  children,
-}: {
-  children: ReactNode;
-}): ReactNode {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body dir="rtl">
@@ -63,6 +59,26 @@ export default function RootLayout({
 
 Fumadocs UI provides some CSS variables for customising the layout.
 
+### Prefix
+
+By default, it has a `fd-` prefix to avoid conflicts with Shadcn UI or your own CSS variables.
+
+You can set or remove the prefix in `createPreset`:
+
+```js
+import { createPreset } from 'fumadocs-ui/tailwind-plugin';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [
+    createPreset({
+      // no prefix
+      cssPrefix: '',
+    }),
+  ],
+};
+```
+
 ### Navbar Height
 
 When the default navbar is replaced, the layout may overlap with your new navbar.

diff --git a/packages/create-app/template/+shared/app/(home)/layout.tsx b/packages/create-app/template/+shared/app/(home)/layout.tsx
@@ -2,10 +2,6 @@ import type { ReactNode } from 'react';
 import { HomeLayout } from 'fumadocs-ui/layouts/home';
 import { baseOptions } from '@/app/layout.config';
 
-export default function Layout({
-  children,
-}: {
-  children: ReactNode;
-}): React.ReactElement {
+export default function Layout({ children }: { children: ReactNode }) {
   return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
 }
diff --git a/packages/create-app/template/+tailwindcss/tailwind.config.js b/packages/create-app/template/+tailwindcss/tailwind.config.js
@@ -1,3 +1,4 @@
+// @ts-check
 import { createPreset } from 'fumadocs-ui/tailwind-plugin';
 
 /** @type {import('tailwindcss').Config} */

diff --git a/packages/ui/src/tailwind-plugin.ts b/packages/ui/src/tailwind-plugin.ts
@@ -120,7 +120,7 @@ function createTailwindColors(
 }
 
 export const docsUi = plugin.withOptions<DocsUIOptions>(
-  ({ cssPrefix = '', preset = 'default', layoutWidth = '100vw' } = {}) => {
+  ({ cssPrefix = 'fd', preset = 'default', layoutWidth = '100vw' } = {}) => {
     return ({ addBase, addComponents, addUtilities }) => {
       const { light, dark, css } =
         typeof preset === 'string' ? presets[preset] : preset;