Next.js 프로젝트에 Tailwind CSS를 설치하는 방법

이 자습서에서는 Next.js 프로젝트 내에서 Tailwind CSS를 설정하고 선택적으로 Flowbite React 패키지를 설치하여 오픈 소스 구성 요소를 시작하는 방법을 배웁니다.

고지 사항: 이 자습서는 Flowbite Docs의 통합 가이드Tailwind CSS Next.js에 처음 게시되었습니다.

Next.js은 개발 시간과 웹 사이트 성능을 개선하는 서버 측 렌더링 및 정적 웹 사이트 생성을 가능하게 하는 React 라이브러리 기반의 인기 있는 웹 개발 프레임워크입니다.

이 기술은 2016년 처음 출시된 이후 Vercel, Netflix, TikTok, Twitch, Hulu, Nike 및 HBO Max와 같은 수십만 명의 개발자와 회사에서 사용되고 있습니다.

이 가이드를 따르면 기존 또는 새로운 Next.js 프로젝트 내에서 Flowbite React 구성 요소로 Tailwind CSS를 올바르게 설정하는 방법을 배우게 됩니다.

요구 사항

NPX 및 NPM을 사용하여 Next.js, Tailwind CSS 및 Flowbite를 설치할 수 있도록 컴퓨터에 Node.js이 설치되어 있는지 확인하십시오.

새 프로젝트 만들기

다음 명령을 실행하여 새 시작 Next.js 프로젝트를 만듭니다.

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

이 명령은 기본 Next.js 프로젝트에 필요한 모든 종속성 및 상용구 파일을 설치합니다.

터미널에서 다음 명령을 실행하여 로컬 서버를 시작합니다.

npm run dev

이렇게 하면 http://localhost:3000 에서 브라우저를 통해 로컬 개발에 액세스할 수 있습니다.

다음 명령을 실행하여 프로젝트 파일을 빌드합니다.

npm run build

Tailwind CSS 설치

작동하는 Next.js 프로젝트가 있으면 다음 단계는 Tailwind CSS의 installation guide을 따르는 것입니다.

NPM을 사용하여 Tailwind CSS, PostCSS 및 Autoprefixer를 설치합니다.

npm install -D tailwindcss postcss autoprefixer

터미널에서 다음 명령을 실행하여 새 tailwind.config.js 및 postcss.config.js 파일을 만듭니다.

npx tailwindcss init -p

-p 플래그는 PostCSS 구성 파일도 생성합니다.

Tailwind CSS 구성 파일 내에서 템플릿 경로를 구성합니다.

/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: [
    "./pages/**/*.{ts,tsx}",
    "./public/**/*.html",
  ],
  plugins: [],
  theme: {},
};

이는 프로젝트 내부의 모든 클래스 이름을 찾고 최종 CSS 파일에 사용된 이름만 포함하기 위해 필요합니다.
styles/globals.css 파일의 내용을 바꾸고 다음 지시문을 가져옵니다.

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

이 마지막 변경으로 이제 적절한 Next.js 및 Tailwind CSS 구성이 설정되어야 합니다.

Tailwind CSS를 기반으로 하는 오픈 소스 React 구성 요소 라이브러리를 사용하려면 이 자습서의 다음 섹션 단계를 따르십시오.

Flowbite 반응 설치

Flowbite React은 모달, 내비게이션, 드롭다운, 캐러셀 등과 같은 대화형 요소를 특징으로 하는 Tailwind CSS 유틸리티 우선 프레임워크를 기반으로 하는 대화형 React 구성 요소의 오픈 소스 세트입니다.

다음 명령을 실행하여 NPM을 통해 기본 Flowbite 패키지 및 Flowbite React를 설치합니다.

npm install flowbite flowbite-react --save

tailwind.config.js 파일 내 플러그인으로 Flowbite가 필요합니다.

/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: [
    "./pages/**/*.{ts,tsx}",
    "./public/**/*.html",
  ],
  plugins: [
    require("flowbite/plugin")
  ],
  theme: {},
};

템플릿 경로에 소스 코드를 추가하여 라이브러리의 동적 클래스가 컴파일되도록 합니다.

/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: [
    "./node_modules/flowbite-react/**/*.js",
    "./pages/**/*.{ts,tsx}",
    "./public/**/*.html",
  ],
  plugins: [require("flowbite/plugin")],
  theme: {},
};

이제 Flowbite React를 성공적으로 설치했으므로 라이브러리의 구성 요소를 사용할 수 있습니다.

Flowbite 부품

시작하려면 Flowbite React repository에서 React 구성 요소의 전체 컬렉션을 확인하고 각 구성 요소의 소스 코드에 대한 설명서를 찾아볼 수 있습니다.

다음은 flowbite-react 패키지에서 알림 구성 요소를 가져와 사용하는 방법의 예입니다.

import { Alert } from "flowbite-react";

export default function MyPage() {
  return <Alert color="info">Alert!</Alert>;
}

다음은 드롭다운 구성요소를 사용하는 방법에 대한 또 다른 예입니다.

import { Dropdown } from "flowbite-react";

<Dropdown label="Dropdown button">
  <Dropdown.Item>
    Dashboard
  </Dropdown.Item>
  <Dropdown.Item>
    Settings
  </Dropdown.Item>
  <Dropdown.Item>
    Earnings
  </Dropdown.Item>
  <Dropdown.Item>
    Sign out
  </Dropdown.Item>
</Dropdown>

마지막으로 navbar 구성 요소를 사용하는 방법에 대한 또 다른 예입니다.

import { Navbar } from "flowbite-react";

<Navbar
  fluid={true}
  rounded={true}
>
  <Navbar.Brand href="https://flowbite.com/">
    <img
      src="https://flowbite.com/docs/images/logo.svg"
      className="mr-3 h-6 sm:h-9"
      alt="Flowbite Logo"
    />
    <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
      Flowbite
    </span>
  </Navbar.Brand>
  <Navbar.Toggle />
  <Navbar.Collapse>
    <Navbar.Link
      href="/navbars"
      active={true}
    >
      Home
    </Navbar.Link>
    <Navbar.Link href="/navbars">
      About
    </Navbar.Link>
    <Navbar.Link href="/navbars">
      Services
    </Navbar.Link>
    <Navbar.Link href="/navbars">
      Pricing
    </Navbar.Link>
    <Navbar.Link href="/navbars">
      Contact
    </Navbar.Link>
  </Navbar.Collapse>
</Navbar>

Flowbite React에 대해 자세히 알아보려면 저장소와 기본 웹사이트를 확인하세요.

Next.js 시작 프로젝트

우리는 또한 Tailwind CSS 및 Flowbite React가 미리 설정된 오픈 소스 Next.js 시작 프로젝트를 만들었으며 계속해서 repository on GitHub 을 확인하여 복제할 수 있습니다.

고지 사항: 이 자습서는 Flowbite Docs의 통합 가이드Tailwind CSS Next.js에 처음 게시되었습니다.