Tailwind CSS home page
  1. 설치
  2. Next.js에서 Tailwind CSS 설치

  1. 프로젝트 생성

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

    Terminal
    npx create-next-app@latest my-project --typescript --eslintcd my-project

  2. Tailwind CSS 설치

    tailwindcss와 그 동반 의존성을 npm을 통해 설치한 후, init 명령어를 실행하여 tailwind.config.js와 postcss.config.js를 생성하세요.

    Terminal
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

  3. 템플릿 경로 설정

    tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가하세요.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // 혹은 `src` 디렉토리를 사용하는 경우:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  4. Tailwind 지시어를 CSS에 추가

    Tailwind의 각 레이어에 대한 @tailwind 지시어를 globals.css 파일에 추가하세요.

    globals.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. 빌드 프로세스 시작

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

    Terminal
    npm run dev

  6. 프로젝트에서 Tailwind 사용 시작

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

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