Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI
Light
Dark
System
Ask  Question

Issues Integrating Metronic v9.1.2 with Angular 17 & 19 + Tailwind CSS


Hi,

I’ve been working hard to integrate the Metronic v9.1.2 theme into my Angular 17 and 19 project while using Tailwind CSS v3.4.17. I followed the provided instructions step by step, but I’m still facing issues with the final integration.

Details of My Setup:
Metronic Version: v9.1.2
Angular Versions: 17 & 19
Tailwind CSS Version: 3.4.17
Frontend Stack: Metronic + Tailwind CSS
Project Preview: metronic.trimlnk.com

Challenges Faced:
Header Menu Malfunctioning: The header menu is not functioning properly—some interactions are broken.
CSS & JS Issues: Certain styles and scripts seem to be missing, causing inconsistencies in layout and functionality.
Integration Steps Followed: I carefully followed the official Metronic documentation but still couldn’t get the expected results.

I’ve put in a lot of effort to make this integration work, and I’d really appreciate any guidance or troubleshooting tips. Has anyone successfully integrated Metronic v9.1.2 with Tailwind CSS in Angular 19?

Looking forward to your advice!

Thanks in advance


user
Seyyed Reza 1 month ago
Angular Metronic Tailwind
3 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Faizal Author1 month ago

Hi Seyyed Reza

That's great to hear. If you have any questions or need assistance, feel free to ask.

Thanks


user
Seyyed Reza 1 month ago
Deleted comment
user
Faizal Author1 month ago

Hi Seyyed Reza

Sorry for the delay. We are checking the issue, we will revert to you as soon as possible.

Thanks


user
Seyyed Reza 1 month ago

Hello Faizal

I successfully integrated Metronic v9.1.2 with Angular 19.

Details of My Setup:
Metronic Version: v9.1.2
Angular Versions: 19.1.6
Tailwind CSS Version: 3.4.17
Frontend Stack: Metronic + Tailwind CSS
Project Preview: metronic.trimlnk.com

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(