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:
npm run build
npm warn Unknown user config "always-auth". This will stop working in the next major version of npm.
> metronic-tailwind-html@9.2.7 build
> npm run build:css && npm run build:js --mode=development
npm warn Unknown env config "always-auth". This will stop working in the next major version of npm.
npm warn Unknown user config "always-auth". This will stop working in the next major version of npm.
> metronic-tailwind-html@9.2.7 build:css
> npx @tailwindcss/cli -i ./src/css/styles.css -o ./dist/assets/css/styles.css
npm warn Unknown env config "always-auth". This will stop working in the next major version of npm.
npm warn Unknown user config "always-auth". This will stop working in the next major version of npm.
≈ tailwindcss v4.1.11
Done in 321ms
npm warn Unknown cli config "--mode". This will stop working in the next major version of npm.
npm warn Unknown env config "always-auth". This will stop working in the next major version of npm.
npm warn Unknown user config "always-auth". This will stop working in the next major version of npm.
> metronic-tailwind-html@9.2.7 build:js
> webpack --mode=development
assets by path vendors/ 7.73 MiB
assets by status 6.84 MiB [compared for emit]
assets by path vendors/keenicons/fonts/ 6.82 MiB 12 assets
assets by path vendors/@form-validation/*.css 25.4 KiB 2 assets
assets by status 909 KiB [emitted] 9 assets
assets by path js/ 1.21 MiB
assets by status 1.17 MiB [big] 2 assets
+ 3 assets
assets by path /vendors/ 701 KiB
assets by status 456 KiB [compared for emit] 3 assets
assets by status 245 KiB [emitted]
asset /vendors/leaflet/leaflet.bundle.js 231 KiB [emitted]
asset /vendors/leaflet/leaflet.bundle.css 14.5 KiB [emitted]
runtime modules 1.63 KiB 7 modules
modules by path ./node_modules/ 745 KiB
modules by path ./node_modules/@keenthemes/ktui/src/ 676 KiB
modules by path ./node_modules/@keenthemes/ktui/src/components/ 651 KiB 65 modules
modules by path ./node_modules/@keenthemes/ktui/src/helpers/*.ts 18.4 KiB 4 modules
./node_modules/@keenthemes/ktui/src/index.ts 6.4 KiB [built] [code generated]
modules by path ./node_modules/@popperjs/core/lib/ 68.8 KiB 57 modules
modules by path ./src/ 115 KiB
modules by path ./src/core/ 73.5 KiB 10 modules
modules by path ./src/app/ 41.6 KiB
modules by path ./src/app/datatables/ 13.2 KiB 2 modules
./src/app/layouts/demo1.js 3.5 KiB [built] [code generated]
./src/app/widgets/general.js 24.9 KiB [built] [code generated]
webpack 5.99.9 compiled successfully in 1535 msWhen 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.
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??
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!
Any idea of what else is missing Faizal?
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 buildThanks
Hi Roger Almató
We will check it and provide you solution.
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...
Any idea of what else is missing Faizal?
