[{"data":1,"prerenderedAt":710},["ShallowReactive",2],{"guide-css-minification-vs-purging":3},{"id":4,"title":5,"body":6,"date":702,"description":703,"extension":704,"meta":705,"navigation":163,"path":706,"readingTime":140,"seo":707,"stem":708,"__hash__":709},"guides\u002Fguides\u002Fcss-minification-vs-purging.md","CSS Minification vs Purging",{"type":7,"value":8,"toc":687},"minimark",[9,14,18,22,25,57,216,219,223,226,333,336,340,418,422,425,452,459,463,468,471,539,542,546,553,557,560,608,612,619,644,647,651,671,675,683],[10,11,13],"h2",{"id":12},"two-different-problems","Two Different Problems",[15,16,17],"p",{},"CSS delivery has two distinct inefficiencies: the code you ship contains unnecessary characters (whitespace, comments, long property names), and it contains unnecessary rules (styles for components you never use on a given page). Minification solves the first problem. Purging solves the second. They are complementary, not interchangeable — and confusing them leads to either bloated bundles or broken layouts.",[10,19,21],{"id":20},"what-css-minification-does","What CSS Minification Does",[15,23,24],{},"Minification strips everything a browser does not need to parse the stylesheet:",[26,27,28,32,35,54],"ul",{},[29,30,31],"li",{},"Removes comments",[29,33,34],{},"Removes whitespace, newlines, and indentation",[29,36,37,38,42,43,46,47,42,50,53],{},"Shortens values where possible (",[39,40,41],"code",{},"#ffffff"," → ",[39,44,45],{},"#fff",", ",[39,48,49],{},"0px",[39,51,52],{},"0",")",[29,55,56],{},"Merges duplicate selectors",[58,59,64],"pre",{"className":60,"code":61,"language":62,"meta":63,"style":63},"language-css shiki shiki-themes github-light github-dark","\u002F* Before minification *\u002F\n.card {\n  background-color: #ffffff;\n  border-radius: 8px;\n  padding: 16px 24px;\n  margin-bottom: 0px;\n}\n\n\u002F* After minification *\u002F\n.card{background-color:#fff;border-radius:8px;padding:16px 24px}\n","css","",[39,65,66,75,86,101,118,138,152,158,165,171],{"__ignoreMap":63},[67,68,71],"span",{"class":69,"line":70},"line",1,[67,72,74],{"class":73},"sJ8bj","\u002F* Before minification *\u002F\n",[67,76,78,82],{"class":69,"line":77},2,[67,79,81],{"class":80},"sScJk",".card",[67,83,85],{"class":84},"sVt8B"," {\n",[67,87,89,93,96,98],{"class":69,"line":88},3,[67,90,92],{"class":91},"sj4cs","  background-color",[67,94,95],{"class":84},": ",[67,97,41],{"class":91},[67,99,100],{"class":84},";\n",[67,102,104,107,109,112,116],{"class":69,"line":103},4,[67,105,106],{"class":91},"  border-radius",[67,108,95],{"class":84},[67,110,111],{"class":91},"8",[67,113,115],{"class":114},"szBVR","px",[67,117,100],{"class":84},[67,119,121,124,126,129,131,134,136],{"class":69,"line":120},5,[67,122,123],{"class":91},"  padding",[67,125,95],{"class":84},[67,127,128],{"class":91},"16",[67,130,115],{"class":114},[67,132,133],{"class":91}," 24",[67,135,115],{"class":114},[67,137,100],{"class":84},[67,139,141,144,146,148,150],{"class":69,"line":140},6,[67,142,143],{"class":91},"  margin-bottom",[67,145,95],{"class":84},[67,147,52],{"class":91},[67,149,115],{"class":114},[67,151,100],{"class":84},[67,153,155],{"class":69,"line":154},7,[67,156,157],{"class":84},"}\n",[67,159,161],{"class":69,"line":160},8,[67,162,164],{"emptyLinePlaceholder":163},true,"\n",[67,166,168],{"class":69,"line":167},9,[67,169,170],{"class":73},"\u002F* After minification *\u002F\n",[67,172,174,176,179,182,185,187,190,193,195,197,199,201,204,206,208,210,212,214],{"class":69,"line":173},10,[67,175,81],{"class":80},[67,177,178],{"class":84},"{",[67,180,181],{"class":91},"background-color",[67,183,184],{"class":84},":",[67,186,45],{"class":91},[67,188,189],{"class":84},";",[67,191,192],{"class":91},"border-radius",[67,194,184],{"class":84},[67,196,111],{"class":91},[67,198,115],{"class":114},[67,200,189],{"class":84},[67,202,203],{"class":91},"padding",[67,205,184],{"class":84},[67,207,128],{"class":91},[67,209,115],{"class":114},[67,211,133],{"class":91},[67,213,115],{"class":114},[67,215,157],{"class":84},[15,217,218],{},"Minification typically reduces file size by 20–30%. The semantic content of the CSS is unchanged — every rule still exists, just in a denser format.",[10,220,222],{"id":221},"what-css-purging-does","What CSS Purging Does",[15,224,225],{},"Purging removes CSS rules that never match any HTML element in your project. This matters because utility-first frameworks like Tailwind generate thousands of classes, while a typical page uses only a fraction of them.",[58,227,229],{"className":60,"code":228,"language":62,"meta":63,"style":63},"\u002F* Before purging: full Tailwind output is ~3MB *\u002F\n.text-red-500 { color: #ef4444; }\n.text-blue-500 { color: #3b82f6; }\n\u002F* ... 10,000+ more classes ... *\u002F\n\n\u002F* After purging: only classes found in your templates *\u002F\n.text-red-500 { color: #ef4444; }\n.bg-white { background-color: #fff; }\n.p-4 { padding: 1rem; }\n",[39,230,231,236,255,271,276,280,285,299,314],{"__ignoreMap":63},[67,232,233],{"class":69,"line":70},[67,234,235],{"class":73},"\u002F* Before purging: full Tailwind output is ~3MB *\u002F\n",[67,237,238,241,244,247,249,252],{"class":69,"line":77},[67,239,240],{"class":80},".text-red-500",[67,242,243],{"class":84}," { ",[67,245,246],{"class":91},"color",[67,248,95],{"class":84},[67,250,251],{"class":91},"#ef4444",[67,253,254],{"class":84},"; }\n",[67,256,257,260,262,264,266,269],{"class":69,"line":88},[67,258,259],{"class":80},".text-blue-500",[67,261,243],{"class":84},[67,263,246],{"class":91},[67,265,95],{"class":84},[67,267,268],{"class":91},"#3b82f6",[67,270,254],{"class":84},[67,272,273],{"class":69,"line":103},[67,274,275],{"class":73},"\u002F* ... 10,000+ more classes ... *\u002F\n",[67,277,278],{"class":69,"line":120},[67,279,164],{"emptyLinePlaceholder":163},[67,281,282],{"class":69,"line":140},[67,283,284],{"class":73},"\u002F* After purging: only classes found in your templates *\u002F\n",[67,286,287,289,291,293,295,297],{"class":69,"line":154},[67,288,240],{"class":80},[67,290,243],{"class":84},[67,292,246],{"class":91},[67,294,95],{"class":84},[67,296,251],{"class":91},[67,298,254],{"class":84},[67,300,301,304,306,308,310,312],{"class":69,"line":160},[67,302,303],{"class":80},".bg-white",[67,305,243],{"class":84},[67,307,181],{"class":91},[67,309,95],{"class":84},[67,311,45],{"class":91},[67,313,254],{"class":84},[67,315,316,319,321,323,325,328,331],{"class":69,"line":167},[67,317,318],{"class":80},".p-4",[67,320,243],{"class":84},[67,322,203],{"class":91},[67,324,95],{"class":84},[67,326,327],{"class":91},"1",[67,329,330],{"class":114},"rem",[67,332,254],{"class":84},[15,334,335],{},"Purging can reduce a Tailwind build from 3MB to under 20KB — a 99% reduction. The trade-off is that any class not present in your template files at build time gets removed, even if you add it dynamically later.",[10,337,339],{"id":338},"comparison","Comparison",[341,342,343,359],"table",{},[344,345,346],"thead",{},[347,348,349,353,356],"tr",{},[350,351,352],"th",{},"Aspect",[350,354,355],{},"Minification",[350,357,358],{},"Purging",[360,361,362,374,385,396,407],"tbody",{},[347,363,364,368,371],{},[365,366,367],"td",{},"What it removes",[365,369,370],{},"Whitespace, comments, redundancy",[365,372,373],{},"Unused CSS rules",[347,375,376,379,382],{},[365,377,378],{},"Size reduction",[365,380,381],{},"20–30%",[365,383,384],{},"80–99% (with utility frameworks)",[347,386,387,390,393],{},[365,388,389],{},"Risk of breakage",[365,391,392],{},"None — semantics unchanged",[365,394,395],{},"High — dynamic classes can be removed",[347,397,398,401,404],{},[365,399,400],{},"When to apply",[365,402,403],{},"Every production build",[365,405,406],{},"When using utility frameworks or large libraries",[347,408,409,412,415],{},[365,410,411],{},"Tool examples",[365,413,414],{},"cssnano, clean-css, lightningcss",[365,416,417],{},"PurgeCSS, Tailwind JIT, UnCSS",[10,419,421],{"id":420},"why-you-need-both","Why You Need Both",[15,423,424],{},"Consider a Tailwind CSS project:",[26,426,427,434,440,446],{},[29,428,429,433],{},[430,431,432],"strong",{},"Without either",": 3MB CSS file — unusable in production.",[29,435,436,439],{},[430,437,438],{},"Minified only",": ~2.1MB — smaller but still shipping thousands of unused classes.",[29,441,442,445],{},[430,443,444],{},"Purged only",": ~20KB raw — tiny but still has whitespace and comments.",[29,447,448,451],{},[430,449,450],{},"Purged + minified",": ~8KB gzipped — optimal delivery.",[15,453,454,455,458],{},"The correct pipeline is: ",[430,456,457],{},"purge first, then minify",". Purging reduces the number of rules, which gives the minifier less work and produces a smaller output. Minifying before purging wastes time compressing rules that will be removed.",[10,460,462],{"id":461},"purging-pitfalls","Purging Pitfalls",[464,465,467],"h3",{"id":466},"dynamic-class-names","Dynamic Class Names",[15,469,470],{},"PurgeCSS works by scanning your template files for class names. If you construct class names with string concatenation, the scanner cannot find them:",[58,472,476],{"className":473,"code":474,"language":475,"meta":63,"style":63},"language-html shiki shiki-themes github-light github-dark","\u003C!-- PurgeCSS will find this -->\n\u003Cdiv class=\"text-red-500\">Error\u003C\u002Fdiv>\n\n\u003C!-- PurgeCSS will NOT find this -->\n\u003Cdiv :class=\"`text-${color}-500`\">Error\u003C\u002Fdiv>\n","html",[39,477,478,483,510,514,519],{"__ignoreMap":63},[67,479,480],{"class":69,"line":70},[67,481,482],{"class":73},"\u003C!-- PurgeCSS will find this -->\n",[67,484,485,488,492,495,498,502,505,507],{"class":69,"line":77},[67,486,487],{"class":84},"\u003C",[67,489,491],{"class":490},"s9eBZ","div",[67,493,494],{"class":80}," class",[67,496,497],{"class":84},"=",[67,499,501],{"class":500},"sZZnC","\"text-red-500\"",[67,503,504],{"class":84},">Error\u003C\u002F",[67,506,491],{"class":490},[67,508,509],{"class":84},">\n",[67,511,512],{"class":69,"line":88},[67,513,164],{"emptyLinePlaceholder":163},[67,515,516],{"class":69,"line":103},[67,517,518],{"class":73},"\u003C!-- PurgeCSS will NOT find this -->\n",[67,520,521,523,525,528,530,533,535,537],{"class":69,"line":120},[67,522,487],{"class":84},[67,524,491],{"class":490},[67,526,527],{"class":80}," :class",[67,529,497],{"class":84},[67,531,532],{"class":500},"\"`text-${color}-500`\"",[67,534,504],{"class":84},[67,536,491],{"class":490},[67,538,509],{"class":84},[15,540,541],{},"Always use complete class names in your templates. Tailwind's documentation recommends writing dynamic classes out in full, even inside conditional blocks.",[464,543,545],{"id":544},"third-party-libraries","Third-Party Libraries",[15,547,548,549,552],{},"CSS from ",[39,550,551],{},"node_modules"," is often excluded from purging by default. If you import a library's full stylesheet but only use a few components, configure your purger to scan those library templates or safelist the classes you need.",[464,554,556],{"id":555},"javascript-injected-classes","JavaScript-Injected Classes",[15,558,559],{},"Classes added by JavaScript at runtime — modals, tooltips, date pickers — can be purged if the scanner does not see the relevant markup. Use safelist entries for these cases:",[58,561,565],{"className":562,"code":563,"language":564,"meta":63,"style":63},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F purgecss.config.js\nmodule.exports = {\n  safelist: ['modal-open', 'tooltip-visible']\n}\n","javascript",[39,566,567,572,588,604],{"__ignoreMap":63},[67,568,569],{"class":69,"line":70},[67,570,571],{"class":73},"\u002F\u002F purgecss.config.js\n",[67,573,574,577,580,583,586],{"class":69,"line":77},[67,575,576],{"class":91},"module",[67,578,579],{"class":84},".",[67,581,582],{"class":91},"exports",[67,584,585],{"class":114}," =",[67,587,85],{"class":84},[67,589,590,593,596,598,601],{"class":69,"line":88},[67,591,592],{"class":84},"  safelist: [",[67,594,595],{"class":500},"'modal-open'",[67,597,46],{"class":84},[67,599,600],{"class":500},"'tooltip-visible'",[67,602,603],{"class":84},"]\n",[67,605,606],{"class":69,"line":103},[67,607,157],{"class":84},[10,609,611],{"id":610},"minification-beyond-whitespace","Minification Beyond Whitespace",[15,613,614,615,618],{},"Advanced minifiers like ",[39,616,617],{},"cssnano"," also perform semantic optimizations:",[26,620,621,624,634,637],{},[29,622,623],{},"Merging rules with identical selectors",[29,625,626,627,630,631],{},"Converting ",[39,628,629],{},"margin: 10px 10px 10px 10px"," to ",[39,632,633],{},"margin: 10px",[29,635,636],{},"Removing overridden properties",[29,638,639,640,643],{},"Reducing ",[39,641,642],{},"calc()"," expressions where possible",[15,645,646],{},"These optimizations are safe for production but can make debugging harder. Always keep the unminified source available for development.",[10,648,650],{"id":649},"key-takeaways","Key Takeaways",[26,652,653,656,659,662,665,668],{},[29,654,655],{},"Minification removes unnecessary characters; purging removes unnecessary rules — they solve different problems.",[29,657,658],{},"Purging provides the largest size reduction for utility-first frameworks (80–99%).",[29,660,661],{},"Minification adds a consistent 20–30% reduction on top of purging.",[29,663,664],{},"Correct pipeline order: purge first, then minify.",[29,666,667],{},"Dynamic class names are the most common cause of purging-related bugs.",[29,669,670],{},"Safelist any classes added by JavaScript or third-party libraries.",[10,672,674],{"id":673},"try-it-yourself","Try It Yourself",[15,676,677,678,579],{},"Minify your CSS and see the size reduction instantly with the ",[679,680,682],"a",{"href":681},"\u002Ftools\u002Fcss-minifier","CSS Minifier",[684,685,686],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":63,"searchDepth":77,"depth":77,"links":688},[689,690,691,692,693,694,699,700,701],{"id":12,"depth":77,"text":13},{"id":20,"depth":77,"text":21},{"id":221,"depth":77,"text":222},{"id":338,"depth":77,"text":339},{"id":420,"depth":77,"text":421},{"id":461,"depth":77,"text":462,"children":695},[696,697,698],{"id":466,"depth":88,"text":467},{"id":544,"depth":88,"text":545},{"id":555,"depth":88,"text":556},{"id":610,"depth":77,"text":611},{"id":649,"depth":77,"text":650},{"id":673,"depth":77,"text":674},"2026-05-28","Understand the difference between minifying CSS and purging unused styles — and why you need both.","md",{"immutable":163},"\u002Fguides\u002Fcss-minification-vs-purging",{"title":5,"description":703},"guides\u002Fcss-minification-vs-purging","_KCxTRrZjpLi8Ut5J5TdX82UrH46joDdhmqScRJMoB4",1780401332979]