CSS is 254KB of unused classes

[FedericoGarciaGarcia]

Description

I followed exactly each step of the guide making a fresh new Svelte (not Sveltekit) project and the generated CSS file in dist/assets is 254KB.

I didn't import any Flowbite components or used any Tailwind classes, yet the generated CSS file is including pretty much all of Tailwind.

The FAQ mentions using PurgeCSS in these cases, but it seems the npm package cannot be installed, my understanding is it's meant for Tailwind v3 but Flowbite uses v4 (I think?), which should already be including only the necessary CSS in the build:

npm error  dev tailwindcss@"^4.1.17" from the root project
npm error Could not resolve dependency:
npm error peer tailwindcss@"^3.3.0" from vite-plugin-tailwind-purgecss@0.3.5

This is the app.css

@import "tailwindcss";
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';
@plugin 'flowbite/plugin';
@custom-variant dark (&:where(.dark, .dark *));

@source "../node_modules/flowbite-svelte/dist";
@source "../node_modules/flowbite-svelte-icons/dist";

This is App.svelte

<script>
  import "./app.css";
</script>

Hello

Is there any step I'm missing?

Minimal Reproduction

// About compilation, not code

Steps to Reproduce

1. Follow guide making a fresh new Svelte (not Sveltekit) project: https://flowbite-svelte.com/docs/pages/quickstart
2. Run npm run build
3. CSS file in dist/assets is 254KB

Environment

System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (10) arm64 unknown
    Memory: 7.96 GB / 23.45 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 22.21.1 - /usr/local/share/nvm/versions/node/v22.21.1/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.9.4 - /usr/local/share/nvm/versions/node/v22.21.1/bin/npm
    pnpm: 10.26.2 - /usr/local/share/nvm/versions/node/v22.21.1/bin/pnpm
  npmPackages:
    flowbite: ^4.0.1 => 4.0.1 
    flowbite-svelte: ^1.31.0 => 1.31.0 
    svelte: ^5.46.1 => 5.46.1 
    vite: ^6.4.1 => 6.4.1

Relevant Logs / Console Output

Screenshots / GIF (optional)

No response

Additional Context (optional)

No response

Checklist

• I have searched existing issues and discussions
• I have provided a minimal and runnable reproduction
• I am using the latest version of Flowbite-Svelte

[am283721]

I just noticed the same thing this morning with my SvelteKit project. I tried every suggestion that I could find online, to no avail.

[FedericoGarciaGarcia]

I just looked at the CSS used in the examples in the Flowbite website (examples are in iframes), and for example the <Alert> iframe has +400KB of CSS in its <style> tag.

Is this normal? Out of curiosity I separated the <style> into a CSS file and ran PurgeCSS on it. It went from +400KB to 27KB.

[stelcodes]

According to the Tailwind docs this should be handled by the Tailwind Vite plugin.

EDIT: Oh I see, the components use Tailwind classes themselves hard coded into node_modules/flowbite-svelte/dist/flowbite.css and these aren't tree shaken by the tailwind vite plugin I guess. Could flowbite @import "tailwind"?

[am283721]

According to the Tailwind docs this should be handled by the Tailwind Vite plugin.

Agreed, but it doesn't seem to be handling it. My build is also including a 280kb css file containing everything imported from tailwind.

Here's my vite.config.ts file, which I'm assuming is similar to @FedericoGarciaGarcia

import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import mkcert from 'vite-plugin-mkcert';

export default defineConfig({
	plugins: [mkcert(), tailwindcss(), sveltekit()],
	optimizeDeps: {
		exclude: ['@node-rs/argon2', '@node-rs/bcrypt']
	}
});

I wish I knew more about Vite plugins and Tailwind to better debug the situation, but unfortunately I'm at a loss right now. I created a brand new sveltekit project with tailwind, but without flowbite-svelte and the main css file that is built ends up being 12kb. All of the unused rules are removed.

[am283721]

EDIT: Oh I see, the components use Tailwind classes themselves hard coded into node_modules/flowbite-svelte/dist/flowbite.css and these aren't tree shaken by the tailwind vite plugin I guess. Could flowbite @import "tailwind"?

I believe the purpose of the following lines in the app.css file is to tell tailwind to also search through those directories and remove unused rules:

@source '../node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}';
@source '../node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}';
@source '../node_modules/flowbite';

[stelcodes]

Wait I think this works:

@import 'tailwindcss';
@plugin 'flowbite/plugin';
@custom-variant dark (&:where(.dark, .dark *));

@source "../../node_modules/flowbite-svelte/dist/alert";

Just referencing the specific components that you use. Result:

zsh ❯ find .svelte-kit/output/client/_app/immutable -type f -name "*.css" -exec du -h {} +
 36K    .svelte-kit/output/client/_app/immutable/assets/0.ChR8JH38.css
4.0K    .svelte-kit/output/client/_app/immutable/assets/2.CD54FDqW.css

[am283721]

Ohhhh interesting... I didn't reference the specific components, since I'm using too many to list explicitly, but I added another ../ to the front of the path and my 280kb file is now 37kb!

I don't quite understand since my app.css file is only 1 folder deep compared to node_modules, but maybe it's because it's being imported by a layout file that's 2 folders deep? All of the docs show it as @source '../node_modules...

Either way, the top of my app.css file now looks like this:

@import 'tailwindcss';
@plugin 'flowbite/plugin';

@source './src/**/*';
@source './**/*';
@source '../../node_modules/flowbite-svelte/**/*';
@source '../../node_modules/flowbite-svelte-icons/**/*';
@source '../../node_modules/flowbite/**/*';

Thank you for bouncing ideas back and forth, I appreciate it @stelcodes !

@FedericoGarciaGarcia try it out and see what happens

[stelcodes]

@am283721 That could be it wrt the importing, for reference my css file was src/routes/layout.css and imported in src/routes/+layout.svelte

[am283721]

I spoke too soon. I think the reason the size dropped is because those paths in fact were incorrect. Once I previewed the site all of the styles were broken. Back to the drawing board. I want to test if using explicit imports of components in the svelte files will have an effect. i.e. import Alert from "flowbite-svelte/Alert.svelte"; Or your suggestion of explicit @source ing of components in the css file

[stelcodes]

@am283721 Just a note, I don't think you need to @source from node_modules/flowbite.

[FedericoGarciaGarcia]

Here's my vite.config.ts file, which I'm assuming is similar to @FedericoGarciaGarcia

This is mine:

import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

// https://vite.dev/config/
export default defineConfig({ plugins: [tailwindcss(), svelte()] });

@FedericoGarciaGarcia try it out and see what happens

Same case, changing the path to ../.. is a wrong path so the file reduces in size but because styles are not applied.