react-syntax-highlighter is not working with TailwindCSS

Question

I am displaying sanity block content using [@sanity/block-content-to-react](@sanity/block-content-to-react). The BlockContent component is wrapper by div with class of "prose".

 <div className="prose prose-zinc font-display prose-h1:font-normal prose-code:mx-1 prose-code:before:content-none prose-code:after:content-none dark:prose-invert ">
     <BlockContent
         // Pass in block content straight from Sanity.io
          blocks={singleBlog.body}
          serializers={serializers}
      />
 </div>

In my serializers, I am passing custom <Code/> component.

  const serializers = {
    types: {
      code: (props) => <Code props={props} />,
    },
  };

In my custom code component, I am using Syntax Highlighter to wrap by code content.

      <SyntaxHighlighter style={theme} language={props.node.language}>
        {props.node.code}
      </SyntaxHighlighter>

But, no matter which theme I choose, it only changes the background colors and font sizes but has no effect in text colors.

I thought 'prose' class on wrapper div was causing the problem. But remove that didn't work either.

          {/* <div className="prose prose-zinc font-display prose-h1:font-normal prose-code:mx-1 prose-code:before:content-none prose-code:after:content-none   dark:prose-invert "> */}
          <BlockContent
            // Pass in block content straight from Sanity.io
            blocks={singleBlog.body}
            serializers={serializers}
          />
          {/* </div> */}

Does anyone have any solution ?

Answer 1

I am not sure if you are using a custom theme or if you are using one of the many option. But if you are using the available one that you can find here: https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html

Then it may be a problem with your imports.

If I import the theme like that (using the hljs ): import {dark} from "react-syntax-highlighter/dist/esm/styles/hljs"; I only get background color.

If I import the theme like this using the 'prism' option I get the text color too: import {dark} from "react-syntax-highlighter/dist/esm/styles/prism";