Slow nuxt build! what should I do?

Without Tailwindcss

✔ Client
  Compiled successfully in 2.12m

✔ Server
  Compiled successfully in 1.72m


Hash: 36fc5cf6354758073391
Version: webpack 4.44.1
Time: 127192ms

With Tailwindcss

✔ Client
  Compiled successfully in 26.23s

✔ Server
  Compiled successfully in 7.20s


Hash: 2a16c82743dd11e56513
Version: webpack 4.44.1
Time: 26232ms

tailwindcss css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

tailwindcss config js

const extend = {
  spacing: [-10, 200],
  inset: [0, 100],
  colors: {
    red: {
      default: '#FF3C3C',
      FFEEEE: '#FFEEEE',
    },
    blue: {
      default: '#5572FD',
      E8ECFF: '#E8ECFF',
    },
    green: '#50B349',
    yellow: {
      default: '#FF9807',
      FDC31F: '#FDC31F',
      FEF3E5: '#FEF3E5',
      FFE9D6: '#FFE9D6',
      FFEACC: '#FFEACC',
    },
    gray: {
      default: '#989898',
      656565: '#656565',
      F2F2F2: '#F2F2F2',
      E5E5E5: '#E5E5E5',
    },
  },
}

function expandThemeByPx (array) {
  const expand = {}
  const [start, end] = array
  let current = start
  while (current <= end) {
    expand[current] = `${current}px`
    current++
  }
  return expand
}

module.exports = {
  // important: true,
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
    defaultLineHeights: true,
    standardFontWeights: true,
  },
  theme: {
    extend: {
      spacing: expandThemeByPx(extend.spacing),
      inset: expandThemeByPx(extend.inset),
      colors: extend.colors,
    },
    fill: extend.colors,
  },
  variants: {},
  plugins: [],
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'src/components/**/*.vue',
      'src/layouts/**/*.vue',
      'src/pages/**/*.vue',
      'src/utils/common.js',
    ]
  }
}

nuxt config js

{
tailwindcss: {
    configPath: '~~/tailwind.config.js',
  },
}

HELP HELP

[productdevbook]

With the new version, if you use jit it is now fast JIT

@Atinux I think you should close here too.

[axelhzf]

I also found some performance problems migrating from tailwind 1.x to 2.x In my case, it was related to using @apply inside components.

I created this issue on the tailwind repo https://github.com/tailwindlabs/tailwindcss/issues/3717 and the following PR https://github.com/tailwindlabs/tailwindcss/pull/3718 . I am waiting for the tailwind team feedback