TipTap Rich Text Editor List and Table Styles Broken

[artemchs]

Minimal reproduction: https://github.com/artemchs/next-app-mantine-tailwind-template

Description

When using the Mantine TipTap rich text editor (installed according to the official documentation at https://mantine.dev/x/tiptap/), there are rendering issues with lists and tables when Tailwind and tailwind-preset-mantine are present in the project. These elements render correctly when Mantine is used standalone without Tailwind.

Current Behavior

• List bullets and numbers are not visible
• Table borders are not rendered
• All other rich text editor functionality works as expected

Expected Behavior

• List bullets and numbers should be visible for both unordered and ordered lists
• Table borders should be rendered properly

Steps to Reproduce

1. Install Mantine TipTap following the official documentation
2. Set up a basic rich text editor implementation
3. Create a list (ordered or unordered)
4. Create a table
5. Observe that list markers and table borders are missing

Technical Details

• Environment:
  • "@mantine/core": "^7.13.4"
  • "@mantine/tiptap": "^7.14.1"
  • "react": "^18.3.1"
  • "tailwind-preset-mantine": "^1.2.1"
  • "tailwindcss": "^3.4.14"

Possible Cause

The issue appears to be related to style conflicts between Tailwind's CSS and Mantine's TipTap styles. When Tailwind is removed, the components render correctly, indicating a CSS specificity or override issue.

Additional Notes

This issue specifically affects the visual rendering of elements and does not impact the functional behavior of the editor. The HTML structure is correct, but the styles are not being applied as expected.

[songkeys]

The reason for this is that Mantine Tiptap doesn't come with default styles for lists and tables. As a result, the list bullets and numbers, for instance, follow the browser's default styling.

The tw_base style we imported has removed all of the browser's default styles, allowing for easier customization and a more consistent appearance across different browsers. Because of this, you won't see any styling for these undefined elements.

To address this, I recommend defining these styles yourself in globals.css:

// globals.css

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

// ...

Or try just remove tw_base to see if it's working:

@layer mantine, tw_components, tw_utilities;

/* import tailwind */
@import "tailwindcss/components" layer(tw_components);
@import "tailwindcss/utilities" layer(tw_utilities);

/* import mantine */
@import "@mantine/core/styles.layer.css";
@import "@mantine/tiptap/styles.layer.css"; // note that you should import the layer one

Alternatively, a more practical solution might be to request that Mantine provide these styles so that others could also benefit from this.

[artemchs]

Thanks!