PurgeCSS Vite Plugin

[endigo9740]

Link to the Page

• v2 Docs: https://www.skeleton.dev/docs/purgecss
• GitHub: https://github.com/AdrianGonz97/vite-plugin-tailwind-purgecss

Describe the Issue (screenshots encouraged!)

We need to verify this plugin is working with Skeleton v3. It can help dramatically decrease bundle sizes by purging unwanted CSS in the bundle. However there is some uncertainty on whether it will work, especially with the Vite 6 release recently

How to Test

For the initial test we'll ONLY test SvelteKit as we know it was working before in v2. Do the following:

1. Create a new Skeleton v3 project for SvelteKit
2. Run the npm run build command and view the size of the CSS bundle. It should be listed in the console during this process.
3. Then, install the PurgeCSS plugin per the instructions on the docs linked above. I'll also share the readme below
4. Build again, and compare the size of the CSS bundle. If it's working this should be reduced.

Handling the Results

There's two outcomes here:

1. If the size doesn't go down, then we know it's not working and can aim to update the plugin asap
2. If it is working, then we'll need to port that v2 doc over to the v3 docs under the Guides section

Follow Up Test

If it works in SvelteKit, ensure we've tested it in all Vite-based frameworks, including:

• SvelteKit
• Vite/Svelte
• Vite/React
• Astro

Note that Next.js uses Webpack/Turbopack, not Vite, and will not qualify for this test.

Reporting the Results

When tests are complete, ping me here (Chris) as well as @AdrianGonz97 (CokaKoala on Discord) to share the results. Adrian is the original author and can address any issues that might arise.

[phamduylong]

@endigo9740 anything blocking this one? I can give this a go if it's just porting the same markdown over, into an mdx file

[endigo9740]

@phamduylong yeah @AdrianGonz97 is the author of the plugin and was going to confirm it works for all supported meta-frameworks listed above. This may need additional effort now that Vite 6 has been released. So we'll need his thumbs up before we can progress on this.

[endigo9740]

Confirmed working for SvelteKit + Skeleton v3 projects!

[nullpointerexceptionkek]

I will update this comment along the way.

Updates Needed

• The plugin's peer dependencies for Tailwind should be updated to 4.0.0.
• The command npx tailwindcss init -p in the documentation is not supported for Tailwind version 4.

This will work:

npx [email protected] init -p

Additional Note

It would be helpful to add documentation regarding TailwindCSS 3.3.0 (and early 3.4 versions), which does not support import.meta.url.

---

Framework Compatibility

• SvelteKit: ✅
• Svelte + Vite: ✅

  assets/index-Dg-FftHS.css               72.98 kB  ->  34.28 kB
  

• React + Vite: ✅

  assets/index-BrGkwYAO.css               66.40 kB  ->  32.04 kB
  

• Astro: ✅

  _astro/ec.rh18c.css               18.25 kB  ->  14.87 kB
  

[endigo9740]

@AdrianGonz97 just pinging you here to make sure you're aware. This is great news though!