Phần
5 của tệp
6 là nơi bạn định cấu hình đường dẫn đến tất cả các mẫu HTML, thành phần JavaScript và bất kỳ tệp nguồn nào khác có chứa tên lớp TailwindHướng dẫn này bao gồm mọi thứ bạn cần biết để đảm bảo Tailwind tạo tất cả CSS cần thiết cho dự án của bạn
Cấu hình đường dẫn nguồn
Tailwind CSS hoạt động bằng cách quét tất cả các thành phần HTML, JavaScript và bất kỳ tệp mẫu nào khác để tìm tên lớp, sau đó tạo tất cả CSS tương ứng cho các kiểu đó
Để Tailwind tạo tất cả CSS mà bạn cần, Tailwind cần biết về mọi tệp trong dự án của bạn có chứa bất kỳ tên lớp Tailwind nào
Định cấu hình đường dẫn đến tất cả các tệp nội dung của bạn trong phần
5 của tệp cấu hình của bạnCác đường dẫn được định cấu hình dưới dạng các mẫu toàn cầu, giúp dễ dàng khớp tất cả các tệp nội dung trong dự án của bạn mà không cần nhiều cấu hình
- Sử dụng
1 để khớp với mọi thứ trừ dấu gạch chéo và tệp ẩn - Sử dụng
2 để khớp với 0 hoặc nhiều thư mục - Sử dụng các giá trị phân tách bằng dấu phẩy giữa
3 để khớp với danh sách các tùy chọn
Tailwind sử dụng thư viện toàn cầu nhanh — hãy xem tài liệu của họ để biết các tính năng mẫu được hỗ trợ khác
Các đường dẫn có liên quan đến thư mục gốc của dự án, không phải tệp
6 của bạn, vì vậy nếu tệp
6 của bạn ở một vị trí tùy chỉnh, bạn vẫn nên viết các đường dẫn có liên quan đến thư mục gốc của dự ánkhuyến nghị mô hình
Để có hiệu suất tốt nhất và để tránh thông báo sai, hãy đặt cấu hình nội dung của bạn càng cụ thể càng tốt
Nếu bạn sử dụng một mẫu thực sự rộng như mẫu này, Tailwind thậm chí sẽ quét
6 để tìm nội dung có thể không phải là thứ bạn muốnKhông sử dụng các mẫu cực kỳ rộng
Nếu bạn có bất kỳ tệp nào cần quét nằm ở thư mục gốc của dự án [thường là tệp
7], hãy liệt kê tệp đó một cách độc lập để các mẫu khác của bạn có thể cụ thể hơnHãy cụ thể với các mẫu nội dung của bạn
Một số khung ẩn điểm nhập HTML chính của chúng ở một vị trí khác với các mẫu còn lại của bạn [thường là
8], vì vậy nếu bạn đang thêm các lớp Tailwind vào tệp đó, hãy đảm bảo rằng nó cũng được bao gồm trong cấu hình của bạnĐừng quên điểm nhập HTML của bạn nếu có
Nếu bạn có bất kỳ tệp JavaScript nào thao tác HTML của bạn để thêm các lớp, hãy đảm bảo rằng bạn cũng bao gồm các tệp đó
Điều quan trọng nữa là bạn không quét bất kỳ tệp CSS nào — hãy định cấu hình Tailwind để quét các mẫu nơi tên lớp của bạn đang được sử dụng, chứ không phải tệp CSS mà Tailwind đang tạo
Không bao giờ bao gồm các tệp CSS trong cấu hình nội dung của bạn
Phát hiện lớp chuyên sâu
Cách Tailwind quét mã nguồn của bạn để tìm các lớp cố ý rất đơn giản — chúng tôi không thực sự phân tích cú pháp hoặc thực thi bất kỳ mã nào của bạn bằng ngôn ngữ mà mã đó được viết, chúng tôi chỉ sử dụng các biểu thức chính quy để trích xuất mọi chuỗi có thể là tên lớp
Ví dụ: đây là một số HTML với mỗi chuỗi tên lớp tiềm năng được đánh dấu riêng
Finding customers for your new business
Getting a new business off the ground is a lot of hard work.
Here are five ideas you can use to find your first customers.
Chúng tôi không chỉ giới hạn tìm kiếm của mình ở các thuộc tính
9 bởi vì bạn có thể sử dụng các lớp ở bất cứ đâu, chẳng hạn như trong một số JavaScript để bật/tắt menu
Bằng cách sử dụng phương pháp rất đơn giản này, Tailwind hoạt động cực kỳ đáng tin cậy với mọi ngôn ngữ lập trình, chẳng hạn như JSX
const sizes = {
md: 'px-4 py-2 rounded-md text-base',
lg: 'px-5 py-3 rounded-lg text-lg',
}
const colors = {
indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}
export default function Button[{ color, size, children }] {
let colorClasses = colors[color]
let sizeClasses = sizes[size]
return [
{children}
]
}
Tên lớp động
Hàm ý quan trọng nhất về cách Tailwind trích xuất tên lớp là nó sẽ chỉ tìm các lớp tồn tại dưới dạng chuỗi hoàn chỉnh không bị gián đoạn trong tệp nguồn của bạn
Nếu bạn sử dụng phép nội suy chuỗi hoặc nối các phần tên lớp với nhau, thì Tailwind sẽ không tìm thấy chúng và do đó sẽ không tạo CSS tương ứng
Không xây dựng tên lớp động
Trong ví dụ trên, các chuỗi
const sizes = {
md: 'px-4 py-2 rounded-md text-base',
lg: 'px-5 py-3 rounded-lg text-lg',
}
const colors = {
indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}
export default function Button[{ color, size, children }] {
let colorClasses = colors[color]
let sizeClasses = sizes[size]
return [
{children}
]
}
0 và const sizes = {
md: 'px-4 py-2 rounded-md text-base',
lg: 'px-5 py-3 rounded-lg text-lg',
}
const colors = {
indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}
export default function Button[{ color, size, children }] {
let colorClasses = colors[color]
let sizeClasses = sizes[size]
return [
{children}
]
}
1 không tồn tại nên Tailwind sẽ không tạo các lớp đóThay vào đó, hãy đảm bảo mọi tên lớp bạn đang sử dụng đều tồn tại đầy đủ
Luôn sử dụng tên lớp đầy đủ
Miễn là bạn luôn sử dụng tên lớp hoàn chỉnh trong mã của mình, Tailwind sẽ tạo tất cả CSS của bạn một cách hoàn hảo mọi lúc
Làm việc với các thư viện của bên thứ ba
Nếu bạn đang làm việc với bất kỳ thư viện bên thứ ba nào [ví dụ: Select2] và tạo kiểu cho thư viện đó bằng CSS tùy chỉnh của riêng mình, thì bạn nên viết những kiểu đó mà không cần sử dụng tính năng
const sizes = {
md: 'px-4 py-2 rounded-md text-base',
lg: 'px-5 py-3 rounded-lg text-lg',
}
const colors = {
indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}
export default function Button[{ color, size, children }] {
let colorClasses = colors[color]
let sizeClasses = sizes[size]
return [
{children}
]
}
2 của TailwindĐiều này sẽ đảm bảo rằng Tailwind luôn bao gồm các kiểu đó trong CSS của bạn, điều này dễ dàng hơn nhiều so với việc định cấu hình Tailwind để quét mã nguồn của thư viện bên thứ ba
Nếu bạn đã tạo bộ thành phần có thể tái sử dụng của riêng mình, được tạo kiểu bằng Tailwind và đang nhập chúng vào nhiều dự án, hãy đảm bảo định cấu hình Tailwind để quét các thành phần đó để tìm tên lớp
Điều này sẽ đảm bảo rằng Tailwind cũng tạo ra tất cả CSS cần thiết cho các thành phần đó
Nếu đang làm việc trong một kho lưu trữ đơn có không gian làm việc, thì bạn có thể cần sử dụng
const sizes = {
md: 'px-4 py-2 rounded-md text-base',
lg: 'px-5 py-3 rounded-lg text-lg',
}
const colors = {
indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}
export default function Button[{ color, size, children }] {
let colorClasses = colors[color]
let sizeClasses = sizes[size]
return [
{children}
]
}
3 để đảm bảo Tailwind có thể xem các tệp nội dung của bạnSử dụng đường dẫn tương đối
Theo mặc định, Tailwind giải quyết các đường dẫn nội dung không tuyệt đối liên quan đến thư mục làm việc hiện tại, không phải tệp
6. Điều này có thể dẫn đến kết quả không mong muốn nếu bạn chạy Tailwind từ một thư mục khácĐể luôn giải quyết các đường dẫn liên quan đến tệp
6, hãy sử dụng ký hiệu đối tượng cho cấu hình
5 của bạn và đặt thuộc tính const sizes = {
md: 'px-4 py-2 rounded-md text-base',
lg: 'px-5 py-3 rounded-lg text-lg',
}
const colors = {
indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}
export default function Button[{ color, size, children }] {
let colorClasses = colors[color]
let sizeClasses = sizes[size]
return [
{children}
]
}
7 thành const sizes = {
md: 'px-4 py-2 rounded-md text-base',
lg: 'px-5 py-3 rounded-lg text-lg',
}
const colors = {
indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}
export default function Button[{ color, size, children }] {
let colorClasses = colors[color]
let sizeClasses = sizes[size]
return [
{children}
]
}
8Điều này có thể sẽ trở thành hành vi mặc định trong phiên bản chính tiếp theo của khung
Cấu hình nội dung thô
Nếu vì bất kỳ lý do gì, bạn cần định cấu hình Tailwind để quét một số nội dung thô thay vì nội dung của tệp, hãy sử dụng đối tượng có khóa
const sizes = {
md: 'px-4 py-2 rounded-md text-base',
lg: 'px-5 py-3 rounded-lg text-lg',
}
const colors = {
indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}
export default function Button[{ color, size, children }] {
let colorClasses = colors[color]
let sizeClasses = sizes[size]
return [
{children}
]
}
9 thay vì đường dẫnKhông có nhiều trường hợp sử dụng hợp lệ cho việc này — thay vào đó, danh sách an toàn thường là điều bạn thực sự muốn
Lớp học danh sách an toàn
Để có kích thước tệp nhỏ nhất và trải nghiệm phát triển tốt nhất, chúng tôi khuyên bạn nên dựa vào cấu hình
5 của mình để cho Tailwind biết nên tạo các lớp nào nhiều nhất có thểDanh sách an toàn là giải pháp cuối cùng và chỉ nên được sử dụng trong các trường hợp không thể quét nội dung nhất định để tìm tên lớp. Những trường hợp này rất hiếm và bạn hầu như không bao giờ cần đến tính năng này
Nếu bạn cần đảm bảo rằng Tailwind tạo một số tên lớp nhất định không tồn tại trong tệp nội dung của bạn, hãy sử dụng tùy chọn
1Một ví dụ về việc điều này có thể hữu ích là nếu trang web của bạn hiển thị nội dung do người dùng tạo và bạn muốn người dùng có thể sử dụng một tập hợp các lớp Tailwind bị ràng buộc trong nội dung của họ mà có thể không tồn tại trong các tệp nguồn của trang web của bạn
Sử dụng biểu thức chính quy
Tailwind hỗ trợ danh sách an toàn dựa trên mẫu cho những trường hợp bạn cần đưa nhiều lớp vào danh sách an toàn
Các mẫu chỉ có thể khớp với các tên tiện ích cơ bản như
2 và sẽ không khớp nếu mẫu bao gồm một công cụ sửa đổi biến thể như
3Nếu bạn muốn buộc Tailwind tạo các biến thể cho bất kỳ lớp phù hợp nào, hãy bao gồm chúng bằng cách sử dụng tùy chọn
4Loại bỏ các lớp học
Vì Tailwind sử dụng phương pháp rất đơn giản để phát hiện tên lớp trong nội dung của bạn nên bạn có thể thấy rằng một số lớp đang được tạo mà bạn thực sự không cần
Ví dụ: HTML này vẫn sẽ tạo lớp
5, mặc dù lớp đó không thực sự được sử dụng
4Bạn cũng có thể muốn ngăn Tailwind tạo một số lớp nhất định khi các lớp đó xung đột với một số CSS hiện có, nhưng bạn không muốn đi xa đến mức thêm tiền tố vào tất cả các lớp Tailwind của mình
Trong những tình huống này, bạn có thể sử dụng tùy chọn
6 để yêu cầu Tailwind bỏ qua các lớp cụ thể mà Tailwind phát hiện trong nội dung của bạnTùy chọn
6 chỉ ảnh hưởng đến CSS do Tailwind tạo, không ảnh hưởng đến CSS tùy chỉnh do chính bạn tạo hoặc đang nhập từ thư viện khácKhông giống như
1, tùy chọn
6 chỉ hỗ trợ các chuỗi và bạn không thể chặn các lớp bằng biểu thức chính quyChuyển đổi tập tin nguồn
Nếu bạn đang soạn thảo nội dung ở định dạng biên dịch thành HTML [như Markdown], thì việc biên dịch nội dung đó thành HTML trước khi quét nội dung đó để tìm tên lớp thường là điều hợp lý.
Sử dụng tùy chọn
0 để chuyển đổi bất kỳ nội dung nào phù hợp với phần mở rộng tệp cụ thể trước khi trích xuất các lớpKhi sử dụng
0, bạn sẽ cần cung cấp đường dẫn nguồn của mình bằng cách sử dụng
2 thay vì dưới dạng mảng cấp cao nhất trong
5Sử dụng tùy chọn
4 để ghi đè logic mà Tailwind sử dụng để phát hiện tên lớp cho các phần mở rộng tệp cụ thểĐây là một tính năng nâng cao và hầu hết người dùng sẽ không cần đến nó — logic trích xuất mặc định trong Tailwind hoạt động cực kỳ hiệu quả đối với hầu hết các dự án
Cũng giống như chuyển đổi, khi sử dụng
5, bạn sẽ cần cung cấp đường dẫn nguồn của mình bằng cách sử dụng
2 thay vì dưới dạng mảng cấp cao nhất trong
5xử lý sự cố
Các lớp không được tạo
Nếu Tailwind không tạo lớp, hãy đảm bảo rằng cấu hình
5 của bạn là chính xác và khớp với tất cả các tệp nguồn phù hợpMột lỗi phổ biến là thiếu phần mở rộng tệp, ví dụ: nếu bạn đang sử dụng
9 thay vì
40 cho các thành phần React của mìnhHoặc tạo một thư mục mới giữa dự án ban đầu không được đề cập và quên thêm nó vào cấu hình của bạn
Cũng có thể là bạn đang cố gắng sử dụng các tên lớp động, tên này sẽ không hoạt động vì Tailwind không thực sự đánh giá mã nguồn của bạn và chỉ có thể phát hiện các chuỗi lớp tĩnh không bị gián đoạn
Không xây dựng tên lớp động
Đảm bảo bạn luôn sử dụng tên lớp đầy đủ trong mã của mình
Luôn sử dụng tên lớp đầy đủ
Đọc tài liệu của chúng tôi về tên lớp động để biết thêm chi tiết
Tái tạo kiểu trong một vòng lặp vô hạn
Nếu CSS của bạn dường như đang được xây dựng lại trong một vòng lặp vô hạn, thì rất có thể đó là do công cụ xây dựng của bạn không hỗ trợ tùy chọn
41 khi đăng ký các phụ thuộc PostCSSNhiều công cụ xây dựng [chẳng hạn như gói web] không hỗ trợ tùy chọn này và kết quả là chúng tôi chỉ có thể yêu cầu họ xem các tệp cụ thể hoặc toàn bộ thư mục. Chẳng hạn, chúng tôi không thể yêu cầu webpack chỉ xem các tệp
42 trong một thư mụcĐiều đó có nghĩa là nếu việc xây dựng CSS của bạn khiến bất kỳ tệp nào trong các thư mục đó thay đổi, quá trình xây dựng lại sẽ được kích hoạt, ngay cả khi tệp đã thay đổi không khớp với phần mở rộng trong toàn cầu của bạn
Vì vậy, nếu bạn đang theo dõi các thay đổi của
43, nhưng bạn đang ghi tệp đầu ra CSS của mình vào
44, bạn sẽ nhận được một vòng lặp xây dựng lại vô hạn bằng cách sử dụng một số công cụLý tưởng nhất là chúng tôi có thể cảnh báo bạn về điều này trong bảng điều khiển, nhưng nhiều công cụ hỗ trợ nó hoàn toàn tốt [bao gồm cả công cụ CLI của riêng chúng tôi] và chúng tôi không có cách nào đáng tin cậy để phát hiện bạn đang sử dụng công cụ xây dựng nào
Để giải quyết vấn đề này, hãy sử dụng các đường dẫn cụ thể hơn trong cấu hình
5 của bạn, đảm bảo chỉ bao gồm các thư mục không thay đổi khi CSS của bạn xây dựngNếu cần, hãy điều chỉnh cấu trúc thư mục dự án thực tế của bạn để đảm bảo bạn có thể nhắm mục tiêu các tệp mẫu của mình mà không vô tình bắt gặp tệp CSS hoặc các tạo phẩm xây dựng khác như tệp kê khai
Nếu bạn hoàn toàn không thể thay đổi cấu hình nội dung hoặc cấu trúc thư mục, cách tốt nhất của bạn là biên dịch CSS riêng bằng một công cụ có hỗ trợ toàn cầu hoàn chỉnh. Chúng tôi khuyên bạn nên sử dụng Tailwind CLI, một công cụ nhanh, đơn giản, được xây dựng có mục đích để biên dịch CSS của bạn với Tailwind
Nó chỉ không hoạt động bình thường
Nếu bạn đang gặp phải các vấn đề kỳ lạ, khó mô tả với đầu ra hoặc mọi thứ dường như không hoạt động chút nào, thì rất có thể là do công cụ xây dựng của bạn không hỗ trợ đúng các thông báo phụ thuộc PostCSS [hoặc hoàn toàn không]. Một ví dụ đã biết về điều này hiện tại là Stencil
Khi bạn gặp phải các loại sự cố này, chúng tôi khuyên bạn nên sử dụng Tailwind CLI để biên dịch CSS riêng thay vì cố gắng tích hợp Tailwind vào công cụ hiện có của bạn
Bạn có thể sử dụng các gói như
46 hoặc
47 để biên dịch CSS của mình cùng với lệnh phát triển thông thường bằng cách thêm một số tập lệnh vào dự án của bạn như thế nàyDù bằng cách nào, hãy nhớ kiểm tra sự cố hiện có hoặc mở một sự cố mới để chúng tôi có thể tìm ra sự cố và cố gắng cải thiện khả năng tương thích với bất kỳ công cụ nào bạn đang sử dụng