New Product!SaaSify - Animated Landing Page Template built with Next.js, Tailwind, Shadcn UI, ReUI & MagicUI Components
Preview SaaSify

Metronic in Laravel 12


Hi Sean...
We start build a new project with Metronic version 9.xx (Tailwind).
We use it with the new version of Laravel (12.xx).
This version use a starter kit (livewire) and it's managed by Flux (Caleb Porzio).
Flux have also a pro version (we have it)

Something strange happen after integrate Metronic version 9.xx (Tailwind).
We have read and apply the Guide with all Step.

The Css of Flux and Metronic maybe have conflict ...some advise about it?

Example of problem:
All the input for the login isn't showed.


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 (1)


Hi

Could you please check the browser console for any JavaScript errors?

Since both Metronic and Flux are using Tailwind, there’s a chance of class or layer conflicts, especially around base styles.

Check if Flux or Metronic is resetting any input styles (@layer base or @apply on input).

Try temporarily commenting out Metronic’s styles to confirm if they’re the cause.

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