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

    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:

    • 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

    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>

    Cada clase aplica todos los ajustes de fuente, espaciado y tamaño necesarios según la escala de tipo 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.

    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.