Docs for vue talk about input.css file that doesn't exist

[thepurpleblob]

The docs page for installing flowbite in Vue (https://flowbite.com/docs/getting-started/vue/) , introduce a file called input.css

This file does not exist in the Vue template created by the suggested command...

npm create vite@latest flowbite-app -- --template vue

So, it may be (in fact, is) confusing. Should that file just be imported the same as styles.css or is it something else?

[thepurpleblob]

In fact (in case it helps somebody else), I eventually got it to work with just a single css file (in my case 'style.css') which I import in main.css. No input.css.

Contents are...

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

The fact that it was all in the one file and the exact order of these items is critical for it to work at all and not get a load of warnings. This is not really as described/implied in the documentation.

EDIT:
Just thinking about this. Clearly, some of those imports set up variables that are used in later imports. The issue for me was that if you get this wrong it just fails silently. The theme is completely screwed up and it's not at all obvious why. Hence the plea to make it clear in the docs what the correct import order is (and why it matters).

[OJCodeCanvas]

Following up with a working solution and what I think the docs need to change.

Root cause

There are two problems in the current Vue guide:

1. input.css doesn't exist. npm create vite@latest -- --template vue generates src/style.css, not input.css. The mismatch is confusing, especially for people new to Vite.

2. The CSS directives are split across separate steps, implying they can go in any order or even separate files. The order is actually critical — each directive depends on variables set by the previous one. When the order is wrong, the theme breaks silently with no errors or warnings.

Working configuration

All directives must go in src/style.css (the file Vite creates), in this exact order:

/* 1. Font (optional, match your chosen theme) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* 2. Flowbite theme — must come before tailwindcss */
@import "flowbite/src/themes/default";

/* 3. Tailwind CSS — must come after the theme, before the plugin */
@import "tailwindcss";

/* 4. Flowbite plugin */
@plugin "flowbite/plugin";

/* 5. Source scanning */
@source "../node_modules/flowbite";

The reason order matters: the Flowbite theme (step 2) defines CSS custom properties that Tailwind (step 3) needs when generating utility classes. If @import "tailwindcss" comes first, those variables don't exist yet and the theme is silently ignored.

Suggested doc changes

• Rename input.css → src/style.css throughout the Vue guide
• Show all five CSS directives in a single consolidated block (not split across steps 2/3/4)
• Add a note that import order is critical and that failures are silent
• Confirm that src/main.js already imports style.css by default (so no extra wiring is needed)

Happy to open a PR against content/getting-started/vue.md if that would be helpful.