Closed nelsonxx1 closed 1 year ago
@nelsonxx1 did you manage to do this in nuxt3?
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
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?
@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:
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
Or just don't use bootstrap in the first place if you care about performance and long term style haha. π
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.
You do you. π
This will be a great addition
Hi I would like to use purgeCSS on Vuetify 3 to purge some CSS, is there any way to do it?
@kstraszewski give a try to that one: https://github.com/FullHuman/purgecss/issues/67#issuecomment-619579244
Just confirming, but currently this plugin does not work with Nuxt 3. Is that correct?
@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"],
},
],
},
},
},
@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,
},
},
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 βΊοΈ
is there any way to do the same in nuxt3 with vite?