remove unused classnames in tabler.css using PostCSS

[TheHadiAhmadi]

https://github.com/jacobp100/postcss-remove-classes
using this plugin it is possible to remove bootstrap's default classes like 'btn', 'card', 'mb-2', ....

maybe useful for our use-case:
https://github.com/itaoyuta/postcss-selector-replace

also this plugin removes css classes.
https://github.com/AoDev/css-byebye
https://github.com/AoDev/css-byebye/blob/master/lib/css-byebye.js

we can write a PostCSS plugin which transform tabler.css to a simpler css file with only .u-* classes
something like this:
postcss.config.cjs

module.exports = {
    plugins: [
        ubeacCSS({
            classesToSave: [/u-*/] // save all classes which starts with 'u-'
        )
    ]
}

tabler.css

.btn, .u-button {
   ....button styles
}
.btn-primary, .u-button-color-primary {
   ....primary color
}
.some-class-that-only-tabler-uses, .and-we-dont-extend {
  ...some styles
}

output:

.u-button {
   ....button styles
}
.u-button-color-primary {
   ....primary color
}

[TheHadiAhmadi]

https://github.com/AoDev/css-byebye
I think using this plugin we can tell that remove all classes which doesn't start with 'u-' using some regex pattern.

[TheHadiAhmadi]

^(?!(?:u-)\b)(.*)$

[TheHadiAhmadi]

https://purifycss.online/

[pournasserian]

Also see this one:
https://www.npmjs.com/package/minify