Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Using taliwind css to change the default font? #526

Open
jimkk159 opened this issue May 22, 2023 · 5 comments
Open

Using taliwind css to change the default font? #526

jimkk159 opened this issue May 22, 2023 · 5 comments

Comments

@jimkk159
Copy link

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?
@jimkk159 jimkk159 changed the title Using taliwind css to change the font? Using taliwind css to change the default font? May 22, 2023
@jaywcjlove
Copy link
Member

@jimkk159

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

jaywcjlove added a commit that referenced this issue May 22, 2023
@jaywcjlove
style: support css variable modify style. (#526)
6815015
jaywcjlove added a commit that referenced this issue May 22, 2023
@jaywcjlove
released v3.23.0 (#526)
1439686
@jaywcjlove
Copy link
Member

Upgrade v3.23.0

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

github-actions bot added a commit that referenced this issue May 22, 2023
@github-actions
v3.22.0 style: support css variable modify style. (#526) 6815015
4b4ff11
github-actions bot added a commit that referenced this issue May 22, 2023
@github-actions
v3.23.0 released v3.23.0 (#526) 1439686
432a338
@jimkk159
Copy link
Author

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?

@li4man0v
Copy link

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>
  );
};

@psycho-baller
Copy link
Contributor

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jaywcjlove @li4man0v @psycho-baller @jimkk159