Integração CSS Tailwind com Ignite UI for Angular

    Ignite UI for Angular oferece personalização completa de temas por meio de variáveis CSS e um poderoso mecanismo Sass. Neste guia, você aprenderá como integrar o Tailwind CSS em um projeto Angular e aprimorá-lo com classes de utilitário personalizadas fornecidas pelo pacote 'igniteui-theming'. Essas classes expõem tokens de design Ignite UI para cores, sombras e tipografia, permitindo uma experiência de estilo perfeita que prioriza o utilitário.


    Visão geral

    Note

    Este guia pressupõe que você já tenha Ignite UI for Angular instalado. Caso contrário, execute:

    ng add igniteui-angular

    1. Install Tailwind

    Instale o tailwind usando o seguinte comando:

    npm install tailwindcss @tailwindcss/postcss postcss --force

    2.Configure PostCSS Plugins

    Crie um.postcssrc.json arquivo na raiz do seu projeto e adicione o @tailwindcss/postcss plug-in à sua configuração PostCSS.

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

    3.Import Tailwind CSS

    Em sua folha de estilo principal (styles.css ou styles.scss), importe o Tailwind e a configuração do tema Ignite UI Tailwind.

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

    Se o seu projeto usa sass para estilizar:

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

    Verifique se o caminho de importação é resolvido corretamente de node_modules.

    Using Ignite UI Custom Utility Classes

    O igniteui-theming pacote inclui uma configuração personalizada do Tailwind que expõe tokens de design Ignite UI por meio de classes de utilitário. Isso inclui suporte para:

    • Cores e cores de contraste

    • Elevation (shadows)

    • Typography styles

    Vejamos como usar cada um.

    Color Utility Classes

    Use Ignite UI tokens de cores diretamente em seu HTML:

    <h1 class="bg-primary-500 text-primary-500-contrast">This is a title</h1>

    Você pode explorar o sistema de cores completas do Tailwind na documentação de cores do Tailwind e aplicá-lo usando os nomes de 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):

    <div class="shadow-elevation-8">Elevated container</div>

    Você pode encontrar todas as classes utilitárias relacionadas a sombras fornecidas pelo Tailwind na documentação de sombras de caixas do Tailwind

    Typography custom utility styles

    Para aplicar a fonte, adicione a font-ig classe a um elemento de nível superior. Você também pode definir o tamanho da fonte base usando a text-base classe de utilitário. Fornecemos classes de utilidade personalizadas para cada nível de tipografia (por exemplo, h1, h2, body-1). Use-os assim:

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

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

    Note

    Esses utilitários de tipografia personalizados só funcionam fora ig-typography. Se você tiver que definir a ig-typography classe CSS em um elemento de nível superior, esses estilos não serão aplicados.

    Sample

    No exemplo abaixo, você verá uma página 404 criada inteiramente com classes de utilitário Tailwind shadows, incluindo for custom utilities, colors, e typography.

    Você pode ver como estilizar cada componente verificando a seção Estilo em seu respectivo tópico de documentação.

    Note

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

    Summary

    Com apenas algumas etapas de configuração, você pode combinar a abordagem de utilidade do Tailwind com o robusto sistema de design do Ignite UI. Essa integração permite que você crie rapidamente componentes de interface do usuário consistentes e temáticos usando tokens bem definidos para cor, elevação e tipografia, diretamente do seu HTML.

    Additional Resources


    Nossa comunidade é ativa e sempre acolhedora para novas ideias.