Khắc phục lỗi Unknown At Rule trong Tailwind CSS: Hướng dẫn chi tiết

Bạn đang gặp phải lỗi "Unknown at rule" khi sử dụng Tailwind CSS? Lỗi này thường xuất hiện khi trình biên dịch CSS của bạn không nhận diện được các cú pháp đặc trưng của Tailwind như @tailwind, @apply, hay @variants. Bài viết này sẽ cung cấp cho bạn một hướng dẫn chi tiết, từng bước một, giúp bạn xác định nguyên nhân và khắc phục triệt để vấn đề này.

Hiểu rõ về lỗi "Unknown At Rule"

Lỗi "Unknown at rule" xảy ra khi các công cụ như PostCSS hoặc trình lint CSS không được cấu hình đúng cách để xử lý cú pháp riêng của Tailwind CSS. Điều này có thể do thiếu plugin, cấu hình sai, hoặc phiên bản không tương thích.

Các bước khắc phục lỗi Unknown At Rule trong Tailwind CSS

1. Kiểm tra cài đặt Tailwind CSS và PostCSS

Đảm bảo rằng bạn đã cài đặt cả tailwindcss, postcss và autoprefixer dưới dạng dependencies cho dự án của mình.

    
    npm install -D tailwindcss postcss autoprefixer
    
  

2. Cấu hình PostCSS

Tạo hoặc chỉnh sửa file postcss.config.js trong thư mục gốc của dự án. File này sẽ chỉ định các plugin mà PostCSS sẽ sử dụng.

    
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
    
  

3. Cấu hình công cụ build (Webpack, Vite, Parcel)

Tùy thuộc vào công cụ build mà bạn đang sử dụng, bạn cần cấu hình để nó xử lý CSS bằng PostCSS.

• Webpack: Sử dụng postcss-loader trong cấu hình Webpack của bạn.
• Vite: Vite tự động nhận diện postcss.config.js.
• Parcel: Parcel cũng tự động xử lý cấu hình PostCSS.

4. Kiểm tra file CSS đầu vào

File CSS đầu vào của bạn (ví dụ: style.css) phải chứa các directive @tailwind để import các style cơ bản của Tailwind:

    
/* style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
    
  

5. Cấu hình trình lint CSS (nếu sử dụng)

Nếu bạn sử dụng Stylelint, hãy cài đặt plugin stylelint-config-tailwindcss để nó nhận diện các cú pháp Tailwind.

    
npm install -D stylelint-config-tailwindcss
    
  

Sau đó, cấu hình file .stylelintrc.js:

    
module.exports = {
  extends: ['stylelint-config-tailwindcss'],
  // Các cấu hình khác...
};
    
  

6. Khởi động lại server phát triển

Sau khi thực hiện các thay đổi cấu hình, hãy khởi động lại server phát triển của bạn để các thay đổi có hiệu lực.

7. Kiểm tra phiên bản các dependencies

Đảm bảo rằng bạn đang sử dụng các phiên bản tương thích của Tailwind CSS, PostCSS, và các công cụ build khác.

• Tailwind CSS: Sử dụng phiên bản mới nhất hoặc phiên bản được đề xuất trong tài liệu.
• PostCSS: Tailwind CSS v3 yêu cầu PostCSS 8 trở lên.

Lời khuyên bổ sung

• Kiểm tra chính tả: Đảm bảo rằng bạn không viết sai các at-rule của Tailwind (ví dụ: @tailwind chứ không phải @tailwin).
• Sử dụng Tailwind CLI: Nếu bạn không sử dụng công cụ build phức tạp, hãy sử dụng Tailwind CLI để xử lý CSS.
• Bật chế độ verbose: Chạy Tailwind CSS ở chế độ verbose để biết thêm thông tin chi tiết về quá trình biên dịch.

Hy vọng hướng dẫn này sẽ giúp bạn khắc phục lỗi "Unknown at rule" và sử dụng Tailwind CSS một cách hiệu quả. Nếu bạn vẫn gặp vấn đề, hãy tham khảo tài liệu chính thức của Tailwind CSS hoặc tìm kiếm sự giúp đỡ từ cộng đồng.

Nguồn tham khảo: tailwindcss.com/docs