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>
</divFor reference the entirety of the src/css/styles.css file is merely:
/* Tailwind core */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
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 
,
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.
