Vue-multiselect: CSS not showing in Nuxt Production

[santicros]

When deploying the project with Nuxt (npm run build) the styles don't show properly.
I've tried to use the Nuxt module and didn't work at build, but at dev work perfectly.

[ardasatata]

I figured it out after 5 hours trying lol

Just add this to your css on nuxt.config.js

  /*
   ** Global CSS
   */
  css: [
    '~/assets/css/tailwind.css',
    '~/assets/css/main.css',
    '~/node_modules/vue-multiselect/dist/vue-multiselect.min.css'
  ],

hope this helps!

EDIT:

I think it is because of my extractCSS config in nuxt.config I set it to false and all of 3rd party node modules CSS seems loaded normally

build: {
    transpile: ['vuejs-paginate', 'vue-loading-spinner'],
    postcss: {
      // Add plugin names as key and arguments as value
      // Install them before as dependencies with npm or yarn
      plugins: {
        // Disable a plugin by passing false as value
        tailwindcss: path.resolve(__dirname, './tailwind.config.js')
      },
      preset: {
        // Change the postcss-preset-env settings
        autoprefixer: {
          grid: true
        }
      }
    },
    splitChunks: {
      layouts: false
    },
    extractCSS: false
  },

[santicros]

Hey @ardasatata thanks for your comment!
I had tried putting the Global CSS links and didn't work.

I've finally discovered it was because I'm also using TailwindCSS with the nuxt-tailwindcss plugin and the classes were deleted on the PurgueCSS.

What has finally worked has been adding to my nuxt.config.js in the PurgueCSS whitelistPatterns section a multiselect value (and also added the nuxt transitions, because didn't work on production):

export default {
  purgeCSS: {
    whitelistPatterns: [
      /-(leave|enter|appear)(|-(to|from|active))$/,
      /^(?!(|.*?:)cursor-move).+-move$/,
      /^nuxt-link(|-exact)-active$/,
      /multiselect/
    ]
  }
}