TailwindCSS가 이미 설치되어 있습니다

create-next-app에서 TailwindCSS를 선택했다면 이미 설치가 완료된 상태입니다. globals.css 파일을 열면 다음 내용이 있습니다.

/* app/globals.css */@import "tailwindcss";```text이 한 줄로 TailwindCSS의 모든 유틸리티 클래스가 활성화됩니다.## TailwindCSS 기본 사용법TailwindCSS는 미리 만들어진 클래스를 조합해서 스타일을 적용합니다.```tsx// 버튼 컴포넌트 예시export default function Button() {  return (    <button className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">      클릭하세요    </button>  );}```text| 클래스 | 역할 ||--------|------|| `rounded-lg` | `border-radius: 0.5rem` || `bg-blue-500` | 파란색 배경 || `px-4 py-2` | 좌우 패딩 1rem, 상하 패딩 0.5rem || `text-white` | 흰색 글자 || `hover:bg-blue-600` | 마우스를 올리면 더 진한 파란색 |## 자주 쓰는 클래스 패턴레이아웃을 잡을 때 가장 많이 쓰는 패턴입니다.```tsx// 화면 중앙 정렬<div className="flex min-h-screen items-center justify-center">  <p>가운데 정렬된 내용</p></div>// 카드 컴포넌트<div className="rounded-xl bg-white p-6 shadow-md">  <h2 className="text-xl font-bold">제목</h2>  <p className="mt-2 text-gray-600">내용</p></div>// 반응형 그리드<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">  {/* 모바일: 1열, 태블릿: 2열, 데스크톱: 3열 */}</div>

VS Code에서 자동완성 사용하기

Tailwind CSS IntelliSense 확장 프로그램을 설치하면, 클래스 이름을 입력할 때 자동완성이 됩니다. className=""에서 따옴표 안에 커서를 두고 입력하면 관련 클래스 목록이 나타납니다.

이 책에서 TailwindCSS를 쓰는 이유

이 책의 목적은 TailwindCSS 학습이 아니라 Next.js 학습입니다. TailwindCSS를 사용하는 이유는 CSS 파일을 별도로 관리하지 않아도 되어서 예제 코드가 한 파일에 집중되기 때문입니다.

TailwindCSS 클래스가 처음에는 낯설 수 있지만, 예제 코드를 따라가다 보면 자주 쓰는 클래스가 익숙해집니다. 클래스의 의미가 궁금하면 TailwindCSS 공식 문서(tailwindcss.com/docs)를 검색하면 됩니다.

이제 개발 환경 준비가 끝났습니다. 다음 PART에서는 Next.js의 가장 중요한 개념인 렌더링 방식을 이야기합니다.