# Sage 11 + purgecss

**URL:** https://discourse.roots.io/t/sage-11-purgecss/29482
**Category:** sage
**Tags:** vite, sage11
**Created:** 2025-04-13T07:38:41Z
**Posts:** 4

## Post 1 by @fint — 2025-04-13T07:38:41Z

Hi

With Sage 10 I used @roots/bud-postcss and @roots/bud-purgecss to minify the theme and bootstrap scss output.

How could I optimise the generated .css file (currently about 600kb ) with Sage 11?

Thank you for any hints!

---

## Post 2 by @Log1x — 2025-04-13T08:11:15Z

The Vite ecosystem is pretty huge. I’d Google “Vite PurgeCSS” and check out the multiple different packages/guides floating around.

---

## Post 3 by @fint — 2025-07-21T18:38:28Z

Thank you!

In the end it is quite easy :smile:

If this is helpful for somebody:

I’m using this one now: [vite-plugin-purgecss - npm](https://www.npmjs.com/package/vite-plugin-purgecss)

1: Install

```
npm i vite-plugin-purgecss
```

2: Import it in vite.config.js:

```
import htmlPurge from 'vite-plugin-purgecss'
```

3: and add it under plugins like this:

```
htmlPurge({ 
      content: ['resources/views/**'],
      safelist: [ 
        /popover/,
        'is-changing', 
        'is-animating', 
      ],
     }),
```

don’t forget to add all dynamically added classes in the safelist.

---

## Post 4 by @Tetrahedrax — 2025-08-12T12:33:19Z

I decided to try this on a client’s site and I’ve made one revelation about it:

It doesn’t seem to detect the Tailwind breakpoints, meaning “md:px-2” is ignored. Quite annoying. I also noticed several other classes being ignored. It turns out that classes in Tailwind with a : or [ basically come out like this:

“.md\:block”

“.bg-\[\#EFEBE7\]”

The solution? Add wildcards to the safelist:

`htmlPurge({ content: [“resources/views/**”], safelist: [/popover/, “is-changing”, “is-animating”, /.*:.*/, /.*\[/,], }),`

If anyone knows a better way, feel free speaking up!