PostCSS có còn được sử dụng không?

Vì Tailwind là một plugin PostCSS nên không gì có thể ngăn cản bạn sử dụng nó với Sass, Less, Stylus hoặc các trình tiền xử lý khác, giống như bạn có thể làm với các plugin PostCSS khác như Autoprefixer

Điều quan trọng cần lưu ý là bạn không cần sử dụng bộ tiền xử lý với Tailwind — dù sao thì bạn thường viết rất ít CSS trên dự án Tailwind, vì vậy, việc sử dụng bộ tiền xử lý sẽ không có lợi như trong dự án mà bạn viết nhiều

Hướng dẫn này chỉ tồn tại dưới dạng tài liệu tham khảo cho những người cần tích hợp Tailwind với bộ tiền xử lý vì những lý do nằm ngoài tầm kiểm soát của họ chứ không phải vì đó là một phương pháp được đề xuất

---

Sử dụng PostCSS làm bộ tiền xử lý của bạn

Nếu bạn đang sử dụng Tailwind cho một dự án hoàn toàn mới và không cần tích hợp nó với bất kỳ biểu định kiểu Sass/Less/Stylus hiện có nào, thì bạn nên cân nhắc kỹ lưỡng việc dựa vào các plugin PostCSS khác để thêm các tính năng tiền xử lý mà bạn sử dụng thay vì sử dụng một plugin riêng biệt.

Điều này có một vài lợi ích

• Bản dựng của bạn sẽ nhanh hơn. Vì CSS của bạn không cần phải được phân tích cú pháp và xử lý bằng nhiều công cụ, nên CSS của bạn sẽ biên dịch nhanh hơn nhiều chỉ bằng PostCSS
• Không có quirks hoặc cách giải quyết. Bởi vì Tailwind thêm một số từ khóa không chuẩn mới vào CSS (như

  @tailwind base;
  @import "./custom-base-styles.css";
  
  @tailwind components;
  @import "./custom-components.css";
  
  @tailwind utilities;
  @import "./custom-utilities.css";

  8,

  @tailwind base;
  @import "./custom-base-styles.css";
  
  @tailwind components;
  @import "./custom-components.css";
  
  @tailwind utilities;
  @import "./custom-utilities.css";

  9,

  @import "tailwindcss/base";
  @import "./custom-base-styles.css";
  
  @import "tailwindcss/components";
  @import "./custom-components.css";
  
  @import "tailwindcss/utilities";
  @import "./custom-utilities.css";

  0, v.v. ), bạn thường phải viết CSS của mình theo những cách khó chịu, không trực quan để bộ tiền xử lý cung cấp cho bạn đầu ra như mong đợi. Làm việc độc quyền với PostCSS tránh điều này

Để biết danh sách khá toàn diện về các plugin PostCSS có sẵn, hãy xem kho lưu trữ PostCSS GitHub, nhưng đây là một vài plugin quan trọng mà chúng tôi sử dụng trong các dự án của riêng mình và có thể đề xuất

Một trong những tính năng hữu ích nhất mà bộ tiền xử lý cung cấp là khả năng tổ chức CSS của bạn thành nhiều tệp và kết hợp chúng tại thời điểm xây dựng bằng cách xử lý trước các câu lệnh

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

1, thay vì trong trình duyệt

Plugin chuẩn để xử lý việc này với PostCSS là postcss-import

Để sử dụng nó, hãy cài đặt plugin qua npm

npm install -D postcss-import

Sau đó, thêm nó làm plugin đầu tiên trong cấu hình PostCSS của bạn

Một điều quan trọng cần lưu ý về

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

2 là nó tuân thủ nghiêm ngặt thông số kỹ thuật CSS và không cho phép các câu lệnh

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

1 ở bất kỳ đâu ngoại trừ ở đầu tệp

Không hoạt động, các câu lệnh `@import` phải xuất hiện trước

Giải pháp đơn giản nhất cho vấn đề này là không bao giờ trộn lẫn CSS thông thường và nhập trong cùng một tệp. Thay vào đó, hãy tạo một tệp điểm nhập chính cho quá trình nhập của bạn và giữ tất cả CSS thực của bạn trong các tệp riêng biệt

Sử dụng các tệp riêng biệt để nhập và CSS thực tế

Nơi bạn có nhiều khả năng gặp phải tình huống này nhất là trong tệp CSS chính bao gồm các khai báo

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

8 của bạn

Không hoạt động, các câu lệnh `@import` phải xuất hiện trước

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

Bạn có thể giải quyết vấn đề này bằng cách tạo các tệp riêng biệt cho từng khai báo

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

8, sau đó nhập các tệp đó vào biểu định kiểu chính của bạn. Để làm cho việc này trở nên dễ dàng, chúng tôi cung cấp các tệp riêng biệt cho từng tờ khai

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

8 mà bạn có thể nhập trực tiếp từ

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

7

Plugin

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

2 đủ thông minh để tự động tìm kiếm các tệp trong thư mục

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

7, vì vậy bạn không cần cung cấp toàn bộ đường dẫn — ví dụ:

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

40 là đủ

Nhập tệp CSS do chúng tôi cung cấp

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

làm tổ

Để thêm hỗ trợ cho các khai báo lồng nhau, chúng tôi khuyên dùng plugin

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

41 đi kèm của chúng tôi, plugin PostCSS bao bọc postcss-nested hoặc postcss-nesting và hoạt động như một lớp tương thích để đảm bảo plugin lồng nhau mà bạn chọn hiểu đúng cú pháp tùy chỉnh của Tailwind như

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

9 và

Nó được bao gồm trực tiếp trong gói

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

44, vì vậy, để sử dụng nó, tất cả những gì bạn cần làm là thêm nó vào cấu hình PostCSS của bạn, ở đâu đó trước Tailwind

Theo mặc định, nó sử dụng plugin lồng nhau postcss dưới mui xe, sử dụng cú pháp giống như Sass và là plugin hỗ trợ hỗ trợ lồng nhau trong

Nếu bạn muốn sử dụng postcss-nesting (dựa trên đặc tả kỹ thuật CSS Nesting đang thực hiện), trước tiên hãy cài đặt plugin

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

4

Sau đó chuyển chính plugin đó làm đối số cho

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

41 trong cấu hình PostCSS của bạn

Điều này cũng có thể hữu ích nếu vì bất kỳ lý do gì bạn cần sử dụng một phiên bản rất cụ thể của

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

46 và muốn ghi đè lên phiên bản mà chúng tôi gói cùng với chính

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

41

Lưu ý rằng nếu bạn đang sử dụng

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

48 trong dự án của mình, bạn nên đảm bảo tắt chức năng lồng và để thay thế

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

41 xử lý việc đó cho bạn

Biến

Ngày nay, các biến CSS (chính thức được gọi là thuộc tính tùy chỉnh) thực sự tốt, vì vậy bạn hoàn toàn không cần bộ tiền xử lý để sử dụng các biến

Chúng tôi sử dụng rộng rãi các biến CSS trong chính Tailwind, vì vậy nếu có thể sử dụng Tailwind, thì bạn có thể sử dụng các biến CSS gốc

Bạn cũng có thể thấy rằng hầu hết những thứ bạn đã sử dụng biến trước đây đều có thể được thay thế bằng hàm

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

0 của Tailwind. Hàm này cho phép bạn truy cập trực tiếp vào tất cả các mã thông báo thiết kế từ tệp

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

71 trong CSS của mình

Tìm hiểu thêm về chức năng

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

0 trong của chúng tôi;

tiền tố nhà cung cấp

Để tự động quản lý tiền tố của nhà cung cấp trong CSS của bạn, bạn nên sử dụng Autoprefixer

Để sử dụng nó, hãy cài đặt nó qua npm

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

7

Sau đó, thêm nó vào cuối danh sách plugin trong cấu hình PostCSS của bạn

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

0

---

Sử dụng Sass, Ít hơn hoặc Bút stylus

Để có trải nghiệm phát triển tốt nhất, chúng tôi thực sự khuyên bạn và bạn không nên sử dụng các phần mềm tiền xử lý như Sass hoặc Ít hơn trong các dự án Tailwind của mình

Để sử dụng Tailwind với công cụ tiền xử lý như Sass, Less hoặc Stylus, bạn cần thêm một bước xây dựng bổ sung vào dự án của mình để cho phép bạn chạy CSS đã xử lý trước thông qua PostCSS. Nếu bạn đang sử dụng Autoprefixer trong dự án của mình, thì bạn đã thiết lập một thứ như thế này

Xem tài liệu của chúng tôi về cách cài đặt Tailwind dưới dạng plugin PostCSS để tìm hiểu thêm về cách tích hợp Tailwind vào quy trình xây dựng hiện tại của bạn

Điều quan trọng nhất cần hiểu về việc sử dụng Tailwind với bộ tiền xử lý là các bộ tiền xử lý như Sass, Less và Stylus chạy riêng biệt trước Tailwind. Điều này có nghĩa là bạn không thể cung cấp đầu ra từ hàm

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

0 của Tailwind thành hàm màu Sass chẳng hạn, vì hàm

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

0 không thực sự được đánh giá cho đến khi Sass của bạn được biên dịch thành CSS và được đưa vào PostCSS

Không hoạt động, Sass được xử lý trước

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

3

Ngoài ra, mỗi bộ tiền xử lý đều có một hoặc hai nhược điểm riêng khi được sử dụng với Tailwind, được phác thảo cùng với các giải pháp thay thế bên dưới

ngổ ngáo

Khi sử dụng Tailwind với Sass, việc sử dụng

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

75 với

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

9 yêu cầu bạn sử dụng phép nội suy để biên dịch chính xác

Không hoạt động, Sass phàn nàn về. quan trọng

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

6

Sử dụng phép nội suy như một giải pháp thay thế

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

7

Ít hơn

Khi sử dụng Tailwind with Less, bạn không thể lồng lệnh

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

43 của Tailwind

Không hoạt động, Ít hơn không nhận ra đó là truy vấn phương tiện

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

9

Thay vào đó, hãy sử dụng truy vấn phương tiện thông thường cùng với hàm

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

0 để tham chiếu kích thước màn hình của bạn hoặc đơn giản là không lồng các chỉ thị

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

43 của bạn

Tôi có nên sử dụng PostCSS không?

PostCSS có tốt hơn Sass không?

Tôi có thể sử dụng PostCSS với SCSS không?

PostCSS có phải là một khung không?