NextJS에서 Tailwind 작업하기

NextJS에서는 React와 함께 자주 사용되는 CSS 프레임워크 Tailwind를 스타일링에 사용할 수 있습니다. 사용 방법을 살펴보겠습니다.

Tailwind 스타일 작업을 위해서는 두 개의 파일이 필요합니다: tailwind.config.js와 postcss.config.js. 프로젝트 설치 시 "Tailwind 스타일 사용" 항목을 선택했기 때문에, 이 파일들은 이미 우리 프로젝트에 생성되어 루트에 있습니다. 이러한 파일들이 없으면, 공식 문서에 따라 Tailwind를 설치해야 합니다.

Tailwind 스타일을 사용하여 문단 텍스트에 굵은 두께와 노란색을 추가해 봅시다. Tailwind CSS에서 색상용 클래스에 사용되는 숫자는 색상의 강도 또는 음영을 나타냅니다. 이 숫자는 50부터 900까지 다양합니다. 텍스트에는 중간 음영을 선택하겠습니다:

export default function Test() {
	return <p className="font-bold text-yellow-500">
		text text text
	</p>;
}

당신의 프로젝트에서 Tailwind 스타일을 사용해 보세요.