angular-material-tokens-tailwindcss

Este plugin te permite utilizar los tokens de Angular Material directamente en tus proyectos con Tailwind CSS. Así puedes aprovechar los valores de color, tipografía, sombras y radio de borde definidos por Angular Material, integrándolos fácilmente en tus utilidades y clases de Tailwind.

Características

• Acceso directo a los tokens de Angular Material como variables CSS.
• Integración sencilla con Tailwind CSS.
• Facilita la personalización de temas y estilos en proyectos Angular.
• Incluye tokens de colores, tipografía, sombras y radios de borde.

Instalación

npm install angular-material-tokens-tailwindcss

Uso

1. Asegúrate de tener Angular Material y Tailwind CSS instalados en tu proyecto.

2. Importa el archivo principal del plugin en tu CSS global, por ejemplo en src/styles.css o el archivo raíz de Tailwind:

   @plugin "angular-material-tokens-tailwindcss/src/v4/index.css";

3. Ahora puedes usar los tokens como variables CSS en tus clases personalizadas o extender Tailwind para usarlos en tus utilidades.

   Ejemplo:

   <button class="px-4 py-2 rounded-corner-medium bg-primary text-on-primary">
     Botón Angular Material + Tailwind
   </button>

Personalización

Puedes sobrescribir los tokens de Angular Material en tu tema para adaptar los estilos a tus necesidades.

Contribuciones

¡Las contribuciones son bienvenidas! Si tienes ideas o mejoras, abre un issue o envía un Pull Request.

Licencia

MIT License