PurgeCSS - Skeleton

Skeleton
  1. get started
  2. ›
  3. purgecss

PurgeCSS

Reducing your TailwindCSS bundle size using PurgeCSS

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

Terminal window
npm i -D vite-plugin-tailwind-purgecss

Add to Vite

Implement the following in vite.config.ts, found in the root of your project.

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.