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

    Create a .postcssrc.json file in the root of your project and add the @tailwindcss/postcss plugin to your PostCSS configuration.

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

    3.Import Tailwind CSS

    In your main stylesheet (styles.css or styles.scss), import Tailwind and the Ignite UI Tailwind theme configuration.

    @import "tailwindcss";
@import "igniteui-theming/tailwind/themes/base";

    If your project uses sass for styling:

    @import "tailwindcss";
@use "igniteui-theming/tailwind/themes/base";

    Ensure the import path resolves correctly from node_modules.

    Using Ignite UI Custom Utility Classes

    The igniteui-theming package includes a custom Tailwind configuration that exposes Ignite UI design tokens through utility classes. These include support for:

    • 색상 및 대비 색상

    • 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

    To apply the font, add the font-ig class to a top-level element. You can also define the base font size using the text-base utility class. We provide custom utility classes for each typography level (e.g., h1, h2, body-1). Use them like so:

    <p class="type-style-h3">This paragraph gets the h3 styles</p>

    각 클래스는 Ignite UI 유형 배율에 따라 필요한 모든 글꼴 설정, 간격 및 크기를 적용합니다.

    Note

    These custom typography utilities only work outside of ig-typography. If you have to set the ig-typography CSS class on a top-level element, these styles won't apply.

    Sample

    In the sample below, you’ll see a 404 page built entirely with Tailwind utility classes, including our custom utilities for shadows, colors, and typography.

    각 구성 요소의 스타일을 지정하는 방법은 해당 설명서 항목의 스타일링 섹션을 확인하여 확인할 수 있습니다.

    Note

    이 샘플은 가상이며 완전히 사용자 지정되며 Ignite UI 구성 요소 라이브러리의 일부가 아닙니다.

    Summary

    몇 가지 구성 단계만 거치면 Tailwind의 유틸리티 우선 접근 방식과 Ignite UI의 강력한 디자인 시스템을 결합할 수 있습니다. 이 통합을 통해 HTML에서 바로 색상, 높이 및 타이포그래피에 대해 잘 정의된 토큰을 사용하여 일관되고 테마가 있는 UI 구성 요소를 신속하게 구축할 수 있습니다.

    Additional Resources


    우리 커뮤니티는 활발하며 항상 새로운 아이디어를 환영합니다.