Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

tailwindcss/typography integration

Open
  • Is something wrong?
#242 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
react, tailwindcss, typescript
Domain
frontend, web-dev

Research direction

Start by reproducing the provided MarkdownPreview example with Tailwind CSS and inspect how the rendered heading styles are applied and overridden. Compare the result with the manually authored HTML and another markdown editor; done should establish whether CSS-framework styles can be supported and document the resulting integration guidance.

Written by the indexing model from the issue text.

Description

I could not integrate Tailwind CSS with MarkdownPreview.

I am trying to provide a style from TailwindCSS for each heading. It works fine when add the html manually or another markdown editor, but when it is provided via MarkdownPreview, I realised MarkdownPreview style overrides what I am trying to achieve.

Is there any way of handling styles from CSS frameworks?


        <article className="prose prose-h2:text-xl prose-h2:font-medium prose-h2:text-gray-900">
          <MarkdownPreview
            source={`## h2`}
            wrapperElement={{
              "data-color-mode": "light",
              className: "prose prose-h2:text-xl prose-h2:font-medium prose-h2:text-gray-900"
            }}
            rehypeRewrite={(node, index, parent) => {
              if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
                parent.children = parent.children.slice(1)
              }
            }} />
        </article>
Dominant language
TypeScript
Stars
350
Forks
54
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from uiwjs/react-markdown-preview

All issues in uiwjs/react-markdown-preview

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.