Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message. |
WalkthroughA new VSCode settings file configures Tailwind CSS editor enhancements with improved autocompletion and language mapping. The global CSS file is refactored to replace CSS selector-based utilities with a Tailwind @utility-based system while preserving existing color, typography, and layout utilities. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes The changes require understanding of Tailwind's @Utility system syntax and verifying that class name consumption remains consistent across the codebase, but modifications are localized and follow clear structural patterns. Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
|
🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
.vscode/settings.json (1)
6-14: Minor: fix Korean typo in comment“동장할” → “동작할”.
- // Tailwind 자동완성 동장할 매핑 + // Tailwind 자동완성이 동작할 매핑src/styles/globals.css (3)
1-2: Remove duplicate preflight import@import 'tailwindcss' already includes preflight in v4; importing 'tailwindcss/preflight' again may duplicate resets.
-@import 'tailwindcss'; -@import 'tailwindcss/preflight'; +@import 'tailwindcss';
114-169: Using !important widely achieves priority but reduces flexibilityThis guarantees custom colors win over core, but it weakens variant/specificity control and makes overrides harder. Prefer ordering/cascade where possible; keep !important to only conflicting tokens (e.g., gray, pink).
Would you consider limiting !important to only classes that shadow Tailwind core tokens?
195-199: Letter-spacing values look unusually large; confirm intentE.g., text-headline-sm-serif uses letter-spacing: 1.2rem at 2rem size (very wide tracking). If not intentional, consider 0.12rem or em-based values.
| "tailwindCSS.experimental.classRegex": [ | ||
| // @utility 뒤에 오는 클래스 이름을 자동완성에 포함 | ||
| ["@utility\\s+([a-zA-Z0-9-_]+)", "([a-zA-Z0-9-_]+)"] | ||
| ], |
There was a problem hiding this comment.
classRegex tuple is mis-specified; use a single-regex capture for @Utility names
The second regex will over-match tokens like “utility”, “bg”, “pink”, “100”. Use a single pattern that captures the class name after @Utility.
Apply:
- "tailwindCSS.experimental.classRegex": [
- ["@utility\\s+([a-zA-Z0-9-_]+)", "([a-zA-Z0-9-_]+)"]
- ],
+ "tailwindCSS.experimental.classRegex": [
+ "@utility\\s+([a-zA-Z0-9-_]+)"
+ ],📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "tailwindCSS.experimental.classRegex": [ | |
| // @utility 뒤에 오는 클래스 이름을 자동완성에 포함 | |
| ["@utility\\s+([a-zA-Z0-9-_]+)", "([a-zA-Z0-9-_]+)"] | |
| ], | |
| // @utility 뒤에 오는 클래스 이름을 자동완성에 포함 | |
| "tailwindCSS.experimental.classRegex": [ | |
| "@utility\\s+([a-zA-Z0-9-_]+)" | |
| ], |
🤖 Prompt for AI Agents
In .vscode/settings.json around lines 2 to 5, the
tailwindCSS.experimental.classRegex entry currently uses a two-regex tuple which
over-matches; replace it with a single regex capture that only captures the
class name that follows "@utility" (remove the second regex element), and ensure
the capture group allows valid Tailwind class characters (letters, numbers,
hyphen, underscore and common separators like ":" and "/") so only the intended
class token is returned for autocompletion.
| @utility text-headline-md { font-size:2.8rem; font-weight:200; line-height:3.2rem; font-family: var(--font-sans); } | ||
| @utility text-headline-sm { font-size:2.4rem; font-weight:200; line-height:3.2rem; font-family: var(--font-sans); } | ||
|
|
||
| @utility text-title-lg { font-size:2.2rem; font-weight:400; line-height:1.75rem; font-family: var(--font-sans); } |
There was a problem hiding this comment.
text-title-lg line-height is smaller than font-size (clipping risk)
2.2rem font-size with 1.75rem line-height can crop glyphs and harm readability.
-@utility text-title-lg { font-size:2.2rem; font-weight:400; line-height:1.75rem; font-family: var(--font-sans); }
+@utility text-title-lg { font-size:2.2rem; font-weight:400; line-height:2.8rem; font-family: var(--font-sans); }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @utility text-title-lg { font-size:2.2rem; font-weight:400; line-height:1.75rem; font-family: var(--font-sans); } | |
| @utility text-title-lg { font-size:2.2rem; font-weight:400; line-height:2.8rem; font-family: var(--font-sans); } |
🤖 Prompt for AI Agents
In src/styles/globals.css around line 186 the utility definition sets font-size:
2.2rem with line-height: 1.75rem which is smaller than the font size and risks
clipping; update the rule to use a line-height at or above the font-size (e.g.,
a unitless multiplier like 1.15–1.25 or an explicit rem value ≥ 2.2rem) so
glyphs aren’t clipped and readability is preserved, and ensure the font-family
and weight remain unchanged.
2 participants
🔥 작업 내용
🔗 이슈
PR Point (To Reviewer)
컬러 & 텍스트 자동완성
단순히 커스텀 유틸리티로 구분하면 Tailwind v4에서 config 파일을 사용하지 않기 때문에, Vscode IntelliSense가 인식을 못하는 문제가 있다 합니다.
원활한 작업을 위해...토큰 자동완성 되도록 설정해놨습니다.
컬러 우선순위 - 커스텀 컬러로 변경
Tailwind 내 기본 pink, gray가 색상이 겹쳐 커스텀 색상이 우선순위에서 밀리는 문제가 있어
!important를 유틸리티에 추가해 우선순위가 되도록 했습니다.🤔문제는 아니지만 해결하지 못한 부분
작업하는데 거슬리면 해결해보겠습니다.
보시면
!important를 적어둔 것이 적용된 걸 확인할 수 있습니다. (밑에 기본 Tailwind는 덮어씌어짐)📸 피그마 스크린샷 or 기능 GIF
자동완성 뜹니다
Summary by CodeRabbit