PROD and DEV CSS rendering inconsistent in Nuxt3

Question

I built a Vue3 component library (let's call it MY-LIBRARY) using Nuxt3, which uses tailwindv2. I have a side project called MY-SIDE-PROJECT, built with laravel-mix (v6) and Vue3, which uses tailwindv2. I have another Vue3 project (let's call it My-PROJECT) built with Nuxt3, also using tailwindv2. In MY-PROJECT, I use MY-LIBRARY

P粉300541798 · Answer

I finally understand where the problem lies. In my tailwind configuration, I need to specify that I also want to apply tailwind to components imported from MY-LIBRARY.

Thanks to @JSONDerulo for the exchange, which allowed me to pinpoint the source.

#MY-PROJECT's tailwind.config.js

module.exports = {
    important: true,
    presets: [
        require('MY-LIBRARY/tailwind.config')
    ],
    purge: {
        content: [
            "./components/**/*.{js,vue,ts}",
            "./pages/**/*.vue",
            "./nuxt.config.{js,ts}",
            "./app.vue",
            "./node_modules/MY-LIBRARY/components/**/*.{js,vue,ts}" #<-- the important part
        ]
    },
    theme: {
        extend: {
            ...
        }
    },
}