Integração CSS com Tailwind com Ignite UI para WebComponents

    Ignite UI para WebComponents oferece personalização total de temas por meio de variáveis CSS. Neste guia, você aprenderá como integrar o CSS Tailwind ao seu projeto e aprimorá-lo com classes utilitárias personalizadas fornecidas peloigniteui-theming pacote. Essas classes expõem Ignite UI tokens de design para cores, sombras e tipografia, permitindo uma experiência de estilo perfeita e orientada para a utilidade.

    Visão geral

    Este guia pressupõe que você já tenha Ignite UI Theming instalado. Se não, corra:

    npm install igniteui-theming

    Tailwind Setup

    Comece instalando o CSS do Tailwind, de acordo com a ferramenta ou framework de construção escolhido, seguindo o guia oficial de instalação do Tailwind.

    Depois que o Tailwind estiver configurado, importe tanto o Tailwind quanto a configuração de Ignite UI de temática na sua folha de estilos global.

    @import 'tailwindcss';
@import 'igniteui-theming/tailwind/theme';

    Se seu projeto é usadosass para estilismo:

    @import "tailwindcss";
@use "igniteui-theming/tailwind/theme";

    Using Ignite UI Custom Utility Classes

    Oigniteui-theming pacote inclui uma configuração personalizada do Tailwind que expõe tokens de design Ignite UI por meio de classes utilitárias. Essas incluem suporte para:

    • Cores e cores de contraste

    • Elevation (shadows)

    • Typography styles

    Vejamos como usar cada um.

    Color Utility Classes

    Nossas classes utilitárias de cor são alimentadas por tokens de cada Ignite UI tema. Você pode aplicá-los diretamente no seu HTML:

    Você pode explorar o sistema de cores completo do Tailwind neste tópico e aplicá-lo usando os nomes das classes fornecidos por Ignite UI.

    Shadow utility classes

    Você pode adicionar profundidade usando qualquer um dos níveis de elevação predefinidos (de 0 a 24):

    Você pode encontrar todas as classes utilitárias relacionadas a sombras fornecidas pelo Tailwind neste tópico

    Typography custom utility styles

    Para aplicar a fonte, adicione afont-ig classe a um elemento de nível superior. Você também pode definir o tamanho base da fonte usando atext-base classe utilitária. Oferecemos classes utilitárias personalizadas para cada nível tipográfico (por exemplo, h1, h2, corpo-1). Use assim mesmo:

    Cada classe aplica todas as configurações de fonte, espaçamento e dimensionamento necessários de acordo com a escala de tipo Ignite UI.

    Sample

    No exemplo abaixo, você verá uma página 404 construída inteiramente com classes utilitárias Tailwind, incluindo nossas "utilidades personalizadas" para "sombras", "cores" e "tipografia".

    Note

    Este exemplo é fictício e totalmente personalizado, não faz parte da biblioteca de componentes Ignite UI.

    Summary

    Com apenas alguns passos de configuração, você pode combinar a abordagem prioritária da Tailwind com o robusto sistema de design da Ignite UI. Essa integração permite que você construa rapidamente componentes de interface consistentes e temáticos usando tokens bem definidos para cor, elevação e tipografia, diretamente do seu HTML.