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;
Consider checking:
background-300
orbackground.300
is properly configured as abackgroundColor
/color
value.<body>
tag appears in is covered by thecontent
file globs within the Tailwind configuration.