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. 😉

[georgiai1]

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

[TheAlexLichter]

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 ☺️