Tối ưu hiệu suất website dùng Tailwind CSS: Tips & Công cụ hay

Tối ưu hiệu suất website dùng Tailwind CSS: Tips & Công cụ hay

Tailwind CSS vốn nhẹ và nhanh, nhưng nếu không biết cách tổ chức, bạn vẫn có thể build ra CSS nặng vài MB, ảnh hưởng đến thời gian tải trang, điểm SEO, trải nghiệm người dùng.

Bài viết này sẽ giúp bạn:

• Nhận biết nguyên nhân khiến Tailwind bị nặng

• Tối ưu project hiệu quả với công cụ thực tế

• Gợi ý cấu hình build đúng chuẩn

1. Tailwind build nặng là vì đâu?

Khi chưa tối ưu, file CSS có thể nặng vì:

• Bạn import cả Tailwind mà không bật purge

• Không tách CSS component (@apply) → lặp lại nhiều class giống nhau

• Có nhiều biến thể không dùng đến (hover, focus, lg, xl...)

• Build mode vẫn là development

Ví dụ: Một project chưa tối ưu có thể ra app.css > 1MB

✅ 2. Cách tối ưu Tailwind CSS

✅ 1. Bật chế độ purge đúng cách

Từ Tailwind 3+, purge được gọi là content. Đảm bảo bạn khai báo đúng file cần scan:

// tailwind.config.js 
module.exports = { 
content: [ 
'./src/**/*.{html,js,jsx,ts,tsx,vue,php}', 
'./components/**/*.{js,ts,vue}' 
], 
theme: { ... }, 
plugins: [], 
} 

✅ 2. Chuyển sang chế độ production khi build

• Webpack:

  NODE_ENV=production npm run build 

• Vite:

  vite build 

• Laravel Mix:

  mix.options({ 
  processCssUrls: false, 
  postCss: [
   require('tailwindcss'), 
   require('autoprefixer')
  ], 
  }) 

✅ 3. Dùng @apply để gom các class lặp lại

Thay vì:

<button class="bg-blue-500 text-white py-2 px-4 rounded shadow-md hover:bg-blue-600"></button>

Bạn có thể:

@layer components { 
.btn-primary { 
 @apply bg-blue-500 text-white py-2 px-4 rounded shadow-md hover:bg-blue-600; 
 } 
} 

✅ 4. Giới hạn số lượng variants sinh ra

Trong tailwind.config.js:

variants: { 
extend: { 
 backgroundColor: ['hover', 'focus'], // Chỉ thêm những cái cần 
 } 
} 

✅ 5. Không bật dark mode toàn cục nếu không dùng

darkMode: false // hoặc 'class' nếu bạn điều khiển bằng JS 

3. Các công cụ kiểm tra & hỗ trợ tối ưu

4. Kiểm tra hiệu suất Tailwind thực tế

Ví dụ: build file app.css trước và sau khi tối ưu

Giảm hơn 80 lần chỉ nhờ purge + build đúng cách.

5. Kết hợp Tailwind với các công nghệ hỗ trợ hiệu suất

✅ Tổng kết

Tối ưu Tailwind hiệu quả gồm:

• ✅ Khai báo đúng content để purge CSS dư

• ✅ Dùng @apply gom các class lặp

• ✅ Build ở mode production

• ✅ Kiểm tra size CSS bằng Lighthouse, Source Map

• ✅ Kết hợp với framework tối ưu như NextJS, Vite

Serial bài viết tìm hiểu CSS Framework cho người mới bắt đầu

• Bài 1: CSS Framework là gì? Giải thích dễ hiểu cho người mới bắt đầu.
• Bài 2: Vì sao nên dùng CSS Framework? 7 lý do bạn không nên bỏ qua.
• Bài 3: Phân loại các CSS Framework hiện nay
• Bài 4: So sánh Bootstrap vs Tailwind CSS  
• Bài 5: Danh sách các CSS Framework phổ biến (cập nhật 2025)
• Bài 6: Top CSS Framework nhẹ, đẹp, dễ dùng cho blog và web tĩnh
• Bài 7: Hướng dẫn chọn CSS Framework phù hợp với dự án của bạn
• Bài 8: Học CSS có cần framework không? Lộ trình học CSS hiệu quả 2025
• Bài 9: Top CSS framework cho web tốc độ cao & SEO tốt (2025)