Cannot apply unknown utility class bg-primary

[Kens-Jaswal]

Hi Everyone,

kindly do help me on this, its humble request...am stuck in between.

---

daisyui": "^5.0.38",
"tailwindcss": "^4.1.7",
"svelte": "^5.33.4",

Migrate project to latest version of above packages, after using "npm run build" getting below error, its denied to bg-primary class....kindly help what to do...... 🙏

Error: Cannot apply unknown utility class bg-primary. Are you using CSS modules or similar and missing @reference? https://tailwindcss.com/docs/functions-and-directives#reference-directive

________________________ app.css
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

@import 'tailwindcss';
/* below line is required to activate dark-theme as a css selector */

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@config "../tailwind.config.js";

@plugin "daisyui";

@plugin "daisyui/theme" {
name: 'light';
default: false; /* set as default /
prefersdark: true; / set as default dark mode (prefers-color-scheme:dark) */

--color-primary: oklch(0.6826 0.169457 256.194);
--color-primary-content: oklch(0.8928 0.0529 255.42);

--color-secondary: oklch(0.3617 0.1869 270.87);
--color-secondary-content: oklch(0.8939 0.053358 284.1031);

--color-accent: oklch(0.8403 0.0555 255.22);
--color-accent-content: oklch(0.9683 0.0069 247.9);

--color-neutral: oklch(0.5452 0 0);
--color-neutral-content: oklch(1 0 0);

--color-base-100: oklch(0.9699 0.0013 106.42);
--color-base-200: oklch(0.9431 0 0);
--color-base-300: oklch(0.9242 0.0011 197.14);
--color-base-content: oklch(0.2781 0.0296 256.85);

--color-info: oklch(0.5878 0.1377 258.05);
--color-info-content: oklch(1 0 0);

--color-success: oklch(0.6731 0.1624 144.21);
--color-success-content: oklch(1 0 0);

--color-warning: oklch(0.6903 0.1422 69.42);
--color-warning-content: oklch(1 0 0);

--color-error: oklch(0.6159 0.1872 28.06);
--color-error-content: oklch(1 0 0);

}

[data-theme='dark'] {
--color-primary: oklch(0.6769 0.1477 238.31);
--color-primary-content: oklch(0.8557 0.0224 226.18);

--color-secondary: oklch(0.189 0.0345 265.31);
--color-secondary-content: oklch(0.7507 0.0902 283.3);

--color-accent: oklch(0.563 0.0582 246.4);
--color-accent-content: oklch(0.8831 0.0199 260.17);

--color-neutral: oklch(0.2972 0 0);
--color-neutral-content: oklch(0.8699 0 0);

--color-base-100: oklch(0.2099 0.0341 263.44);
--color-base-200: oklch(0.1726 0.0416 264.63);
--color-base-300: oklch(0.3485 0 0);
--color-base-content: oklch(0.8699 0 0);

--color-info: oklch(0.7706 0.1176 258.15);
--color-info-content: oklch(1 0 0);

--color-success: oklch(0.6731 0.1624 144.21);
--color-success-content: oklch(1 0 0);

--color-warning: oklch(0.7972 0.1638 69.62);
--color-warning-content: oklch(1 0 0);

--color-error: oklch(0.6159 0.1872 28.06);
--color-error-content: oklch(1 0 0);

}

@theme {
--font-roboto: 'Roboto', sans-serif;
--font-family: 'Roboto', sans-serif;
/--font-sans: 'Roboto', 'Arial', 'sans-serif';/
--text-xs: 0.625rem;
--text-xs--line-height: calc(1 / 0.625);
--text-sm: 0.75rem;
--text-sm--line-height: calc(1.25 / 0.75);
--text-base: 0.875rem;
--text-base--line-height: calc(1.5 / 0.875);
--text-lg: 1rem;
--text-lg--line-height: calc(1.75 / 1);
--text-xl: 1.25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.375rem;
--text-2xl--line-height: calc(2 / 1.375);

/* border radius */
--radius-selector: 0rem;
/*--radius-field: 0.5rem;*/
/* --radius-box: 0.5rem; */
/* base sizes */
--size-selector: 0.25rem;
--size-field: 0.25rem;
--size-textarea: 4rem;
/* border size */
--border: 0;
/* effects */
--depth: 1;
--noise: 0;

--color-primary-muted: green;

}
__________________ tailwind.config.js
module.exports = {
content: ['./your-files/**/*.{html,js}']
};

[saadeghi]

Can you please share a minimal reproduction link where I can tun the project and see the issue?

[Kens-Jaswal]

sorry do not have live link now, its working on localhost only....I shared code above can you check if there is any issue?

+page.svelte

Home