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 PostCSS 구성에 플러그인을 @tailwindcss/postcss 추가합니다.
{
"plugins": {
"@tailwindcss/postcss": {}
}
}
3.Import Tailwind CSS
기본 스타일시트(또는 styles.scss) styles.css에서 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>
You can explore Tailwind's full color system in the Tailwind color documentation, and apply it using the Ignite UI-provided class names.
Shadow utility classes
미리 정의된 표고 수준 (0에서 24까지) 중 하나를 사용하여 깊이를 추가할 수 있습니다.
<div class="shadow-elevation-8">Elevated container</div>
You can find all the shadow-related utility classes provided by Tailwind in the Tailwind box shadow documentation
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
아래 샘플에서는 for,and shadows colors typography를 포함하여 custom utilities Tailwind 유틸리티 클래스로 완전히 빌드된 404 페이지를 볼 수 있습니다.
각 구성 요소의 스타일을 지정하는 방법은 해당 설명서 항목의 스타일링 섹션을 확인하여 확인할 수 있습니다.
Note
이 샘플은 가상이며 완전히 사용자 지정되며 Ignite UI 구성 요소 라이브러리의 일부가 아닙니다.
Summary
몇 가지 구성 단계만 거치면 Tailwind의 유틸리티 우선 접근 방식과 Ignite UI의 강력한 디자인 시스템을 결합할 수 있습니다. 이 통합을 통해 HTML에서 바로 색상, 높이 및 타이포그래피에 대해 잘 정의된 토큰을 사용하여 일관되고 테마가 있는 UI 구성 요소를 신속하게 구축할 수 있습니다.
Additional Resources
우리 커뮤니티는 활발하며 항상 새로운 아이디어를 환영합니다.
GitHub