Skeleton can be easily paired with PurgeCSS to help keep your TailwindCSS bundle size small and performant. + Below you'll find information on why this is helpful, along with installation and usage details.
+ +--- + +## Introduction + +### Motivation + +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, even those unused in your project. This leads to a larger than necessary CSS bundle. + +Unfortunately, this is a limitation of how Tailwind implements its Content Configuration. Tailwind searches through all files specified in `content`, uses a regex to locate possible selectors, then generates their respective classes. The key takeaway is that this occurs **before** the build process, meaning there is no built-in CSS treeshaking or purging against your production assets. + +### How it Works + +Ideally, you only want selectors for classes you actually use. This is where PurgeCSS comes in. We analyze the files that are part of your project's module graph and extract the utilized Tailwind classes. From there, the plugin passes them along to PurgeCSS for final processing. + +>This plugin will no longer be necessary after the release of Tailwind v4, which introduces a new Vite plugin that auto-detects classes from the module graph. As such, **this plugin only supports Tailwind v3**. + + +--- + +## Usage + +>Last updated for `vite-plugin-tailwind-purgecss v0.3.0`. Check the plugin’s GitHub for the latest instructions. + +### Supported Frameworks + + +This plugin supports the following Vite-based frameworks: + + +- SvelteKit +- Vite + Svelte +- Vite + React +- Astro + + +Next.js is **not supported** because it does not use Vite. + + +### Installation + +```console +npm i -D vite-plugin-tailwind-purgecss +``` + +### Add to Vite + +Implement the following in `vite.config.ts`, found in the root of your project. + +```ts title="vite.config.ts" +import { defineConfig } from 'vite'; +import { purgeCss } from 'vite-plugin-tailwind-purgecss'; + +// Other Vite plugins here, e.g. SvelteKit or React plugin + +export default defineConfig({ + plugins: [ + // existing plugins + purgeCss() + ] +}); +``` + +--- + +## Attribution + + +This plugin is provided courtesy of Skeleton co-maintainer Adrian (aka CokaKoala). Feel free to explore and contribute to vite-plugin-tailwind-purgecss on GitHub.