???? ?? CSS? ???? ???? ?? Purgecs ?? UNCSS? ?? ?? ??? ??????. 2. WebPack, Vite ?? Tailwind? ??? ??? ?? ?? ????? ??? ?????. 3. ??? ???? ???? ?? ?? ???? ?? Chrome Devtools ???? ?? ??? CSS ??? ?????. 4. SAFELIST? ??? ? ??? ???? ?? ???? ????? ???? ?? ? ???; 5. ?? ???, ??? CSS? ???? Critical ?? Penthouse? ?? ??? ???? ???? ?????????.

???? ?? CSS? ???? ?? ??? ??? ????? ??? ???? ?? ??? ????? ? ??????. ????? ???? ??? ??? ????.

1. CSS ?? ?? ?? (??)

?? ??? ??? ??? HTML, JavaScript ?? ??? ??? ???? ???? ?? CSS ??? ???? ?? ??? ???? ????.

???? ?? :

• Purgecss - Webpack, Vite, Rollup ?? ??? ?? ??? ?? ?????.
• UNCSS - ?? ??? ?? node.js? ??? ? ????.
• Tailwind CSS??? Purgecs - tailwind.config.js ? content ??? ?? ??.

?????? purgecss? ? :

 // purgecss.config.js
module.exports = {
  ?? : [ './src/**/*.html', './src/**/* .js'],
  CSS : [ './src/**/*.css'],
  ?? : './dist/puged/',
  ?? : True, // ?? ? ??? ??????
};

CLI? ?? ????? ?? ????? ??????.

2. ?? ????? ??????

?? ??? ??? ????? :

• Tailwind ???? ?? :
  ???? purge ?? content ?????? ??????.

   // tailwind.config.js
  module.exports = {
    ???: [
      './src/**/*. {html,js,jsx,ts,tsx}',
    ],,
    ??: { ... },
    ???? : [],
  }

  ?? ?? NODE_ENV=production ?? ???? ?? ??? ???? ?????.

• Webpack : PurgeCSSPlugin ?? :

   const purgecssplugin = ?? ?? ( 'Purgecss-webpack-plugin');
  Const Glob = ?? ?? ( 'glob');
  const path = ?? ( '??');
  
  ???? : [
    ??? purgecssplugin ({{
      ?? : Glob.sync (path.join (__ dirname, 'src/**/*. {js, html}')),
    }),
  ]]

3. ?? ?? ? ?? ??????

???? ???? ?? CSS ??? ?????? .

• Chrome DevTools ???? ? ( Ctrl Shift P → "Coverage")? ???? ????? ???? ?? CSS?????.
• ?? ???? ?? ???? ??????.
• ?? ? ??? ?? ???? ?? ?? ??? ???? ?????.

?? ??? ??? ??? ? ?????? (? : ???? ?? ? ??? ?? JS ??? ???).

4. ??? ? ??????????

?? ??? ?? ?? ? ?? ????.

• ?? ?????? ???? ?? ? ???.
• ???? ???? ???? ????? (? : hidden , active , show-modal ).
• ??? ?? ? ?? (React, Vue ?).

??? :

• ?????? ??? ??? :

   // purgecss.config.js
  defaultextractor : content => content.match (/[\ w-/:] (? <! :)/g) || [],
  SAFELIST : [ &#39;???? -0&#39;, &#39;Translate-y-full&#39;, &#39;Delay-300&#39;, &#39;lg : col-span-2&#39;],

• ?? ? ??? ???????.

---

5. ?? : ?? CSS ??? ??? ??????

? ????? ???? ?? ??? CSS (???? ???)? ???? ???? ?????????.

• ?? : critical , Penthouse ?? ??? ???.
• ??? ?? CSS, ?? ??? ??? ????????????.

?? ???? ??? ???? ?? ?? ??? ???? ????.

---

???? ?? CSS? ???? ?? ?? ??? ??? ??? ?? ??? ?? ????. Purgecss? ?? ??? ????? ??? ?? ?? ??? (?? ??? ??)? ????? ?? ?? ??? ?????? ???????.

????? : ??, ??, ?? . ????? ??? ???? ?? ?? ??????.

? ??? ???? ?? CSS? ???? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!