Tailwind CSS와 Ignite UI for Angular 통합
Ignite UI for Angular CSS 변수와 강력한 Sass 엔진을 통해 완전한 테마 사용자 정의를 제공합니다. 이 가이드에서는 Tailwind CSS를 Angular 프로젝트에 통합하고 'igniteui-theming' 패키지에서 제공하는 사용자 정의 유틸리티 클래스로 향상시키는 방법을 배웁니다. 이러한 클래스는 색상, 그림자 및 타이포그래피에 대한 Ignite UI 디자인 토큰을 노출하여 원활한 유틸리티 우선 스타일링 경험을 가능하게 합니다.
개요
Note
이 가이드에서는 Ignite UI for Angular가 이미 설치되어 있다고 가정합니다. 그렇지 않은 경우 다음을 실행합니다.
ng add igniteui-angular
1. Install Tailwind
다음 명령을 사용하여 tailwind를 설치합니다.
npm install tailwindcss @tailwindcss/postcss postcss --force
2.Configure PostCSS Plugins
프로젝트 루트에 파일을 만들고.postcssrc.json 플러그인을@tailwindcss/postcss PostCSS 설정에 추가하세요.
{
"plugins": {
"@tailwindcss/postcss": {}
}
}
3.Import Tailwind CSS
메인 스타일시트styles.css (또는styles.scss Tailwind)에서 Tailwind와 Ignite UI Tailwind 테마 구성을 가져오세요.
@import "tailwindcss";
@import "igniteui-theming/tailwind/themes/base";
프로젝트가 스타일링에 사용sass 한다면:
@import "tailwindcss";
@use "igniteui-theming/tailwind/themes/base";
가져오기 경로가 올바르게
node_modules해결되는지 확인하세요.
Using Ignite UI Custom Utility Classes
패키지에는igniteui-theming 유틸리티 클래스를 통해 Ignite UI 디자인 토큰을 노출하는 맞춤형 Tailwind 구성이 포함되어 있습니다. 여기에는 다음에 대한 지원이 포함됩니다:
색상 및 대비 색상
Elevation (shadows)
Typography styles
각각의 사용법을 살펴 보겠습니다.
Color Utility Classes
HTML에서 직접 Ignite UI 색상 토큰을 사용합니다.
<h1 class="bg-primary-500 text-primary-500-contrast">This is a title</h1>
Tailwind의 전체 컬러 시스템을 Tailwind 색상 문서에서 탐색하고, Ignite UI가 제공하는 클래스 이름을 사용해 적용할 수 있습니다.
Shadow utility classes
미리 정의된 표고 수준 (0에서 24까지) 중 하나를 사용하여 깊이를 추가할 수 있습니다.
<div class="shadow-elevation-8">Elevated container</div>
Tailwind에서 제공하는 모든 섀도우 관련 유틸리티 클래스는 Tailwind 박스 섀도우 문서에서 확인할 수 있습니다
Typography custom utility styles
폰트를 적용하려면 클래스를font-ig 최상위 요소에 추가하세요. 기본 글꼴 크기는 유틸리티 클래스를 사용해text-base 정의할 수도 있습니다. 각 타이포그래피 레벨(예: h1, h2, body-1)마다 맞춤형 유틸리티 클래스를 제공합니다. 이렇게 사용하세요:
<p class="type-style-h3">This paragraph gets the h3 styles</p>
각 클래스는 Ignite UI 유형 배율에 따라 필요한 모든 글꼴 설정, 간격 및 크기를 적용합니다.
Note
이 맞춤형 타이포그래피 유틸리티는 외부에서만ig-typography 작동합니다. 만약 CSS 클래스를ig-typography 최상위 요소로 설정해야 한다면, 이 스타일들은 적용되지 않습니다.
Sample
아래 샘플에서는 Tailwind 유틸리티 클래스들로 전적으로 구성된 404 페이지를 볼 수 있습니다. 여기에는 forcustom utilitiesshadows,colors andtypography 등이 포함됩니다.
각 구성 요소의 스타일을 지정하는 방법은 해당 설명서 항목의 스타일링 섹션을 확인하여 확인할 수 있습니다.
Note
이 샘플은 가상이며 완전히 사용자 지정되며 Ignite UI 구성 요소 라이브러리의 일부가 아닙니다.
Summary
몇 가지 구성 단계만 거치면 Tailwind의 유틸리티 우선 접근 방식과 Ignite UI의 강력한 디자인 시스템을 결합할 수 있습니다. 이 통합을 통해 HTML에서 바로 색상, 높이 및 타이포그래피에 대해 잘 정의된 토큰을 사용하여 일관되고 테마가 있는 UI 구성 요소를 신속하게 구축할 수 있습니다.
Additional Resources
우리 커뮤니티는 활발하며 항상 새로운 아이디어를 환영합니다.
GitHub