react-md-editor Using taliwind css to change the default font?

Hello， I know I can use the class name to change the editor style

.w-md-editor-text-pre > code,
.w-md-editor-text-input {
  font-size: 23px !important;
  line-height: 24px !important;
}

I want to use taliwind css to change the default editor font style, However, the added font-family seems like does not work (replace by the default font-family)

.my-taliwind-css-family {
    font-family: some style
}

replace by

.wmde-markdown {
    -webkit-text-size-adjust: 100%;
    font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    font-size: 16px;
    line-height: 1.5;
    word-wrap: break-word;
    color: var(--color-fg-default);
    background-color: var(--color-canvas-default);
}

Is there any good solution to deal with this?

May 22 '23 15:05 jimkk159

@jimkk159

.w-md-editor-text-input,
.w-md-editor-text-pre > code,
.w-md-editor-text-pre 
{
  font-family: Arial,sans-serif !important;
}

May 22 '23 16:05 jaywcjlove

Upgrade v3.23.0

.w-md-editor {
  --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

May 22 '23 17:05 jaywcjlove

My idea is that I can just simply add some taliwind css class (here is font-family ) to the <MDEditor.Markdown className="My taliwind css class here" />

Does it make sense?

May 22 '23 18:05 jimkk159

Not a tailwind solution, but In nextjs you can assign the font to a variable and then reference it in css

app/layout.tsx

import { Roboto_Mono } from 'next/font/google';

const robotoMono = Roboto_Mono({
  weight: ['400', '500', '700'],
  subsets: ['latin'],
  variable: '--roboto-mono-font'
});

const RootLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
  return (
    <html lang="en">
      <body
        className={robotoMono.variable}
      >
        {children}
      </body>
   </html>
  );
}

export default RootLayout;

components/markdown/style.css

.w-md-editor {
  --md-editor-font-family: var(--roboto-mono-font)
}

components/markdown/MarkdownEditor.tsx

'use client';

import MDEditor, { MDEditorProps } from '@uiw/react-md-editor';
import rehypeSanitize from 'rehype-sanitize';

import 'components/markdown/style.css';

export const MarkdownEditor: React.FC<MDEditorProps> = props => {
  return (
    <div data-color-mode="light">
      <MDEditor
        {...props}
        previewOptions={{
          rehypePlugins: [[rehypeSanitize]]
        }}
      />
    </div>
  );
};

Oct 27 '23 17:10 li4man0v

@jimkk159 you can do smthn like this in your globals.css if you wanna style w tw classes:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* to overrride the default font size for the md editor */
body .w-md-editor-text-pre > code,
body .w-md-editor-text-input {
  @apply !text-base;
}

Was facing issues without adding body to the styles but you can try without it

Dec 01 '23 20:12 psycho-baller

react-md-editor react-md-editor copied to clipboard

Using taliwind css to change the default font?

react-md-editor
react-md-editor copied to clipboard