Tailwind UI component libraries like Skeleton and Flowbite provide a number of benefits, but come with an important caveat - Tailwind generates classes for all imported components, regardless if they are used in the project or not. This leads to a larger than necessary CSS bundle.
Unfortunately this is a limitation of how Tailwind implements it's Content Configuration. Tailwind searches through all files
content, uses a regex to locate possible selectors, then generates their respective classes. The key thing to note is this occurs before the build process, meaning there's no CSS treeshaking or purging involved against your production file assets.
How it Works
Add to Vite
Implement the following in
vite.config.ts, found in the root of your project.
To denote selectors that shouldn't be purged, simply add them via
safelist in your
Alternatively, can safelist selectors directly within your stylesheets using special comments.
You may also safelist selectors directly within each declaration block.
See the PurgeCSS documentation for additional configuration settings.