Skip to content

Prism copy button が Tailwind preflight に負けて非表示になる問題 (2630. Memoize II) #323

@coderabbitai

Description

@coderabbitai

概要

PR #322 のコードレビュー中に、public/JavaScript/2630. Memoize II/Claude Code Sonnet 4.6 extended/README_react.html にて、Prism.js の copy button 用 CSS override が !important を使用していないため、Tailwind CSS の preflight によってボタンが非表示になったり崩れたりする可能性があることが指摘されました。

関連リンク

問題の詳細

CLAUDE.md のアーキテクチャガイドラインでは「Prism.js の copy button スタイリングは Tailwind preflight による非表示を防ぐために !important CSS override を使用すること」と規定されています。

現在の .code-toolbar > .toolbar および .code-toolbar > .toolbar .toolbar-item button のスタイルに !important が付与されておらず、Tailwind preflight の button リセットルールにより copy button が意図しない見た目になる可能性があります。

修正方針

以下のプロパティに !important を追加する:

  • .code-toolbar > .toolbaropacity: 0
  • .code-toolbar:hover > .toolbaropacity: 1
  • .toolbar-item button / .copy-to-clipboard-buttondisplay, visibility, opacity, background, color, border, cursor, box-shadow

影響範囲

同ファイル内の対象スタイルブロック(約 Line 55 付近および Line 2183–2187 付近)。

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions