Hiểu và tùy chỉnh cách Tailwind quét các file nguồn của bạn.
Tailwind hoạt động bằng cách quét dự án của bạn để tìm các utility class, sau đó tạo ra tất cả CSS cần thiết dựa trên các class mà bạn thực sự đã sử dụng.
Điều này đảm bảo CSS của bạn nhỏ nhất có thể, và cũng là điều làm cho các tính năng như giá trị tùy ý trở nên khả thi.
Tailwind coi tất cả các file nguồn của bạn là văn bản thuần túy, và không cố gắng phân tích cú pháp các file của bạn dưới dạng mã theo bất kỳ cách nào.
Thay vào đó, nó chỉ tìm kiếm bất kỳ token nào trong file của bạn có thể là class dựa trên các ký tự mà Tailwind mong đợi trong tên class:
export function Button({ color, children }) { const colors = { black: "bg-black text-white", blue: "bg-blue-500 text-white", white: "bg-white text-black", }; return ( <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}> {children} </button> );}Sau đó, nó cố gắng tạo CSS cho tất cả các token này, loại bỏ bất kỳ token nào không ánh xạ tới một utility class mà framework biết.
Vì Tailwind quét các file nguồn của bạn dưới dạng văn bản thuần túy, nó không có cách nào hiểu được việc nối chuỗi hoặc nội suy trong ngôn ngữ lập trình bạn đang sử dụng.
Đừng xây dựng tên class một cách linh hoạt
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>Trong ví dụ trên, các chuỗi text-red-600 và text-green-600 không tồn tại, vì vậy Tailwind sẽ không tạo ra các class đó.
Thay vào đó, hãy đảm bảo bất kỳ tên class nào bạn đang sử dụng đều tồn tại đầy đủ:
Luôn sử dụng tên class đầy đủ
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>Nếu bạn đang sử dụng một thư viện component như React hoặc Vue, điều này có nghĩa là bạn không nên sử dụng props để xây dựng các class một cách linh hoạt:
Đừng sử dụng props để xây dựng tên class một cách linh hoạt
function Button({ color, children }) { return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;}Thay vào đó, hãy ánh xạ props tới các tên class đầy đủ có thể phát hiện tĩnh tại thời điểm build:
Luôn ánh xạ props tới các tên class tĩnh
function Button({ color, children }) { const colorVariants = { blue: "bg-blue-600 hover:bg-blue-500", red: "bg-red-600 hover:bg-red-500", }; return <button className={`${colorVariants[color]} ...`}>{children}</button>;}Điều này có lợi ích bổ sung là cho phép bạn ánh xạ các giá trị prop khác nhau tới các sắc thái màu khác nhau chẳng hạn:
function Button({ color, children }) { const colorVariants = { blue: "bg-blue-600 hover:bg-blue-500 text-white", red: "bg-red-500 hover:bg-red-400 text-white", yellow: "bg-yellow-300 hover:bg-yellow-400 text-black", }; return <button className={`${colorVariants[color]} ...`}>{children}</button>;}Miễn là bạn luôn sử dụng tên class đầy đủ trong code của mình, Tailwind sẽ tạo ra tất cả CSS của bạn một cách hoàn hảo mọi lúc.
Tailwind sẽ quét mọi file trong dự án của bạn để tìm tên class, ngoại trừ các trường hợp sau:
.gitignore của bạnnode_modulesNếu bạn cần quét bất kỳ file nào mà Tailwind đang bỏ qua theo mặc định, bạn có thể đăng ký rõ ràng các nguồn đó.
Sử dụng @source để đăng ký rõ ràng các đường dẫn nguồn tương đối với stylesheet:
@import "tailwindcss";@source "../node_modules/@acmecorp/ui-lib";Điều này đặc biệt hữu ích khi bạn cần quét một thư viện bên ngoài được xây dựng với Tailwind, vì các phụ thuộc thường được liệt kê trong file .gitignore của bạn và bị Tailwind bỏ qua theo mặc định.
Tailwind sử dụng thư mục làm việc hiện tại làm điểm bắt đầu khi quét tìm tên class theo mặc định.
Để thiết lập đường dẫn cơ sở cho việc phát hiện nguồn một cách rõ ràng, hãy sử dụng hàm source() khi import Tailwind trong CSS của bạn:
@import "tailwindcss" source("../src");Điều này có thể hữu ích khi làm việc với monorepo nơi các lệnh build của bạn chạy từ gốc của monorepo thay vì gốc của mỗi dự án.
Sử dụng @source not để bỏ qua các đường dẫn cụ thể, tương đối với stylesheet, khi quét tìm tên class:
@import "tailwindcss";@source not "../src/components/legacy";Điều này hữu ích khi bạn có các thư mục lớn trong dự án mà bạn biết không sử dụng các class Tailwind, như các component cũ hoặc thư viện bên thứ ba.
Sử dụng source(none) để vô hiệu hóa hoàn toàn việc phát hiện nguồn tự động nếu bạn muốn đăng ký tất cả các nguồn của mình một cách rõ ràng:
@import "tailwindcss" source(none);@source "../admin";@source "../shared";Điều này có thể hữu ích trong các dự án có nhiều stylesheet Tailwind nơi bạn muốn đảm bảo mỗi stylesheet chỉ bao gồm các class mà mỗi stylesheet cần.
Nếu bạn cần đảm bảo Tailwind tạo ra các tên class nhất định không tồn tại trong các file nội dung của bạn, hãy sử dụng @source inline() để buộc chúng được tạo ra:
@import "tailwindcss";@source inline("underline");.underline { text-decoration-line: underline;}Bạn cũng có thể sử dụng @source inline() để tạo các class với các variant. Ví dụ, để tạo class underline với các variant hover và focus, hãy thêm {hover:,focus:,} vào đầu vào nguồn:
@import "tailwindcss";@source inline("{hover:,focus:,}underline");.underline { text-decoration-line: underline;}@media (hover: hover) { .hover\:underline:hover { text-decoration-line: underline; }}@media (focus: focus) { .focus\:underline:focus { text-decoration-line: underline; }}Đầu vào nguồn được mở rộng dấu ngoặc nhọn, vì vậy bạn có thể tạo nhiều class cùng một lúc. Ví dụ, để tạo tất cả các màu nền đỏ với các variant hover, hãy sử dụng một phạm vi:
@import "tailwindcss";@source inline("{hover:,}bg-red-{50,{100..900..100},950}");.bg-red-50 { background-color: var(--color-red-50);}.bg-red-100 { background-color: var(--color-red-100);}.bg-red-200 { background-color: var(--color-red-200);}/* ... */.bg-red-800 { background-color: var(--color-red-800);}.bg-red-900 { background-color: var(--color-red-900);}.bg-red-950 { background-color: var(--color-red-950);}@media (hover: hover) { .hover\:bg-red-50:hover { background-color: var(--color-red-50); } /* ... */ .hover\:bg-red-950:hover { background-color: var(--color-red-950); }}Điều này tạo ra các màu nền đỏ từ 100 đến 900 với bước nhảy là 100, cùng với các sắc thái đầu tiên và cuối cùng là 50 và 950. Nó cũng thêm variant hover: cho mỗi class đó.
Sử dụng @source not inline() để ngăn các class cụ thể được tạo ra, ngay cả khi chúng được phát hiện trong các file nguồn của bạn:
@import "tailwindcss";@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");Điều này sẽ loại trừ rõ ràng các utility nền đỏ, cùng với các variant hover và focus của chúng, khỏi việc được tạo ra.