Tailwind CSS 통합 — Next.js 공식 스타일 솔루션 실전
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Tailwind CSS JIT(Just-In-Time) 컴파일러의 주요 장점이 아닌 것은?
💡 JIT는 임의 값 지원, 빠른 생성, 작은 CSS 파일을 제공하지만 기존 CSS를 자동 마이그레이션하는 기능은 없습니다.
Q2. tailwind.config.ts의 content 배열에 파일 경로를 지정하는 이유는?
💡 content 경로는 Tailwind가 어떤 파일을 스캔할지 지정합니다. 해당 파일에서 실제 사용된 클래스만 최종 빌드에 포함되어 CSS 용량을 최소화합니다.
Q3. @layer 디렉티브에서 components 레이어를 사용하는 올바른 목적은?
💡 @layer components는 .btn-primary, .card처럼 여러 곳에서 재사용되는 컴포넌트 클래스를 정의하는 공간입니다.
Q4. 다음 중 Tailwind에서 동적 클래스가 프로덕션에서 사라지는 이유는?
💡 Tailwind JIT는 소스 파일을 정적으로 분석합니다. `text-${color}-500` 같은 동적 클래스는 분석 불가능하므로 빌드 결과에서 제외됩니다.
Q5. tailwind-merge 라이브러리의 주요 용도는?
💡 tailwind-merge는 bg-red-500 bg-blue-500처럼 충돌하는 클래스가 있을 때 마지막 클래스가 올바르게 우선 적용되도록 중복을 제거해줍니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.