처음 만난 Next.js 문서
11.2
Tailwind CSS
Tailwind CSS는 Next.js와 궁합이 잘 맞는 utility-first CSS 프레임워크입니다. 다양한 스타일링 라이브러리들이 있지만, 그 중에서도 최근에 가장 많이 사용되는 것이 바로 이 Tailwind CSS 입니다. Tailwind CSS는 각 element에 사전에 정의된 className 속성을 통해서 쉽게 스타일을 입힐 수 있게 해줍니다.
create-next-app을 사용해서 Next.js 애플리케이션을 생성하면, 생성하는 과정에서 Tailwind CSS 사용 여부를 선택할 수 있습니다. 그렇지 않고 직접 Tailwind CSS를 연동하기 위해서는 먼저 아래 명령어를 사용해서 관련 패키지들을 설치해야 합니다. 참고로 이 책에서는 Tailwind CSS 버전4를 기준으로 설명합니다.
npm install -D tailwindcss @tailwindcss/postcss postcss
이후 프로젝트 폴더 내에 postcss.config.mjs 파일을 만들고 아래와 같이 코드를 작성합니다. 이 코드는 PostCSS에 플러그인으로 Tailwind CSS를 추가하는 코드입니다.
// postcss.config.mjs
const config = {
plugins: {
'@tailwindcss/postcss': {},
},
};
export default config;
Tailwind CSS를 애플리케이션 전체에 적용하려면, 아래와 같이 Tailwind CSS가 생성한 스타일을 Global Stylesheet에 @tailwind 지시어를 사용하여 삽입하면 됩니다.
/* app/globals.css */
@import 'tailwindcss';
...
이후 Root Layout 파일(app/layout.tsx)에서 globals.css Stylesheet를 가져와서 애플리케이션의 모든 route에 스타일을 적용할 수 있습니다.
// app/layout.tsx
import type { Metadata } from 'next';
// 스타일이 애플리케이션의 모든 route에 적용됨
import './globals.css';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
interface RootLayoutProps {
children: React.ReactNode;
}
function RootLayout(props: RootLayoutProps) {
const { children } = props;
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
export default RootLayout;
Tailwind CSS를 설치하고 Global Stylesheet를 추가한 이후에는, 아래와 같이 애플리케이션에서 Tailwind CSS의 유틸리티 클래스를 사용할 수 있습니다.
function Page() {
return (
<h1 className='text-3xl font-bold underline'>
Hello, Next.js!
</h1>
);
}
export default Page;
마지막 업데이트: 2025년 10월 24일 02시 44분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page