Angular 프로젝트에 Tailwind CSS 설치하기

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

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

터미널

ng new my-project --style csscd my-project

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

터미널

npm install tailwindcss @tailwindcss/postcss postcss --force

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

.postcssrc.json

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

./src/styles.css에 Tailwind CSS를 가져오는 @import를 추가하세요.

styles.css

@import "tailwindcss";

ng serve로 빌드 프로세스를 실행하세요.

터미널

ng serve

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

app.component.html

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