Điều thú vị là bạn có thể làm điều này mà không cần dùng Tailwind hay framework nào, chỉ với PostCSS!

1. Tree-shaking là gì trong CSS?

• Tự động loại bỏ các class không được sử dụng trong HTML/JS
• Giữ lại đúng các dòng CSS cần thiết giúp giảm kích thước đáng kể
• Rất phù hợp cho theme WordPress nhẹ, SPA tĩnh, landing page

2. Cài đặt công cụ

Bạn cần Node.js và PostCSS. Sau đó cài thêm plugin postcss-purgecss:

npm install postcss postcss-cli @fullhuman/postcss-purgecss --save-dev

3. Cấu hình PostCSS với purge

Tạo file postcss.config.js trong thư mục dự án:

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
      content: ['./**/*.html', './**/*.php', './**/*.js'],
      safelist: [/^uk-/, /^is-/, 'show'], // giữ lại class động hoặc từ framework
    }),
  ]
};

Lưu ý: Nếu bạn dùng UIKit hoặc Bootstrap, hãy thêm các prefix của chúng vào safelist để tránh bị xóa nhầm.

4. Dùng CLI để xử lý file CSS

Chạy lệnh sau để lọc CSS không dùng:

npx postcss src/style.css -o dist/style.min.css

Kết quả: style.min.css sẽ nhỏ gọn hơn rất nhiều, chỉ giữ lại các dòng thực sự dùng trong các file HTML/PHP/JS.

5. Tích hợp vào quy trình build

Nếu bạn đã có script build SCSS/CSS, có thể thêm bước tree-shake CSS vào cuối bằng CLI hoặc trong package.json:

"scripts": {
  "build-css": "sass style.scss | postcss -o style.min.css"
}

6. So sánh hiệu quả

Kết luận

Việc tree-shake CSS bằng PostCSS và plugin purgecss giúp bạn tự động loại bỏ toàn bộ class CSS không được dùng mà không cần framework cụ thể. Đây là bước tối ưu cực kỳ cần thiết cho mọi website hiện đại, đặc biệt khi kết hợp với UI framework như UIKit, Bootstrap hoặc theme tự viết.

Tip: Nếu dùng WordPress, bạn có thể tích hợp bước build này vào quá trình deploy lên VPS hoặc build theme thủ công qua script.