WebComponents Ignite UI 과의 Tailwind CSS 통합
Ignite UI for WebComponents는 CSS 변수를 통한 완전한 테마 맞춤화를 제공합니다. 이 가이드에서는 Tailwind CSS를 프로젝트에 통합하고 패키지에서igniteui-theming 제공하는 맞춤형 유틸리티 클래스로 개선하는 방법을 배우게 됩니다. 이 클래스들은 색상, 그림자, 타이포그래피에 대한 Ignite UI 디자인 토큰을 노출시켜 원활한 유틸리티 우선 스타일링 경험을 가능하게 합니다.
개요
이 가이드는 이미 Ignite UI 테마가 설치되어 있다고 가정합니다. 그렇지 않다면 다음을 실행하세요:
npm install igniteui-theming
Tailwind Setup
공식 Tailwind 설치 가이드를 따라 선택한 빌드 도구나 프레임워크에 따라 Tailwind CSS를 설치하는 것부터 시작하세요.
Tailwind가 설정되면, 글로벌 스타일시트에 Tailwind와 Ignite UI 테마 구성을 모두 가져오세요.
@import 'tailwindcss';
@import 'igniteui-theming/tailwind/theme';
프로젝트가 스타일링에 사용sass 한다면:
@import "tailwindcss";
@use "igniteui-theming/tailwind/theme";
Using Ignite UI Custom Utility Classes
패키지에는igniteui-theming 유틸리티 클래스를 통해 Ignite UI 디자인 토큰을 노출하는 맞춤형 Tailwind 구성이 포함되어 있습니다. 여기에는 다음에 대한 지원이 포함됩니다:
색상 및 대비 색상
Elevation (shadows)
Typography styles
각각의 사용법을 살펴 보겠습니다.
Color Utility Classes
우리의 컬러 유틸리티 클래스는 각 Ignite UI 테마의 토큰으로 구동됩니다. HTML에 직접 적용할 수 있습니다:
<h1 class="bg-primary-500 text-primary-500-contrast">This is a title</h1>
이 주제에서 Tailwind의 풀 컬러 시스템을 탐색하고, Ignite UI가 제공하는 클래스 이름을 사용해 적용할 수 있습니다.
Shadow utility classes
미리 정의된 표고 수준 (0에서 24까지) 중 하나를 사용하여 깊이를 추가할 수 있습니다.
<div class="shadow-elevation-8">Elevated container</div>
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 유형 배율에 따라 필요한 모든 글꼴 설정, 간격 및 크기를 적용합니다.
Sample
아래 샘플에서는 Tailwind 유틸리티 클래스들로 구성된 404 페이지를 볼 수 있으며, 여기에는 "그림자", "색상", "타이포그래피"에 대한 "커스텀 유틸리티"가 포함되어 있습니다.
[!NOTE] This sample is fictional and fully custom, it’s not part of the Ignite UI component library.
Summary
몇 가지 설정 단계만으로도 Tailwind의 유틸리티 우선 접근법과 Ignite UI의 견고한 설계 시스템을 결합할 수 있습니다. 이 통합을 통해 HTML에서 색상, 고도, 타이포그래피에 대한 잘 정의된 토큰을 사용해 일관되고 테마가 있는 UI 컴포넌트를 빠르게 구축할 수 있습니다.