Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Docs: Mistake in the Next.js Learn Tutorial: CSS Styling page [2 comments, 3 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#86129•Fetched 2026-04-08 02:12:27
View on GitHub
Comments
2
Participants
3
Timeline
6
Reactions
0
Author
behanprwbehanprw
Participants
behanprwbehanprwgithub-actions[bot]github-actions[bot]webdevpraveenwebdevpraveen
Timeline (top)
commented ×2closed ×1issue_type_added ×1labeled ×1

Code Example

<div
  className="relative w-0 h-0 border-l-15 border-r-15 border-b-26 border-l-transparent border-r-transparent border-b-black"
/>

---

<div className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black">
</div>
RAW_BUFFERClick to expand / collapse

What is the documentation issue?

this code is not correct:

<div
  className="relative w-0 h-0 border-l-15 border-r-15 border-b-26 border-l-transparent border-r-transparent border-b-black"
/>

Is there any context that might help us understand?

This code is correct:

<div className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black">
</div>

Does the docs page already exist? Please link to it.

https://nextjs.org/learn/dashboard-app/css-styling

extent analysis

TL;DR

  • The issue can be resolved by using bracket notation for pixel values in the CSS class names.

Guidance

  • The problem lies in the syntax used for specifying border widths in the className attribute.
  • Using bracket notation, such as border-l-[15px], is the correct way to specify pixel values in CSS class names.
  • Verify that the CSS classes are correctly defined in the stylesheet to match the class names used in the className attribute.
  • Check the documentation at https://nextjs.org/learn/dashboard-app/css-styling for more information on CSS styling in Next.js.

Example

<div className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black">
</div>

Notes

  • This solution assumes that the issue is specific to the syntax used in the className attribute and that the CSS classes are correctly defined.

Recommendation

  • Apply workaround: Use bracket notation for pixel values in CSS class names, as shown in the example, to resolve the issue.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#GPU setup#container setup#orchestration issue#cache issue#memory leak

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING