Tailwind CSS와 함께 Next.js 시작하기

테일윈드 CSS는 매우 인기 있는 개발자 친화적인 유틸리티 우선 CSS 프레임워크입니다. 테일윈드CSS를 사용해 본 적이 없다면 문서를 참조하세요.

프로젝트 만들기

아직 설정하지 않은 경우 새 Next.js 프로젝트를 생성하여 시작하세요. 가장 일반적인 방법은 Create Next App를 사용하는 것입니다.

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

 

Tailwind CSS 설치하기

npm을 통해 Tailwind에 필요한 tailwindcss와 피어 종속 요소를 설치합니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

필수 패키지를 성공적으로 설치했으면 이제 필요한 구성 파일을 생성할 수 있습니다.

구성

프로젝트를 추가하기 위해 필요한 설정 파일은 두 개입니다.

• tailwind.config.js
• postcss.config.js

init 명령을 실행하면 tailwind.config.js와 postcss.config.js이 모두 생성됩니다.

npx tailwindcss init -p

 

템플릿 경로 구성하기

tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가합니다. 이 파일은 프로젝트에서 스타일을 구성하는 데 사용되는 테일윈드 설정 파일입니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

테일윈드 CSS의 공식 문서에서 구성 옵션에 액세스할 수 있습니다.

https://tailwindcss.com/docs/configuration

 

CSS에 Tailwind 지시어 추가하기

다음 단계는 styles/global.css의 글로벌 CSS 파일에 필요한 @tailwind 지시문을 추가하는 것입니다.
global.css 파일에 다음과 같이 Tailwind의 레이어에 대한 @tailwind 지시문을 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

다른 스타일링을 사용하고 싶지 않다면 애플리케이션에서 다른 스타일을 모두 제거하거나 테일윈드를 제거하면 됩니다.

이제 애플리케이션을 테스트할 수 있습니다! 🎉

 

프로젝트에서 Tailwind 사용 시작하기

애플리케이션 pages/index.js 파일에 코드를 작성합니다.
Tailwind의 유틸리티 클래스를 사용하여 콘텐츠의 스타일을 지정합니다.

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

 

빌드 프로세스 시작

npm run dev`로 빌드 프로세스를 실행합니다.