Flowbite - Config defined colors are not generated in CSS

Question

I'm using express to serve my website. When running node app, it is possible to have classes like "bg-primary-700", not defined in the css file ?

I mean, i want to define a primary color in js conf file or css (with @theme) but when doing this, classes with primary not working. other classes like bg-blue works.

<h1 class="text-4xl font-bold dark:text-white py-8">
  Flowbite-ExpressJS Starter
</h1>

<button type="button" class="text-white bg-blue-700">Default</button>

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{html,js,ejs,pug,hbs,ts}",
        "./node_modules/flowbite/**/*.js"
    ],
    theme: {
        extend: {
            colors: {
                primary: {
                    600: '#4a7ae6', 700: '#3d63bf', 800: '#2f4c99', 900: '#253d7d',
                },
            }
        },

    },
    plugins: [
        require('flowbite/plugin')
    ],
    darkMode: 'class',
}

@tailwind base;
@tailwind components;
@tailwind utilities;

--- EDIT Added this repo, https://github.com/guillaumearnx/flowbite-example-79432594

Was able to make tailwind work with build css method. but when trying to switch to "using postcss" and live-processing css, can't work anymore

Answer 1

A really smart answer would be that Tailwind always need a compilation step for CSS to make this example operate. This is what the frameworks are responsible for doing (vite, react, ...)

Without a framework, it is necessary to use the Cli and therefore launch a built before each throw.

Thank you: Wongjn