Search code examples
tailwind-csssveltesveltekittauriflowbite

Fail to implement a custom theme over Tailwindcss/Flowbite

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.

enter image description here enter image description here

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: enter image description here
  • styles.css: enter image description here
  • index.html: enter image description here
Solution

  • Consider checking:

    • background-300 or background.300 is properly configured as a backgroundColor/color value.
    • The file that the <body> tag appears in is covered by the content file globs within the Tailwind configuration.
    • String concatenation/interpolation is not used to construct the class name.