tailwindcss Isn't it the tree shaking that's the real support?

[xiangshu233]

Hey, I have a question. Does Tailwind itself support loading by clicking on the link? Why do you still need this plug-in? I'm still a beginner. I'm just curious.

[xiangshu233]

Damn it Google Translate，The translation may not be correct, sorry

[AdrianGonz97]

Isn't tree shaking already supported? (tweaked the wording)

Tailwind will only generate styles for tailwind classes if those classes are detected within the files that are defined in the content field in your tailwind.config.js:

// tailwind.config.js
export default {
	content: [
		// when Tailwind scans these files for tailwind classes, it'll only generate their respective styles
		"./src/**/*.{html,js,ts}", 
	]
}

It's done this way so that Tailwind will only generate styles for tailwind classes that you actively use in your project. This works perfectly fine for most projects.

---

This plugin is only useful in scenarios where you may not control all of the files that are defined in the content field.

For instance, if you're using a component library that uses Tailwind as it's CSS framework, you'll need to add that library to the content field in the config so that the tailwind classes that are used in the library are able to have their styles generated:

// tailwind.config.js
export default {
	content: [
		// points to files in your project
		"./src/**/*.{html,js,ts}", 
		// points to files in the component library you're using
		"./node_modules/some_library/**/*"
	]
}

As Tailwind is now scanning the entirety of that library for tailwind classes, it'll now generate styles for all of the tailwind classes that are found in the library's files, even if you're not importing them and using them in your project. This will lead to a larger than necessary CSS bundle size.

To combat this, vite-plugin-tailwind-purgecss will remove any of those extra generated styles.