UI: Make Tailwind CSS Plugin ESM-only

.changeset/plenty-crews-exist.md

@@ -0,0 +1,9 @@
+---
+'fumadocs-ui': major
+---
+
+**Make Tailwind CSS Plugin ESM-only**
+
+**why:** Tailwind CSS supported ESM and TypeScript configs.
+
+**migrate:** Use ESM syntax in your Tailwind CSS config.

packages/ui/package.json

@@ -17,7 +17,6 @@
     "./image-zoom.css": "./dist/image-zoom.css",
     "./tailwind-plugin": {
       "import": "./dist/tailwind-plugin.js",
-      "require": "./dist/tailwind-plugin.cjs",
       "types": "./dist/tailwind-plugin.d.ts"
     },
     "./components/*": {

packages/ui/src/layout.tsx

@@ -10,8 +10,6 @@ import { replaceOrDefault } from './utils/shared';
 import type { LinkItemType } from './components/layout/link-item';
 import { type BaseLayoutProps, getLinks } from './layout.shared';
 
-declare const { Nav }: typeof import('./home-layout.client');
-
 declare const {
   TreeContextProvider,
   SubNav,
@@ -33,14 +31,7 @@ const DynamicSidebar = dynamic(() =>
   ),
 );
 
-export type {
-  LinkItemType,
-  // TODO: Remove this (next major)
-  /**
-   * @deprecated Import `HomeLayoutProps` from `fumadocs-ui/home-layout` instead
-   */
-  BaseLayoutProps,
-};
+export type { LinkItemType };
 
 interface SidebarOptions extends Omit<SidebarProps, 'items'> {
   enabled: boolean;
@@ -63,31 +54,6 @@ export interface DocsLayoutProps extends BaseLayoutProps {
   i18n?: boolean;
 }
 
-// TODO: Remove this (next major)
-/**
- * @deprecated Use `HomeLayout` from `fumadocs-ui/home-layout` instead
- */
-export function Layout({
-  nav = {},
-  links = [],
-  githubUrl,
-  children,
-}: BaseLayoutProps): React.ReactElement {
-  const finalLinks = getLinks(links, githubUrl);
-
-  return (
-    <>
-      {replaceOrDefault(
-        nav,
-        <Nav items={finalLinks} {...nav}>
-          {nav.children}
-        </Nav>,
-      )}
-      {children}
-    </>
-  );
-}
-
 export function DocsLayout({
   nav,
   githubUrl,

packages/ui/tsup.config.ts

@@ -61,30 +61,20 @@ async function injectImport(src: string): Promise<void> {
   await fs.writeFile(srcOut, outContent);
 }
 
-export default defineConfig([
-  {
-    entry: [
-      `./src/components/{${exportedComponents.join(',')}}.tsx`,
-      './src/{i18n,home-layout,layout,page,provider,mdx,tailwind-plugin}.{ts,tsx}',
-      './src/twoslash/popup.tsx',
-      './src/*.client.tsx',
-    ],
-    external: ['server-only', '../../dist/image-zoom.css', 'tailwindcss'],
-    async onSuccess() {
-      const replaceImports = injectImports.map((src) => injectImport(src));
+export default defineConfig({
+  entry: [
+    `./src/components/{${exportedComponents.join(',')}}.tsx`,
+    './src/{i18n,home-layout,layout,page,provider,mdx,tailwind-plugin}.{ts,tsx}',
+    './src/twoslash/popup.tsx',
+    './src/*.client.tsx',
+  ],
+  external: ['server-only', '../../dist/image-zoom.css', 'tailwindcss'],
+  async onSuccess() {
+    const replaceImports = injectImports.map((src) => injectImport(src));
 
-      await Promise.all(replaceImports);
-    },
-    format: 'esm',
-    dts: true,
-    target: 'esnext',
+    await Promise.all(replaceImports);
   },
-  {
-    // todo: Remove support for CommonJS in next major
-    entry: ['./src/tailwind-plugin.ts'],
-    format: 'cjs',
-    external: ['tailwindcss'],
-    dts: false,
-    target: 'node18',
-  },
-]);
+  format: 'esm',
+  dts: true,
+  target: 'esnext',
+});