Slow Nuxt project build after installing tailwindcss

[krisons]

Could not found any reference to this issue.

My Nuxt project build time dramatically increased after TailwindCSS install using buldModules:

buildModules: [
    '@nuxtjs/moment',
    '@nuxtjs/tailwindcss'
  ],

Without Tailwind

✔ Client
  Compiled successfully in 8.53s

✔ Server
  Compiled successfully in 8.61s

Memory usage: 423 MB (RSS: 553 MB)

With Tailwind

✔ Client
  Compiled successfully in 35.83s

✔ Server
  Compiled successfully in 35.76s

Memory usage: 425 MB (RSS: 1.02 GB)

Tailwind config file contents:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [
    require('@tailwindcss/ui'),
  ]
}

What can be the cause?

[Soviut]

First, have you tried removing the @tailwindcss/ui plugin? That would be the most likely culprit as it needs to load a large amount of code.

Second, after the initial build (which is always slower), how slow are subsequent rebuilds when you save a file?

There have been issues in the past with build speed related to the fact that Tailwind uses PostCSS so my recommendation would be to search for that first. For example https://adamwathan.me/journal/2019/01/11/new-website-and-tailwind-performance-hell/

[adamwathan]

Tailwind itself isn't super fast (it generates a lot of CSS) but on it's own it only takes a couple of seconds to build. Webpack can be really slow to parse large CSS files though depending on what features of webpack you are using, and Nuxt might be doing some of this stuff under the hood.

Going to close and point you to the discussion here instead:

#2544

[Yee1014]

With Tailwindcss

✔ Client
  Compiled successfully in 2.12m

✔ Server
  Compiled successfully in 1.72m


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

Without Tailwindcss

✔ Client
  Compiled successfully in 26.23s

✔ Server
  Compiled successfully in 7.20s


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

config

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',
    ]
  }
}

HELP ME

[et-hh]

对于无法升级到最新版本tailwind的可以通过webpack插件解决这个问题：
https://juejin.cn/post/6956424977184718856

[imrim12]

I solved the problem by removing the purge option in tailwind and use JIT engine instead

module.exports = {
  mode: 'jit',
  darkMode: 'class', // or false or 'media'
  important: true,
  // Use JIT instead
  // purge: {},
};