[Bug] {docs} - Inadequate instructions to actually get started

[Hugh-Ryan]

Is this a regression?

No

Description

Where is the postcss guidance?
If you actually try using the instructions provided, you will get a 100% fail Flowbite site with no Tailwind, no styles, no colors, no utilities.
You have to install and configure postcss, as stated on the Flowbite/Angular guide: https://flowbite.com/docs/getting-started/angular/
Even when I follow this additional guidance on postcss, I still do not have a working installation. No colors are configured. Is there a default theme I need to import?
Why don't you give clear instructions? It's difficult to get started with Flowbite Angular.
How about an example repo with everything working?

Please provide the exception or error you saw

No tailwind classes are available on the page.
After bringing in postcss, I have no Primary, Secondary, etc colors defined.

OS

Windows

Browser

None

Node version

22.18.0

Flowbite-angular version

20.1.0

Anything else?

No response

[MGREMY]

Hello @Hugh-Ryan,

Firstly, let's get clear, be kind and respectful, or I won't even answer after. Keep in mind that this repo is maintained on free time and without any counterparty.

To answer you correctly, I need to know if you're actually using flowbite-angular library or raw flowbite. As this repo is for flowbite-angular only, but you provided a link to the documentation of flowbite...

If you're using flowbite library, then it may be some mistake in the documentation of flowbite repo itself ; if so, please open an issue on this repo instead of here, as I don't maintain it.
Otherwise, here is this documentation of flowbite-angular (and the storybook ).

If you're getting some errors, please let me know and I'll fix the documentation/bug.

[Hugh-Ryan]

Hi, thanks for the reply. I sincerely apologize if my tone was unprofessional. I am facing a deadline and have to get a POC of Flowbite-Angular running quickly and ran into the mentioned problems which has me blocked.

I was trying to only follow the instructions on this site flowbite-angular. Only after failing to get started did I read some docs on Flowbite site proper about using postcss. After following that guidance my Flowbite-Angular site did begin to work, but without any colors. Suggest to also give users a hint how to get Primary colors, etc defined when using Flowbite-Angular. If necessary, a link out to relevant docs on Flowbite or Tailwind might help. I noticed the storybook site you linked doesn't have primary colors etc defined.

To view the errors I'm seeing, simply start a brand new angular site, and follow the instructions provided on flowbite-angular. You'll notice that tailwind does not function. After following the postcss guidance you'll also notice there are no colors defined.

[MGREMY]

Hey again,
No problem for that, I understand.

It looks like the documentation misses some configuration description and also one little detail (that make the application working in fact 😓). Sorry for that.

So the missing part is as you might excpect the postcss configuration, and the detail about the import used in the css file :

@import 'tailwindcss';

@source "node_modules/flowbite-angular";

The node_module folder is not always in the same folder as your angular application, so to make it work, you have to adjust the path by adding one or multiple ../.
For the postcss installation I'm missing the .postcss.config.json setup, I'll add a section for that.
Also, You're right about the primary color definition, I'll add a configuration section for this too.

I send you a working base application using flowbite-angular (I've tested it, don't worry XD) and I'll make the changes in the documentation as soon as I possibly can.

testapp.zip

Also if you want to have a working primary color defined, add this to your css file :

@theme {
  /* Colors */
  /* Primary */
  --color-primary-50: #fff0f1;
  --color-primary-100: #ffe1e4;
  --color-primary-200: #ffc8cf;
  --color-primary-300: #ff9ba8;
  --color-primary-400: #ff637b;
  --color-primary-500: #ff2c51;
  --color-primary-600: #f6083b;
  --color-primary-700: #c3002f;
  --color-primary-800: #ae0331;
  --color-primary-900: #940732;
  --color-primary-950: #5b041e;
}

[Hugh-Ryan]

Awesome reply. Thank you bro, this really helps!