[Bug]: Tailwind Markup Editor HTML Preview/Text Rendering Issue in Submit UI Playground

[Siddesh-G-H]

Bug Description

Description

When I clicked the "Submit UI / Playground" button and opened the Live Contributor PR Playground, I noticed that the HTML content displayed inside the Tailwind Markup Editor is not rendering properly.

The markup text appears extremely dark/faded and is difficult to read against the editor background. Additionally, some parts of the HTML seem visually inconsistent, making the editor difficult to use for creating or reviewing UI submissions.

Expected Behavior

• HTML markup should be clearly visible and readable.
• Proper syntax highlighting should be applied (if supported).
• Text color should have sufficient contrast against the editor background.
• The editor should provide a comfortable editing experience.

Actual Behavior

• HTML markup appears very dark/faded.
• Text visibility is poor due to low contrast.
• Some elements of the markup are difficult to distinguish.
• The editor experience feels visually broken or unfinished.

Screenshot

Possible Cause

The editor text color may be inheriting a dark theme color that blends into the editor background, or syntax highlighting styles may not be loading correctly.

Following Fix

• Increase text contrast within the Tailwind Markup Editor.
• Ensure syntax highlighting styles are properly applied.
• Verify editor theme colors for dark mode compatibility.
• Consider using a dedicated code editor theme (e.g., Monaco/CodeMirror dark theme) with accessible color contrast.

GSSoC'26 Contribution Interest

@singhtrivendra I would like to work on this issue as part of GSSoC'26.

Proposed Approach

• Investigate the styling applied to the Tailwind Markup Editor.
• Identify why the editor text is appearing faded or difficult to read.
• Fix the text contrast and ensure proper visibility in dark mode.
• Verify that syntax highlighting is loading and functioning correctly.
• Test the changes across different browsers and screen sizes.
• Submit a PR with the fix and relevant screenshots demonstrating the improvement.

Please assign this issue to me under GSSoC'26 if it is available for contribution.

Steps to Reproduce

Steps to Reproduce

1. Navigate to the project website.
2. Click on "Submit UI" or "Playground".
3. Open the Live Contributor PR Playground.
4. Observe the content inside the Tailwind Markup Editor.

[Mohataseem89]

Hi @singhtrivendra

Just following up on this PR (#1354)whenever you have time i wouldd appreciate a review. please let me know if any changes are needed