참고: v12 릴리스에서 Angular는 Tailwind CSS에 대한 지원을 추가했습니다. Angular v12의 tailwind 공식 문서how to install Tailwind CSS를 참조하세요.

Rapidly build modern websites without ever leaving your HTML. - Tailwind CSS

Tailwind CSS 설치

터미널을 열고 Angular 프로젝트 디렉토리로 이동하여 실행

npm install tailwindcss

선택적으로 Tailwind CSS 플러그인을 설치합니다.

npm install @tailwindcss/typography
npm install @tailwindcss/forms

Tailwind CSS 구성

Angular 프로젝트 디렉토리에서 Tailwind CSS 구성 파일 이름을 만듭니다tailwind.config.js.

다음 구성을 추가합니다.

module.exports = {
    prefix: '',
    purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
    darkMode: 'class',
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],
};

다음 Tailwind CSS 플러그인이 설치된 경우 양식 및 타이포그래피 플러그인에 대한 구성을 추가합니다.

plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],

styles.scss 파일을 열어 Tailwind CSS 레이어 3개를 가져옵니다.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

사용해 보세요

모든 구성 요소에 다음을 추가하십시오.

<h1 class="text-4xl font-bold text-center text-blue-500">Hello World</h1>

실행ng serve 및 브라우저 열기http://localhost:4200/

TailwindCSS와 같은 유틸리티 우선 프레임워크를 사용하면 HTML 파일이 부풀어 올라 이 중복을 처리하고 프로젝트를 유지 관리할 수 있도록 할 수 있습니다. Extracting Components의 Tailwind CSS을 방문하십시오.

TailwindCSS를 사용하여 인증 양식을 만든 방법을 보려면 아래 링크를 방문하십시오.

퀸시 코 / 콘텐츠 프로젝션