class TailwindExtractor {
static extract (content) {
return content.match(/[A-Za-z0-9:/_-]+/g) || []
}
}
purgecss({
content: [
'./resources/views/**/*.blade.php',
'./resources/assets/js/**/*.jsx'
],
extractors: [
{
extractor: TailwindExtractor,
extensions: ['html', 'js', 'php', 'jsx']
}
]
})
Concept: Use the postcss-loader when handling your tailwind CSS file in webpack, and use the purgeCSS (package @fullhuman/postcss-purgecss) plugin shown in the snippet it will scan the files matching patterns defined in 'content', then use the supplied extractor to find all the class names you use, then remove the ones that are not used from the compiled CSS file. Can reduce file size from +200kb to 10-20kb depending on project size
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.