Table-related Metronic Classes Not Taking Effect in Angular 19 Project
Hi Metronic Team,
I’m currently using Metronic with an Angular 19 project, and I’ve run into an issue where table-related classes (specifically thead>th gap classes etc.) don’t seem to be taking effect as expected (i cant see it inspect element). The styles aren’t being applied, even though I’ve confirmed the correct class names and structure in the DOM.
Here’s a quick overview:
Metronic version: 9.1.2
Angular version: 19
Project setup: Angular + Nx
.table thead td, .table thead th, .table tfoot td, .table tfoot th {
} ---> coming out empty in angular
but in html css i can see this
.table thead td, .table thead th, .table tfoot td, .table tfoot th {
background-color: var(--tw-table-head-background-color);
color: var(--tw-gray-600);
font-weight: 500;
font-size: 0.8125rem;
line-height: 1.125rem;
vertical-align: middle;
}
i have added both postcss, tailwind and plugin setup as per guide and everything else is working except some classes like these getting miss. I also tried a normal angular setup without nx monorepo but the result was same.
packages used in project
"postcss": "^8.5.3",
"postcss-import": "^16.1.0",
"postcss-nesting": "^13.0.1",
"postcss-preset-env": "^10.1.5",
"postcss-url": "~10.1.3",
"sass": "^1.83.0",
"tailwindcss": "^3.4.17",
Would appreciate any guidance on getting the default table styles to work properly in this setup. If there’s any custom module or additional step I’m missing, please let me know.
Thanks a lot, in advance!
Best regards,
Replies (3)
ok, on further investigation max-w-[%] classes also not generating for my setup.
Hi,
Please make sure you used proper format like: max-w-[80%]. Also please double check it the build is working upon your update. In the tailwind config file please check if content property is pointed to your html code path where tailwind scans for classes in your code to add into into compiled css file.
Regards.
Sean
Hello, the build is working proper, otherwise no style would have been taking effect, I solved the max-w problem with a page with statically adding max-w classes and other classes which i call on runtime dynamically. Please tell me what to do with table header classes though, as its coming up empty but all other table classes are generating fine.
thanks
