Building nuxt 3 project missing some plugins stylings

Question

I have a nuxt 3 project that is working fine on localhost while developing. I use FormKit and vue-toastification and everything is fine on "npm run dev". But once I run npm run build to build it for deployment. lots of stylings are missing. Mainly those two plugins. the error messages for the forms by FormKit aren't red and not styled. vue-toastifications display with full height and width of the screen as it has no styling.

would I do any extra steps before running npm run build? like building these plugins or something? this is my nuxt.config.ts file if it might help!

// @ts-nocheck
import Icons from "unplugin-icons/vite"

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    css: ["~/assets/fonts/droidkufi/droidarabickufi.css", "@formkit/themes/genesis"],
    modules: [
        "@nuxtjs/tailwindcss",
        [
            "@pinia/nuxt",
            {
                autoImports: ["defineStore"],
            },
        ],
        "@formkit/nuxt",
    ],
    plugins: ["~/plugins/flowbite.client.ts", "~/plugins/i18n.ts"],
    vite: {
        plugins: [
            Icons({
                autoInstall: true,
            }),
        ],
    },
    runtimeConfig: {
        // secret serverside variables
        public: {
            // baseURL: "http://127.0.0.1:8000/api/",
            // apiBase: "http://127.0.0.1:8000/api/",
            // homeBase: "http://127.0.0.1:8000",
            baseURL: "https://sju.davidlouis.co/api/",
            apiBase: "https://sju.davidlouis.co/api/",
            homeBase: "https://sju.davidlouis.co",
        },
    },
    vue: {
        compilerOptions: {
            isCustomElement: (tag) => ["datepicker-hijri"].includes(tag),
        },
    },
})

I tried to run npm run dev back to test if styles are working. and yes they are working fine. the problem starts when I run npm run build for production and deployment.