Nuxt3 compatibility

[nelsonxx1]

is there any way to do the same in nuxt3 with vite?

[bootsmann1995]

@nelsonxx1 did you manage to do this in nuxt3?

[kissu]

If you're using Nuxt3, then you probably don't need to purge Tailwind itself. Since it is using JIT for quite some time already hence, not creating un-used classes by default.

https://tailwindcss.com/docs/upgrade-guide#configure-content-sources

[gokaybiz]

If you're using Nuxt3, then you probably don't need to purge Tailwind itself. Since it is using JIT for quite some time already hence, not creating un-used classes by default.

https://tailwindcss.com/docs/upgrade-guide#configure-content-sources

What should we do if we use bootstrap or something else?

[kissu]

@gokaybiz it's unrelated to Tailwind, so I guess: nothing. Otherwise, maybe whitelisting it if you have any issues but you cannot really reduce the size of Bootstrap thanks to Tailwind's purge. :x:

[dosstx]

What should we do if we use bootstrap or something else?

@gokaybiz One thing you could do is just comment out the components from your SASS file you don't use in your code.

See more info: https://getbootstrap.com/docs/5.2/customize/optimize/#lean-sass-imports

[kissu]

Or just don't use bootstrap in the first place if you care about performance and long term style haha. 😂

[dosstx]

Or just don't use bootstrap in the first place if you care about performance and long term style haha. 😂

I prefer Bootstrap (version 5) over TW:) Nice mix of ready-made components and utilities.

[kissu]

You do you. 😉

[gkkirilov]

This will be a great addition

[kstraszewski]

Hi I would like to use purgeCSS on Vuetify 3 to purge some CSS, is there any way to do it?

[kissu]

@kstraszewski give a try to that one: https://github.com/FullHuman/purgecss/issues/67#issuecomment-619579244

[travisricks]

Just confirming, but currently this plugin does not work with Nuxt 3. Is that correct?

[bootsmann1995]

@travisricks

You can implement it through potscss as a plugin like this:

this is diretcly in the nuxt.config

postcss: {
        plugins: {
            "@fullhuman/postcss-purgecss": {
                mode: "postcss",
                enabled: true,
                content: [
                    resolve(__dirname, "components/**/*.vue"),
                ],
                styleExtensions: [".css"],
                whitelist: [
                    "body",
                    "html",
                    "nuxt-progress",
                ],
                whitelistPatterns: [
                ],
                whitelistPatternsChildren: [],
                extractors: [
                    {
                        extractor: (content) => content.match(/[A-z0-9-:\\/]+/g) || [],
                        extensions: ["html", "vue", "js", "ts", "mjs"],
                    },
                ],
            },
        },
    },

[AlexBa]

@bootsmann1995 Thank you for your code! I have used your template and extended it a little bit for Nuxt 3. Works in my case with Bootstrap 5 and Font Awesome 5:

  postcss: {
    plugins: {
      '@fullhuman/postcss-purgecss':
        process.env.NODE_ENV === 'production' || process.env.ENABLE_PURGE_CSS === 'true'
          ? {
              mode: 'postcss',
              enabled: false,
              content: [
                resolve(__dirname, 'components/**/*.vue'),
                resolve(__dirname, 'pages/**/*.vue'),
                resolve(__dirname, 'layout/**/*.vue'),
              ],
              safelist: {
                standard: ['html', 'body', 'a', 'svg-inline--fa']
              },
              keyframes: true,
              variables: true,
            }
          : false,
    },
  },

[manniL]

Just confirming, but currently this plugin does not work with Nuxt 3. Is that correct?

Yes, but I'll release a major version for Nuxt3 soon ☺️