How to deal with Tailwind & PurgeCSS and A LOT of different folders?

Question

I've been using Tailwind with the "Purge" option to make the final css file a lot smaller and successfully. However, I've been wondering about the efficience of my methods. I'm working on projects that have got a lot of subfolders, which I all specify like:

 purge: {
        layers: ['components', 'utilities', 'base'],
        content: [
            '../A.Umb.E.Platform.Frontend/Assets/**/*.css',
            '../A.Umb.E.Platform.Vue/src/Apps/ESearch/*.vue',
            '../A.Umb.E.Platform.Vue/src/Apps/ESearch/Components/*.vue',
            '../A.Umb.E.Platform.Vue/src/Apps/HSearch/*.vue',
            '../A.Umb.E.Platform.Vue/src/Apps/HSearch/Components/*.vue',
            '../A.Umb.E.Platform.Web/Views/**/*.cshtml',
            '../A.Umb.E.Platform.Web/Views/**/**/*.cshtml',
            '../A.Umb.E.Platform.Web/Views/**/**/**/*.cshtml',
            '../A.Umb.E.Platform.Web/Views/**/**/**/**/*.cshtml',

        ]
    }

I've been looking for a solution to this inefficient method, but all I can find is examples of tiny projects that have got only a few html or vue files in the same folder. So my question: is there a way to do this more efficiently or am I bound to do it like I already did?

Answer 1

You don't have to target every single sub-folder, the glob pattern will match those for you. Using ** will match zero or more folders.

purge: {
    layers: ['components', 'utilities', 'base'],
    content: [
        '../A.Umb.E.Platform.Frontend/Assets/**/*.css',
        '../A.Umb.E.Platform.Vue/src/Apps/**/*.vue',
        '../A.Umb.E.Platform.Web/Views/**/*.cshtml'
    ]
}