Skip to content

refactor(icon): replace hex gradient with Tailwind classes in app/ico… #310

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rutul2006 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(icon): replace hex gradient with Tailwind classes in app/ico… #310

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 3 additions & 12 deletions app/icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,9 @@ export default function Icon() {
return new ImageResponse(
(
<div
style={{
fontSize: 20,
background: 'linear-gradient(135deg, #ef4444 0%, #be123c 100%)',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
borderRadius: '6px',
fontWeight: 800,
}}
className={
'w-full h-full flex items-center justify-center bg-gradient-to-br from-red-500 to-red-700 text-white rounded-[6px] font-extrabold text-[20px]'
}
Comment on lines +18 to +20
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify that next/og ImageResponse requires inline styles, not className

# Check Next.js documentation for OG image generation
echo "Checking Next.js OG image documentation..."
rg -i "imageresponse|satori" --type md -C 5 -g '**/docs/**' -g '**/*.md'

# Search for any icon.tsx examples in the repo to see the pattern used elsewhere
echo -e "\n\nChecking for other icon/OG image implementations..."
fd -e tsx -e ts -e jsx -e js . -x rg -l "ImageResponse" {} \;

Repository: piyushdotcomm/Editron

Length of output: 1970

🌐 Web query:

Does next/og ImageResponse support Tailwind className or does it require inline style props?

💡 Result:

No—Next.js next/og ImageResponse does not “support Tailwind className” for styling. ImageResponse accepts a React element plus an options object, and it renders the image using a limited HTML/CSS subset (via Satori/Resvg). The official docs show styling via inline style props on JSX elements, not via className/Tailwind utility classes. [1][2] Practically, that means you should use inline style props (e.g., style={{ display: 'flex', ... }}) and/or ensure any needed styling is expressed in supported CSS (the docs note only a subset of CSS/HTML is supported, and advanced layout like CSS grid is not supported). [1][2]

Citations:

Critical: Replace className Tailwind utilities with inline style in next/og ImageResponse (in app/icon.tsx, lines 18–20). next/og renders using a limited HTML/CSS subset and the official examples use inline style on elements; the className/Tailwind string won’t be applied, so the card styling can be lost.

style={{
  width: '100%',
  height: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  background: 'linear-gradient(to bottom right, `#ef4444`, `#b91c1c`)',
  color: 'white',
  borderRadius: '6px',
  fontWeight: 800,
  fontSize: '20px',
}}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/icon.tsx` around lines 18 - 20, The container currently uses a Tailwind
class string in the className property which won't be applied inside next/og's
ImageResponse; replace that className usage on the main container element in
app/icon.tsx with an inline style prop matching the provided CSS (width, height,
display, alignItems, justifyContent, background linear-gradient, color,
borderRadius, fontWeight, fontSize) so the visual card renders correctly in
ImageResponse; update any other occurrences of the same Tailwind class string in
this component to use equivalent inline style objects.

>
E
</div>
Expand Down