Integración CSS de Tailwind con Ignite UI para WebComponents

    Ignite UI para WebComponents ofrece personalización completa de la tematización mediante variables CSS. En esta guía, aprenderás cómo integrar Tailwind CSS en tu proyecto y mejorarlo con clases utilitarias personalizadas que proporciona eligniteui-theming paquete. Estas clases exponen Ignite UI tokens de diseño para colores, sombras y tipografía, permitiendo una experiencia de estilo fluida y enfocada en la utilidad.

    Descripción general

    Esta guía asume que ya tienes instalado Ignite UI Theming. Si no, corre:

    npm install igniteui-theming

    Tailwind Setup

    Empieza instalando Tailwind CSS, según la herramienta o framework de construcción que elijas, siguiendo la guía oficial de instalación de Tailwind.

    Una vez configurado Tailwind, importa tanto Tailwind como la configuración de temática Ignite UI en tu hoja de estilos global.

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

    Si tu proyecto se utilizasass para estilismo:

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

    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

    Nuestras clases de utilidad de color se basan en tokens de cada Ignite UI tema. Puedes aplicarlos directamente en tu HTML:

    Puedes explorar el sistema completo de color de Tailwind en este tema 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):

    Puedes encontrar todas las clases utilitarias relacionadas con sombras que ofrece Tailwind en este tema

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

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

    Sample

    En el ejemplo de abajo, verás una página 404 construida íntegramente con las clases utilitarias de Tailwind, incluyendo nuestras "utilidades personalizadas" para "sombras", "colores" y "tipografía".

    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, puedes combinar el enfoque de utilidad de Tailwind con el robusto sistema de diseño de Ignite UI. Esta integración te permite construir rápidamente componentes de interfaz de usuario consistentes y temáticos usando tokens bien definidos para color, elevación y tipografía, directamente desde tu HTML.