Open-source by Keenthemes!Support our KtUI and ReUI open-source projects and help with growth.
Star on Github

Metronic 9 w/ Vue - Tailwind CSS definitions missing??


Hi,

I have a brand new Vue project which I've created according to your Vue integration instructions and I'm having trouble troubleshooting why many of the Tailwind style definitions are not being applied as in your demo.

Basic elements like inputs and buttons are missing basic styling and are not being rendered correctly.

Sample screenshot: https://imgur.com/a/W0dKMkv

I've uploaded my source code to for your review.

Your help is greatly appreciated.


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


Here is the code for that same input element, by the way:

<div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
<form @submit.prevent="addProduct">
<div class="d-flex flex-column mb-7 fv-row">
<label class="required fs-6 fw-semibold mb-2">Product Name</label>
<input type="text" class="form-control form-control-solid" v-model="newProduct.name" required />
</div>
...



Hi,

Thank you for reaching out to us.

Could you please clarify which Metronic version you are using?

In the latest Metronic 9 you can use kt-input class.

<input class="kt-input" type="text">


Regards,
Lauris Stepanovs,
Keenthemes Support Team


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