Integración de Tailwind CSS con Ignite UI for Angular

    Ignite UI for Angular ofrece una personalización completa de los temas a través de variables CSS y un potente motor Sass. En esta guía, aprenderá cómo integrar Tailwind CSS en un proyecto Angular y mejorarlo con clases de utilidad personalizadas proporcionadas por el paquete 'igniteui-theming'. Estas clases exponen Ignite UI tokens de diseño para colores, sombras y tipografía, lo que permite una experiencia de estilo perfecta que prioriza la utilidad.


    Descripción general

    Note

    En esta guía se supone que ya tiene Ignite UI for Angular instalado. Si no es así, ejecute:

    ng add igniteui-angular

    1. Install Tailwind

    Instale tailwind usando el siguiente comando:

    npm install tailwindcss @tailwindcss/postcss postcss --force

    2.Configure PostCSS Plugins

    Crea un.postcssrc.json archivo en la raíz de tu proyecto y añade el@tailwindcss/postcss plugin a tu configuración de PostCSS.

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

    3.Import Tailwind CSS

    En tu hoja de estilo principal (styles.cssostyles.scss), importa Tailwind y la configuración Ignite UI tema de Tailwind.

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

    Si tu proyecto se utilizasass para estilismo:

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

    Asegúrate de que la ruta de importación se resuelva correctamente desdenode_modules​

    Using Ignite UI Custom Utility Classes

    Eligniteui-theming paquete incluye una configuración personalizada de Tailwind que expone tokens de diseño Ignite UI mediante clases de utilidad. Estos incluyen apoyo para:

    • Colores y colores de contraste

    • Elevation (shadows)

    • Typography styles

    Veamos cómo usar cada uno.

    Color Utility Classes

    Usa Ignite UI tokens de color directamente en tu HTML:

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

    Puedes explorar el sistema de color completo de Tailwind en la documentación de colores de Tailwind y aplicarlo usando los nombres de clase Ignite UI proporcionados.

    Shadow utility classes

    Puede agregar profundidad utilizando cualquiera de los niveles de elevación predefinidos (de 0 a 24):

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

    Puedes encontrar todas las clases de utilidad relacionadas con sombras proporcionadas por Tailwind en la documentación de sombras de caja de Tailwind

    Typography custom utility styles

    Para aplicar la fuente, añade lafont-ig clase a un elemento de nivel superior. También puedes definir el tamaño base de la fuente usando latext-base clase de utilidad. Ofrecemos clases utilitarias personalizadas para cada nivel tipográfico (por ejemplo, h1, h2, cuerpo-1). Úsalos así:

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

    Cada clase aplica todos los ajustes de fuente, espaciado y tamaño necesarios según la escala de tipo Ignite UI.

    Note

    Estas utilidades de tipografía personalizada solo funcionan fuera de.ig-typography Si tienes que poner laig-typography clase CSS en un elemento de nivel superior, estos estilos no se aplicarán.

    Sample

    En el ejemplo siguiente, verás una página 404 construida íntegramente con clases utilitarias de Tailwind, incluyendo nuestracustom utilities forshadows,colors ytypography.

    Puede ver cómo aplicar estilo a cada componente consultando la sección Estilo en su respectivo tema de documentación.

    Note

    Este ejemplo es ficticio y totalmente personalizado, no forma parte de la biblioteca de componentes Ignite UI.

    Summary

    Con solo unos pocos pasos de configuración, puede combinar el enfoque de utilidad de Tailwind con el sólido sistema de diseño de Ignite UI. Esta integración le permite crear rápidamente componentes de interfaz de usuario temáticos y coherentes utilizando tokens bien definidos para el color, la elevación y la tipografía, directamente desde su HTML.

    Additional Resources


    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.