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 plugin à sua configuração do PostCSS.

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

    3.Import Tailwind CSS

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

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

    Se seu projeto é usadosass para estilismo:

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

    Certifique-se de que o caminho de importação seja resolvido corretamente a partir denode_modules.

    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

    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 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:

    <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 personalizada só funcionam fora deig-typography. Se você precisar definir aig-typography classe CSS em um elemento de nível superior, esses estilos não vão se aplicar.

    Sample

    No exemplo abaixo, você verá uma página 404 construída inteiramente com classes utilitárias Tailwind, incluindo nossascustom utilities forshadows,colors etypography.

    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.