[BUG] - Unused CSS,JS Issue in Lighthouse performance . Unused tailwind css classes in the file. no purge happened.

[TamjidAhmed10]

NextUI Version

v2.2.0

Describe the bug

Next UI is good. When i tried to make lighthouse performance for the given template , it give me unused css warnings. But it should not happent as it should purge them. please what should i do. this is the template i used for the test . https://github.com/nextui-org/next-pages-template For mobile .

Your Example Website or App

https://github.com/nextui-org/next-pages-template

Steps to Reproduce the Bug or Issue

Simply build the app and run yarn start. then run lighthouse.

Expected behavior

It should purge all the unused tailwind code .

Screenshots or Videos

Operating System Version

Windows

Browser

Chrome

[timomedia]

I also had the same problem with the last update.

[nima-ca]

Same here. is there any way to reduce it?

[MariaLazarenko]

I have the same issue. has anybody figured out how to fix it?

[Eric-Alain]

I wouldn't call it a fix by or anything, but I changed my content pattern in my tailwind.config.ts file to only look at the specific components I was using. But I wouldn't say it's great for active development.

const config: Config = {
	content: ['./src/pages/**/*.{js,mjs,ts,jsx,tsx,mdx}', './src/components/**/*.{js,mjs,ts,jsx,tsx,mdx}', './node_modules/@nextui-org/theme/dist/components/(button|card|image|modal).js'],
	theme: {
		extend: {},
	},
	plugins: [nextui()],
}

Note the './node_modules/@nextui-org/theme/dist/components/(button|card|image|modal).js' item.

It isn't super convenient and you need to manually tally the UI components you import into your project. But it still decreased the bundle size and the unused byte count, at least for me.

I went from 87.5% unused count to 50.8% unused.

Not great, but it's something

[Oumeir-Rengony]

Hello I have the same issue. For the css purge remove the unused css. But anybody knows what to do with the unused js?

[MariaLazarenko]

I wouldn't call it a fix by or anything, but I changed my content pattern in my tailwind.config.ts file to only look at the specific components I was using. But I wouldn't say it's great for active development.

const config: Config = {
	content: ['./src/pages/**/*.{js,mjs,ts,jsx,tsx,mdx}', './src/components/**/*.{js,mjs,ts,jsx,tsx,mdx}', './node_modules/@nextui-org/theme/dist/components/(button|card|image|modal).js'],
	theme: {
		extend: {},
	},
	plugins: [nextui()],
}

Note the './node_modules/@nextui-org/theme/dist/components/(button|card|image|modal).js' item.

It isn't super convenient and you need to manually tally the UI components you import into your project. But it still decreased the bundle size and the unused byte count, at least for me.

I went from 87.5% unused count to 50.8% unused.

Not great, but it's something

thanks a lot! it's really helpful

[Semkoo]

Why not just do?

   "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",

[timomedia]

Does anyone have a solution to this problem? Currently I still cannot handle this problem :(

[vavilondev]

is it possible to apply purgeCSS somehow?