๐fix : Tailwind ์ ์ฉ ์ค๋ฅ ๋ฐ ํ ํฐ ์ฌ์ค์ #24
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedReview was skipped due to path filters โ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the WalkthroughThis PR restructures the Tailwind CSS setup by introducing a PostCSS configuration, removing the Tailwind config file, and migrating utility classes and CSS variables directly into the global stylesheet. It updates the import path in the app entry point accordingly. Changes
Estimated code review effort๐ฏ 3 (Moderate) | โฑ๏ธ ~20 minutes The PR involves heterogeneous changes across multiple file types: configuration additions, significant CSS restructuring with many new utility class definitions, a complete config file deletion, and a minor import path adjustment. While individual utility class additions follow a repetitive pattern, the overall scope spans structural changes to the build pipeline and stylesheet organization. Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touchesโ Failed checks (2 warnings)
โ Passed checks (3 passed)
Comment |
![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 (2)
src/styles/globals.css (1)
82-164: Consider leveraging Tailwind v4's automatic utility generation.Manually defining utility classes for every color variant creates significant maintenance overhead. Tailwind v4 can automatically generate utilities from CSS custom properties defined in
:rootwhen you use the@themedirective instead of manually creating utility classes.Consider this alternative approach that reduces code and maintenance:
-@layer utilities { - /* Mint */ - .bg-mint-50 { background-color: var(--mint-50); } - .bg-mint-100 { background-color: var(--mint-100); } - ... (all manual utility definitions) -} +@theme { + --color-mint-50: #D9FAFB; + --color-mint-100: #B2F4F6; + ... (define colors using Tailwind's theme convention) +}With
@theme, Tailwind v4 will automatically generatebg-mint-50,text-mint-50, etc., without manual class definitions. This approach:
- Eliminates ~80 lines of repetitive code
- Automatically generates all standard Tailwind variants (hover, focus, etc.)
- Reduces maintenance burden when adding/changing colors
Reference: Tailwind CSS v4 theme configuration
src/pages/_app.tsx (1)
1-1: Consider using absolute import path for consistency.The import path was changed from absolute (
@/styles/globals.css) to relative (../styles/globals.css). Next.js projects typically favor absolute imports using the@/alias for better maintainability and consistency, as relative paths become fragile when files are reorganized.Consider reverting to the absolute import:
-import '../styles/globals.css'; +import '@/styles/globals.css';This assumes the
@/alias is configured intsconfig.json(which is standard in Next.js projects).
๐ Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
โ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
๐ Files selected for processing (6)
package.json(1 hunks)postcss.config.js(1 hunks)src/pages/_app.tsx(1 hunks)src/pages/index.tsx(1 hunks)src/styles/globals.css(3 hunks)tailwind.config.js(0 hunks)
๐ค Files with no reviewable changes (1)
- tailwind.config.js
๐ Additional comments (7)
package.json (1)
24-27: LGTM! Dependencies align with Tailwind v4 setup.The addition of
autoprefixerandpostcssas dev dependencies correctly supports the new PostCSS-based Tailwind configuration introduced inpostcss.config.js.postcss.config.js (1)
1-6: LGTM! Standard Tailwind v4 PostCSS configuration.This configuration correctly integrates Tailwind CSS v4 with Next.js 15 using the
@tailwindcss/postcssplugin and autoprefixer.src/styles/globals.css (3)
1-14: LGTM! Correct Tailwind v4 import and base typography.The
@import "tailwindcss"directive is the correct approach for Tailwind v4, and the base typography settings establish proper font sizing and family defaults.
16-73: LGTM! Well-organized CSS custom properties.The color tokens, font families, and layout properties are clearly organized with Korean comments for maintainability.
166-202: LGTM! Typography and layout utilities are well-defined.The custom typography utilities for Pretendard and ZEN Serif fonts, along with the display/grid utilities, are correctly implemented and provide good developer ergonomics.
src/pages/_app.tsx (1)
2-2: Quote style updated to single quotes.Import statement now uses single quotes consistently with common ESLint/Prettier configurations.
src/pages/index.tsx (1)
1-8: LGTM! Appropriate test content for Tailwind validation.The simplified component serves as an effective test case to verify the Tailwind v4 setup. The classes used (
bg-mint-500,text-background,text-headline-lg-serif,text-pink-400,text-display-lg) demonstrate the custom utilities defined inglobals.cssare being applied correctly.Note: Ensure
text-pink-400works as expected after addressing the undefined CSS variable issues inglobals.css.
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
ํ
์ผ์๋ ์ฐธ ์ด๋ ต๋ค์.. ์ด์ ์ง์ง ๋๊ธธ ๋ฐ๋ผ๋ฉฐ ๊ณ ์ํ์
จ์ต๋๋ค-!
์ถ๊ฐ์ ์ผ๋ก ๊ถ๊ธํ๊ฑฐ ์ฝ๋ฉํธ ๋จ๊ฒจ๋์ต๋๋ค ํ์ธํด์ฃผ์ธ์
src/pages/_app.tsx
Outdated
| @@ -1,5 +1,5 @@ | |||
| import "@/styles/globals.css"; | |||
| import type { AppProps } from "next/app"; | |||
| import '../styles/globals.css'; | |||
There was a problem hiding this comment.
์ด๊ฑด ์ ์๋๊ฒฝ๋ก๋ก ๋ฐ๊พธ์๋์?
There was a problem hiding this comment.
์์ ํด์ ์ฌ๋ ค๋์ต๋๋ค.... ์๋ํ๊ฑด ์๋๊ณ ๊ฒฝ๋ก ๋ฌธ์ ๋ผ ์๊ฐํ์ ๋ ์ ์ ์์ด ๋ฐ๊ฟจ์ต๋๋ค.
| /* ์์ */ | ||
| @layer utilities { | ||
| /* Mint */ | ||
| .bg-mint-50 { background-color: var(--mint-50); } |
There was a problem hiding this comment.
์ด๊ฑด ์ง์ง ๊ทธ๋ฅ ๊ถ๊ธํด์ ๋ฌผ์ด๋ณด๋๊ฑด๋ฐ . ์ ์ ๋ถ์ด๋๊ฑด๊ฐ์?
There was a problem hiding this comment.
https://tailwindcss.com/docs/styling-with-utility-classes?utm_source=chatgpt.com
๊ณต์๋ฌธ์ ๋งจ ๋ฐ์ ๋ณด์๋ฉด ์ ํธ๋ฆฌํฐ ํด๋์ค๋ก ์ ์ฉ์์๋
.(ํด๋์ค ๋ช
์) ํ๊ณ ์จ์ผ ํ๋๋ผ๊ณ ์
์๋ง .์ ๋นผ๋ฉด CSS์์๋ bg-mint-50์ด๋ผ๋ ํด๋์ค๊ฐ ์๋๋ผ ํ๊ทธ ์ด๋ฆ์ผ๋ก ์ธ์๋๋๊ฑฐ ๊ฐ์ต๋๋ค.
There was a problem hiding this comment.
Actionable comments posted: 1
๐งน Nitpick comments (4)
src/styles/globals.css (4)
2-2: Consider selfโhosting Pretendard instead of loading from CDN at runtime.Reduces thirdโparty dependency, avoids potential CSP/network issues, and improves privacy/cache control.
11-14: 62.5% root font-size may impact accessibility.Using 62.5% can interfere with user scaling preferences. Consider keeping
100%and sizing via rems, or document rationale.
66-81: Tokens without utilities: add missing helpers or remove tokens to reduce drift.
--display-block,--display-inline, and--grid-rows-autohave no public utilities. Either expose them or drop unused tokens.@layer utilities { .layout-flex { display: var(--display-flex); } .layout-grid { display: var(--display-grid); } + .layout-block { display: var(--display-block); } + .layout-inline { display: var(--display-inline); } .grid-cols-6 { grid-template-columns: var(--grid-cols-6); } .grid-cols-4 { grid-template-columns: var(--grid-cols-4); } + .grid-rows-auto { grid-template-rows: var(--grid-rows-auto); } .max-w-mobile { max-width: var(--max-w-mobile); } .min-w-100 { min-width: var(--min-w-100); } }Also applies to: 199-210
83-88: Optional: Declare color-scheme for better UA theming.Adding
color-scheme: light dark;helps native form controls match your light/dark backgrounds.@media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; + color-scheme: dark; } }And optionally at root for light:
:root { /* โฆexisting varsโฆ */ + color-scheme: light; }
๐ Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
๐ Files selected for processing (1)
src/styles/globals.css(3 hunks)
๐ Additional comments (1)
src/styles/globals.css (1)
89-172: Color utilities look consistent; prior undefined variable issues are resolved.Full 50โ900 ranges exist for mint/pink/gray; mappings are correct.
Confirm that overriding Tailwind core selectors (e.g.,
bg-pink-500,grid-cols-6) via@layer utilitiesis intentional for branding, as these will supersede Tailwindโs defaults where both are generated.
| @font-face { | ||
| font-family: 'ZEN Serif'; | ||
| src: url('/fonts/ZEN-SERIF-TTF-Regular.woff2') format('woff2'); | ||
| font-style: normal; | ||
| font-display: swap; | ||
| } |
There was a problem hiding this comment.
๐ ๏ธ Refactor suggestion | ๐ Major
โ Verification inconclusive
Define font-weight for 'ZEN Serif' to match utilities (avoid fallback/synthetic rendering).
Your serif classes use font-weight: 200, but the @font-face omits a weight descriptor, which defaults to 400. Browsers may synthesize or fallback. Declare the correct weight (or a range if variable).
@font-face {
font-family: 'ZEN Serif';
src: url('/fonts/ZEN-SERIF-TTF-Regular.woff2') format('woff2');
- font-style: normal;
+ font-style: normal;
+ /* If this is a single-weight file used for your serif utilities: */
+ font-weight: 200;
+ /* If it's a variable font, prefer a range, e.g.: */
+ /* font-weight: 200 700; */
font-display: swap;
}Please confirm the actual weight(s) in the font file and set accordingly.
**Specify font-weight in @font-face for โZEN Serifโ.**
Your โRegularโ font file defaults to weight 400; without a weight descriptor, browsers assume 400 and may synthesize. Add `font-weight: 400;` (or a range if this is a variable font) to ensure proper rendering.
```diff
@font-face {
font-family: 'ZEN Serif';
src: url('/fonts/ZEN-SERIF-TTF-Regular.woff2') format('woff2');
font-style: normal;
+ font-weight: 400;
font-display: swap;
}Confirm the actual font weight(s) in the file and adjust accordingly.
๐ค Prompt for AI Agents
In src/styles/globals.css around lines 4 to 9, the @font-face for 'ZEN Serif'
omits a font-weight descriptor which can cause browsers to synthesize weights;
add the correct font-weight (e.g. font-weight: 400;) or a weight range if this
is a variable font to match the actual font file, and verify the font file's
declared weight(s) and update the CSS accordingly.
github-actions
bot
added
fix
|
๐ท๏ธ Labeler has automatically applied labels based on your PR title, branch name, or commit message. |
2 participants
๐ฅ ์์ ๋ด์ฉ
๐ย ์ด์
PR Point (To Reviewer)
Tailwind ์ค๋ฅ(Next.js 15 + Tailwind v4 ์ค์ ๋ฌธ์ )
์ธํ ์๋ง ์ค๋ฅ๊ฐ ๋ช ๋ฒ์ธ์ง, ํฐํธ์ ์ฉ์ ๋๋๋ฐ ๊ธฐ๋ณธ Tailwind ์คํ์ผ ์์ฒด๊ฐ ์ ์ฉ์ด ์๋๋ค ํด์ ํด๊ฒฐํ์ต๋๋ค.
์์ธ์ Next.js 15 + Tailwind v4์์ config.js ์ ๊ฐ์ด ๋น๋ํ๋ฉด ์ถฉ๋์ด ๋ ์ ์ฉ์ด ์๋๋ค๊ณ ํฉ๋๋ค...
๊ทธ๋์ ์ฟจํ๊ฒ ์ญ์ ํ๊ณ ๋์ global.css ์์ ์ ํธ๋ฆฌํฐ๋ก ๋ฃ์ด๋จ์ต๋๋ค. ๋ฌธ์ ์ config๋ ์ฌ์ฉ ์ํ๊ณ ์ปฌ๋ฌ ํ ํฐ๋ ๊ฐ์ ธ์ฌ ์ ์๊ฒ ๋ฉ๋๋ค(ํฐํธ๋ ๋์ผ)
Tailwind ํด๋์ค๋ JSX/HTML์์๋ ๋จ์ ์์ง๋ง.. ๋ธ๋ผ์ฐ์ ์ ์ ๋ฌ๋๋ CSS์๋ ํฌํจ๋์ง ์๋ ํ์์ด ๋ํ๋์ Tailwind ์ ์ฉ์ด ์๋๋ฏ ํฉ๋๋ค.
์ฌ๋ด : ๋ ์ด์ ์ธํ ํ๊ณ ์ถ์ง ์์ต๋๋ค.
๐ธย ํผ๊ทธ๋ง ์คํฌ๋ฆฐ์ท or ๊ธฐ๋ฅ GIF
์ ์ฉ์ฝ๋
Summary by CodeRabbit
Chores
Refactor