Metronic 9 missing classes
I've noticed several classes are missing in assets/css/styles.css file.
They are present in Docs tho /docs/dist/assets/css/styles.css
For example:
This menu page
https://keenthemes.com/metronic/tailwind/docs/components/menu
Uses this block to show the accordion arrow inside a menu:
<span class="menu-arrow">
<i class="ki-outline ki-plus menu-item-show:hidden"></i>
<i class="ki-outline ki-minus hidden menu-item-show:block"></i>
</span>But there is no
menu-item-show:block class in styles.cssSo, when the accordion is opened, there is no icon.
Another example:
<a class="menu-link !py-1" href="#">
<span class="menu-icon w-4"></span>
<span class="menu-title !text-gray-500">
<span class="hidden menu-item-show:block">
Show less
</span>
<span class="block menu-item-show:hidden">
Show 3 more
</span>
</span>
</a>!py-1 is missingw-4 is missingAnd other classes too.
This results in a very hard time following the docs and using the examples.
Can you please fix that as soom as possible?
Thanks
Replies (6)
Hi,
When you use the Metronic Tailwind version after adding new classes to your pages you will need to recompile the assets since Tailwind is an advanced CSS framework that comes with its own built tools to compile only used classes. For more info please check the Quick Setup guide.
The default demos of Metronic 9 Tailwind come with precompiled CSS files that include all the classes used in the default demos and pages. Whenever you add a new class from docs you will need to recompile the CSS.
If you need any further clarifications please let us know.
Regards.
Hello Sean! thanks for the quick reply
Unfortnelly, I think we still have an issue. Maybe I wasn't clear enought in my first message.
I'm not adding new classes. I'm trying to use what is precompiled in the CSS.
What I'm saying is:
Some classes in the DOCS file are NOT present in the precompiled CSS files (I'm using Demo1).
You can check for yourself here:
https://keenthemes.com/static/metronic/tailwind/docs/dist/assets/css/styles.css (public, demo css file)
Some examples are:
.menu-item.show>.menu-link .menu-item-show\:block {
display: block
}
// ...
.w-4 {
width: 1rem
}
// ...
.\!py-1 {
padding-top: .25rem!important;
padding-bottom: .25rem!important
}Those classes names are present in the DOCS but are not present in the precompiled filed. They are not present even If I compile everything again.
(using 9.0.6)
Hi,
Docs use different HTML with other classes while the demos use different HTML code. If you use any HTML code with new classes from the docs you will need to recompile your assets so Tailwind will add any newly used classes into your CSS.
Please check this related discussed.
Regards.
When you copy and paste any code from docs into your demo you will need to recompile the assets using Webpack.
Got it, thanks!
I still think its a little bit wierd, but I got your point.
Its really weird copying example codes from docs page (I'm not copying the DOM (source code) from the page, but the HTML section on the docs.
For example:
https://keenthemes.com/metronic/tailwind/docs/components/menu#accordion-basic
This includes some classes not pre-compiled. So it does not work inside demo1.
It feels weird. But I got the point.
Thanks for clarifying that
Hi 
,
Glad to hear that you figure it out.
This is how Tailwind works and is technically a good approach. Eventually, in your productions your CSS will contain only classes that are used in your code.
Regards,
Sean
