Angular에서 Tailwind CSS 사용하기

Tailwind CSS는 HTML을 벗어나지 않고도 현대적인 웹사이트를 만들 수 있는 유틸리티 우선 CSS 프레임워크입니다. 이 가이드에서는 Angular 프로젝트에 Tailwind CSS를 설정하는 방법을 알아봅니다.

ng add로 자동 설정하기

Angular CLI는 ng add 명령으로 프로젝트에 Tailwind CSS를 간편하게 통합하는 방법을 제공합니다. 이 명령은 필요한 패키지를 자동으로 설치하고 Tailwind CSS를 구성하며 프로젝트의 빌드 설정을 갱신합니다.

먼저 터미널에서 Angular 프로젝트의 최상위 디렉터리로 이동한 뒤 다음 명령을 실행하세요.

ng add tailwindcss

이 명령은 다음 작업을 수행합니다.

• tailwindcss와 피어 의존성을 설치합니다.
• Tailwind CSS를 사용하도록 프로젝트를 설정합니다.
• 스타일에 Tailwind CSS @import 구문을 추가합니다.

ng add tailwindcss를 실행한 후에는 컴포넌트 템플릿에서 Tailwind 유틸리티 클래스를 바로 사용할 수 있습니다.

수동 설정하기(다른 방법)

Tailwind CSS를 수동으로 설정하려면 다음 단계를 진행하세요.

1. Angular 프로젝트 생성하기

아직 프로젝트가 없다면 먼저 Angular 프로젝트를 새로 만드세요.

ng new my-project
cd my-project

2. Tailwind CSS 설치하기

이제 Angular 프로젝트의 최상위 디렉터리에서 터미널을 열고 다음 명령을 실행해 Tailwind CSS와 피어 의존성을 설치하세요.

npm install tailwindcss @tailwindcss/postcss postcss

yarn add tailwindcss @tailwindcss/postcss postcss

pnpm add tailwindcss @tailwindcss/postcss postcss

bun add tailwindcss @tailwindcss/postcss postcss

3. PostCSS 플러그인 설정하기

다음으로 프로젝트 최상위 경로에 .postcssrc.json 파일을 추가하세요. PostCSS 설정에 @tailwindcss/postcss 플러그인을 추가하세요.

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

4. Tailwind CSS 불러오기

./src/styles.css에 Tailwind CSS를 불러오는 @import 구문을 추가하세요.

@import 'tailwindcss';

SCSS를 사용한다면 ./src/styles.scss에 @use 구문을 추가하세요.

@use 'tailwindcss';

5. 프로젝트에서 Tailwind 사용하기

이제 컴포넌트 템플릿에서 Tailwind 유틸리티 클래스로 애플리케이션의 스타일을 지정할 수 있습니다. ng serve로 빌드 과정을 실행하면 스타일이 적용된 제목이 표시됩니다.

예를 들어 app.html 파일에 다음 코드를 추가할 수 있습니다.

<h1 class="text-3xl font-bold underline">Hello world!</h1>

추가 자료

• Tailwind CSS 문서