Metronic v9.2 Tailwind v4 (html starter kit), problem generating styles.css
I bought and downloaded the latest version of Metronic to use the HTML starter kit, but I'm having problems generating the styles.css.
I did follow the installation instructions (https://keenthemes.com/metronic/tailwind/docs/getting-started/installation) succesfully, and npm run build finishes successfully:
When running the page the styles are not applied correctly, even I validated that the styles.css exist and that the <scrips> does load the file correcty.
<strong>IF I COPY THE styles.css FROM THE STARTER KIT dist/, TO THE dist/ folder generated when running npm run build, styles are fixed. I compared them, and they are a bit different. Why?? </strong>
Replies (7)
Hi, thanks for sharing this helpful discussion! I’ve been exploring Metronic v9.2 with Tailwind v4 myself, and your tips on generating style.scss are really insightful. By the way, I recently shared a bathroomremodelingarvada.com project that turned a small space into a cozy, modern retreat. Thought it might inspire some creative ideas too!
Hi Roger Almató
Could you please try with the latest version?
Please try to remove the node_modules and package-lock.json files. Then retry with installation.
npm install
npm run build Thanks
Hi Roger Almató
Here is the workaround. There is a bug; we will fix it.
The @source directive should point to the source KTUI files, not the dist folder. Update your src/css/styles.css:
/* Change this line: */
@source '../../dist/assets/vendors/ktui/';
/* To this: */
@source '../../node_modules/@keenthemes/ktui/';
Hello Thanks for the reply, something got fixed but still not the same. Based on what you mentioned, my src/css/styles.css is like:
<pre lang="html">
/* Tailwind core */
@import "tailwindcss";
/* Tailwind scan sources */
@source "../../node_modules/@keenthemes/ktui/";
/* Theme configs */
@import "./config.ktui.css";
/* KTUI styles */
@import "../../node_modules/@keenthemes/ktui/styles.css";
/* Metronic components */
@import "./components/index";
/* Demos */
@import "./demos/demo1.css"; See how it currently looks:
<img src=" />
But if I copy the dist/assets/css/ folder from the one available in metronic-html-starter-kit:
<img src=" />
<img src=" />
<img src=" />
I have used the image tag but apparently not working, now the css are full screen but the left navigation bar its not well style, drawing left menu doesn't work either...