Integrating in a Tailwind CSS 4 / Shadcn UI application.

[0x0f0f0f]

Hi! First, I'm loving this package, it's blazing fast and really solves my needs, compared to other solutions such as Plate or Tiptap.

I'm integrating the editor in an personal note-taking application, where I have many instances of the editor on a page.
I'm using Tailwind 4, React 19 and shadcn canary (radix).

Shadcn is pretty simple, it just creates files for Radix components styled with tailwind styles in components/ui. This is an example of a button component from shadcn.

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0",
  {
    variants: {
      variant: {
        default:
          'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
        destructive:
          'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
        outline:
          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
        secondary:
          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline'
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9'
      }
    },
    defaultVariants: {
      variant: 'default',
      size: 'default'
    }
  }
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

  return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }

The globals.css file in my app just imports tailwind 4 and provides CSS variables for colors for tailwind to pick up,

@import 'tailwindcss';

@plugin 'tailwindcss-animate';

@plugin 'tailwind-scrollbar-hide';

@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(0 0% 3.9%);
  --card: hsl(0 0% 100%);
// ..............

Then, everything is processed by Vite with @tailwindcss/vite plugin.
I was wondering how to correctly style (or rewrite the plugins) for the MDX Editor UI components, such as the link dialog and toolbar using my styled components in @/components/ui/ (shadcn) with Tailwind.

I could have many ways of hacking this around, but I'm not sure which one is the best route to go.

In the component where I use the editor, I import the MDX Editor CSS file and use the editor as follows. Class names of prose max-w-none allowed me to use the typography of @tailwindcss/typography, but I'm not sure how to proceeds for styling components such as toolbar buttons, dialogs, menus, etc.

import {
  headingsPlugin,
  listsPlugin,
  markdownShortcutPlugin,
  MDXEditor,
  quotePlugin,
  thematicBreakPlugin
} from '@mdxeditor/editor'

import '@mdxeditor/editor/style.css'
import Prism from 'prismjs'
window.Prism = Prism

//....

        <MDXEditor
          contentEditableClassName="prose max-w-none"
          markdown=""
          plugins={ALL_PLUGINS}
        />

Any insight would be deeply appreciated

[0x0f0f0f]

I've seen other discussions and https://mdxeditor.dev/editor/docs/theming

I thought that I would have had to reimplement plugins such as KitchenSinkToolbar, is there any other recommended way?

[petyosi]

Yes. The best way to go is to re-implement the plugins using your UI framework of choice, while still accessing the editor state management gurx cells/signals. This is "the way to go" if you want to do serious customization. The toolbar components are decoupled from the actual implementation logic. I would even suggest that you implement your own toolbarPlugin. The code is not that much.

If you take a look at the source code of the current toolbar components, you will see that they are fairly simple. Given that they are also based on top of Radix, my guess is that you will mostly be able to copy/paste and do some mechanical changes for them to work as expected.

The only plugin that's not going to be so easy to deal with is the Table UI, it's a fairly monolithic one. But you did not ask for it, so I guess you won't need it.

[0x0f0f0f]

@petyosi Thank you! One question that I had, is how to access the context of the editor from outside the editor component. Let's say that I would like to have something like this:

<MyNode>
  <Toolbar hidden={!isSelected}> {/* Somehow link it to the editor instance below */}
  Other editor unrelated components
  .......
  <MDXEditor ... />
</MyNode>

Is this possible?

[petyosi]

It is possible for very simple things through a custom plugin that "connects" the editor state to your own state management logic, but quite convoluted if you plan on making a toolbar outside of the mdxeditor component. For many things, you will need access to the Lexical composer context and the editor gurx cells.

[0x0f0f0f]

Thanks! Other editors, (I've tried Plate) to solve this issue, actually export two components, one acting as a provider, giving access to the state to children components, and one acting as the actual container of UI components of the editor. Is this achievable with MDXEditor?

If I understood correctly from https://github.com/mdx-editor/editor/blob/main/src/MDXEditor.tsx - RealmWithPlugins provides access to the gurx state - and there's also a LexicalProvider containing the actual RichTextEditor.

This would work if I just replicate the structure of MDXEditor

    <RealmWithPlugins
      plugins={[
        corePlugin({...}),
        ...(props.plugins ?? [])
      ]}
    >
    <MyNode>
       {/* ............................... */}
       {/* Other components such as toolbar, containers/card/tabs etc go here */}
       
      <EditorRootElement className={props.className}>
        <LexicalProvider>
          <RichTextEditor />
        </LexicalProvider>
      </EditorRootElement>
      
      </MyNode>
      
      <Methods mdxRef={ref} />
    </RealmWithPlugins>

[0x0f0f0f]

This would be a nice way. I'm wondering if I can replace EditorRootElement with something custom to customize the popup containers with tailwind and shadcn :)

It is possible for very simple things through a custom plugin that "connects" the editor state to your own state management logic, but quite convoluted if you plan on making a toolbar outside of the mdxeditor component. For many things, you will need access to the Lexical composer context and the editor gurx cells.

I'll open up another discussion for the external toolbar and keep this thread for Tailwind styling, thanks a lot. The idea is to have a single "global" toolbar in a top panel, and when one of the many editors on the page is selected, the toolbar picks up a ref to the selected editor from my state management.