Chore: Tailwind Migration — Markdown and Codeblocks Components

[sachasayan]

Tailwind migration — Markdown and Codeblocks Components

This PR covers the Tailwind Migration to the Markdown and Codeblocks Components

It makes no functional changes — this is a straight-port from explicit styles to tailwind utility classes.

Type of Change

• ♻️ Refactor: Code change that neither fixes a bug nor adds a feature.

Pre-Submission Checklist

• Self-Review: I have performed a thorough self-review of my code.
• Code Quality:
  • My code adheres to the project's style guidelines.
  • There are no new linting errors or warnings (npm run lint).
  • All debug code (e.g., console.log) has been removed.
• Testing:
  • New and/or updated tests have been added to cover my changes.
  • All tests pass locally (npm test).
  • The application builds successfully with my changes.
• Branch Hygiene: My branch is up-to-date (rebased) with the main branch.
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Changeset: A changeset has been created using npm run changeset if this PR includes user-facing changes or dependency updates.
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

No visual impacts, these components look and act identical with the changes applied.

Documentation Updates

Does this PR necessitate updates to user-facing documentation?

• No documentation updates are required.

---

Important

Refactor to migrate Markdown and Codeblocks components to Tailwind CSS, updating styles in Blockquote.tsx, CodeBlock.tsx, and index.css.

• Refactor:
  • Migrate styles to Tailwind CSS utility classes in Blockquote.tsx and CodeBlock.tsx.
  • Replace inline styles with Tailwind classes for icons in CodeBlock.tsx.
• CSS Changes:
  • Add custom CSS variables for VSCode theme compatibility in index.css.
  • Define fallback colors for Highlight.js themes in index.css.
  • Add fadeIn animation keyframes in index.css.

^{This description was created by for ef265c9. You can customize this summary. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: ef265c9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[daniel-lxs]

Hey @sachasayan, this looks good, can you solve the merge conflicts so we can merge it?

[daniel-lxs]

Was the !important necessary to override Shiki's default styles, or could a less specific selector achieve the same result? Just checking for best practices.

[daniel-lxs]

I see a similar inline @keyframes fadeIn is already defined and used in webview-ui/src/components/chat/Markdown.tsx. Is the intention for this global animation to replace the inline one, or is it for other components? If it's to replace the inline one, it would be good to update webview-ui/src/components/chat/Markdown.tsx to use the global animation in this PR or a follow-up. If it's for other components not touched in this PR, it could be introduced separately.

[daniel-lxs]

I'll be closing this as stale as the rest of the tailwind migration PRs, if necessary they can be reopened and updated.