Next.js에 Tailwind CSS 설치하기

Next.js 프로젝트에서 Tailwind CSS 설정하기.

아직 프로젝트를 설정하지 않았다면, 새로운 Next.js 프로젝트를 생성하세요. 가장 일반적인 방법은 Create Next App을 사용하는 것입니다.

터미널

npx create-next-app@latest my-project --typescript --eslint --appcd my-project

npm을 통해 @tailwindcss/postcss와 필요한 의존성을 설치하세요.

터미널

npm install tailwindcss @tailwindcss/postcss postcss

프로젝트 루트에 postcss.config.mjs 파일을 생성하고, PostCSS 설정에 @tailwindcss/postcss 플러그인을 추가하세요.

postcss.config.mjs

const config = {  plugins: {    "@tailwindcss/postcss": {},  },};export default config;

./src/app/globals.css에 Tailwind CSS를 임포트하는 @import를 추가하세요.

globals.css

@import "tailwindcss";

npm run dev로 빌드 프로세스를 실행하세요.

터미널

npm run dev

Tailwind의 유틸리티 클래스를 사용해 콘텐츠를 스타일링하세요.

page.tsx

export default function Home() {  return (    <h1 className="text-3xl font-bold underline">      Hello world!    </h1>  )}