I am trying to implement my custom theme into my application made with Tauri, Sveltekit/Tailwindcss & Flowbite.
However, I can see all the colors I have defined in styles.css and in tailwind.config.css available on the <html> tag, but the tailwind classes doesn't seem to apply on the <body> tag.
I can tell that the dark mode is working since the class dark is removed when I toggle it and the colors are switched to the one I've defined in my styles.css :root.
I can also say that tailwindcss is working since I can see the background color changing when I set dark:bg-primary-300 for example.
It does not work when I set dark:bg-background-800.
Am I missing something ? Any help would be appreciated ! Thanks !
My configuration:
package.json:
"dependencies": {
"@popperjs/core": "^2.11.8",
"@sveltejs/kit": "^1.27.7",
"@tauri-apps/api": "^1.5.1",
"flowbite": "^2.2.0",
"flowbite-svelte": "^0.44.20",
"tailwind-merge": "^2.1.0"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.1.1",
"@sveltejs/vite-plugin-svelte": "^2.4.2",
"@tauri-apps/cli": "^1.5.6",
"@tsconfig/svelte": "^5.0.0",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.32",
"svelte": "^4.0.5",
"svelte-check": "^3.4.6",
"tailwindcss": "^3.3.6",
"tslib": "^2.6.0",
"typescript": "^5.0.2",
"vite": "^4.4.4"
}
svelte.config.js:
import adapter from '@sveltejs/adapter-auto';
import {vitePreprocess} from '@sveltejs/vite-plugin-svelte';
const config = {
kit: {
adapter: adapter()
},
preprocess: vitePreprocess(),
};
export default config;
tailwind.config.js:
styles.css:
index.html:
Consider checking:
background-300orbackground.300is properly configured as abackgroundColor/colorvalue.<body>tag appears in is covered by thecontentfile globs within the Tailwind configuration.