React BlocksRenderer does not work with Tailwind styles

[Radicitus]

System Information

• Strapi Version: 4.25.10
• Operating System: Windows/MacOS
• Database: PG
• Node Version: 20.14.0
• NPM Version: 10.7.0
• Yarn Version: N/A

---

When using the BlocksRenderer, overloading the list elements with Tailwind styles to show bullet points/item numbers doesn’t work. Using a list element with the same styles outside of the BlocksRenderer works fine.

However, an odd bug is that when putting a list element with the same styles added to the overloaded list element in Blocks Renderer causes the list loaded from Strapi to “pop” into the correct style. The only fix I have found is to overload the default base list styles in globals.css. I would like to be able to get the styles loaded in the BlocksRenderer to work as intended.

Here is the code I’m using:

BlockRendererClient

import Image from "next/image";

import {
  BlocksRenderer,
  type BlocksContent,
} from "@strapi/blocks-react-renderer";

export default function BlockRendererClient({
  content,
}: {
  readonly content: BlocksContent;
}) {
  if (!content) return null;
  return (
    <BlocksRenderer
      content={content}
      blocks={{
        image: ({ image }) => {
          console.log(image);
          return (
            <Image
              src={image.url}
              width={image.width}
              height={image.height}
              alt={image.alternativeText || ""}
            />
          );
        },
        list: ({ children, format }) => {
          switch (format) {
            case "ordered":
              return <ol className="list-decimal pl-5">{children}</ol>;
            case "unordered":
              return <ul className="list-disc pl-5">{children}</ul>;
          }
        },
      }}
    />
  );
}

Frontend:

<div className="mt-6">
        <h5 className="text-lg">Key Contributions:</h5>
        <BlockRendererClient content={experience.attributes.contributions} />
      </div>

Globals.css workaround:

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

@layer base {
    ul, ol {
        list-style: revert;
        padding-left: 1.5rem;
    }
}

With the workaround:
Bullet points show as normal

Without the workaround but all other code is the same: