extract css causes style to be messed up

I'm using Nuxtjs 2 with Tailwind css 2.

When I wanted to deploy the app. I use extractCSS: true,. it is working but when I load the website the styles are not loaded immediately. there's a slight loading and then the styles show.

My nuxt config :

 build: {
    preset: {
      stage: 1, // see https://tailwindcss.com/docs/using-with-preprocessors#future-css-featuress
   
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          tailwindConfig: {
            test: /tailwind\.config/,
            chunks: "all",
            priority: 10,
            name: true,
          },
        },
      },
    },

    extractCSS: true,
    html: {
      minify: {
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        optimizeCSS: true,

        processConditionalComments: true,
        removeEmptyAttributes: true,
        removeRedundantAttributes: true,
        trimCustomFragments: true,
        useShortDoctype: true,
        preserveLineBreaks: true,
        collapseWhitespace: true,
      },
    },
    
    postcss: {
      plugins: {
        tailwindcss: path.resolve(__dirname, "./tailwind.config.js"),
        "postcss-custom-properties": false,
      },
    },
  },

I'm using .scss on tailwindcss.

Any idea what's wrong?