Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Trouble with Metronic 9 quick start


Metronic v.9.0.1

Followed quick start steps 1-6

Issue #1
During step 6 the process never finishes; the last line output is:
webpack 5.92.1 compiled successfully in 5500 ms

However pressing CTRL+C gives message:
Terminate batch job (Y/N)?

Process terminates regardless of answer.

Issue #2
The above also generates several blocks of invalid CSS where there is no selector, e.g.:


.demo1.sidebar-collapse .sidebar .sidebar-content {
overflow: hidden;
}

{
width: var(--tw-sidebar-width) !important;
transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing) !important;
height: var(--tw-header-height) !important;
width: var(--tw-sidebar-defualt-width) !important;
display: none !important;
padding-left: var(--tw-sidebar-width) !important;
transition: padding-left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing) !important;
}


Issue #3
The CSS and HTML do not include custom classes but rather is full of default Tailwind classes making it a mess to read, e.g.:


<div class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]" tabindex="0">
<span class="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px]">
<i class="ki-filled ki-element-11 text-lg">
</i>
</span>
<span class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary">
Dashboards
</span>
<span class="menu-arrow text-gray-400 w-[20px] shrink-0 justify-end ml-1 mr-[-10px]">
<i class="ki-filled ki-plus text-2xs menu-item-show:hidden">
</i>
<i class="ki-filled ki-minus text-2xs hidden menu-item-show:inline-flex">
</i>
</span>
</div


For reference the entirety of the src/css/styles.css file is merely:


/* Tailwind core */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";


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


Hi David,

Regarding Issue #1:
The message indicates that the compilation has finished but is running in watch mode. This means that if any changes are made to the source files, the compiler will automatically rebuild the assets.

Thank you



Hi,

Thank you for your feedback.

We will check the broken CSS issues and try to provide a fix asap.
Regarding the Tailwind classes usage, this is our approach to use less custom classes and use the power of Tailwind classes as much as possible.

Regards.



Thank you for the quick reply.

Regarding custom classes I am referring to the "Product Ready Design System" graphic at the top of the Theme Forest page. The code generated with the quick start steps resembles the upper "Basic UI with a dense codebase" example rather than the expected lower "Perfect UI & clean code".



Hi,

For the components, we offer reusable custom classes, such as cards, buttons, input, badges, etc. These classes are reusable across pages so using the custom classes is reasonable.

However for the layouts we will be using the tailwind utility classes since layout is not a reusable component. We do plan to release more layouts(unique demos) in the upcoming updates.

You may consider Metornic Composer to manage the Metronic 9 HTML code more efficiently.

Regards.



Understood

Please do update once the CSS fix is in place



I am also seeing the CSS break when updating src/css/styles.css to create custom classes with @apply

I suspect this is related to the issue above



Hi happy,

We have just released Metronic v9.0.2 and fixed the CSS errors.
You can check the changelog here.

Regards



Thank you for the quick turnaround; the CSS is much better.

There is however still 1 error and some warnings:

Missing property value:

.range:focus::-webkit-slider-thumb, .range:focus::-webkit-slider-thumb {
box-shadow: ;
}


Empty rule sets:

.menu-default .menu-item {
}

.dropdown-toggle {
}


Missing standard property "appearance" for compatibility:

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}

[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}


Vertical align is ignored with display: block

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}



step 5 also outputs 3 warnings including a memory leak however pasting the info here will not let me submit due to "inappropriate content"



Hi,

Thanks for the feedback.

Noted and we will check further.
Please be informed that some warnings(appearance, display block) are caused by Tailwind(not a major issue). We will fix it as much as possible.

Regards.


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