CSS nội dung

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 Tailwind

Hướ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ạn

Cá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ự án

khuyế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ốn

Khô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ơn

Hã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

  

    

  

  

    

      Marketing
    
    
      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ạn

​Sử 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ẫn

Khô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

1

Mộ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ư

3

Nế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

4

Loạ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

4

Bạ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ạn

Tù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ác

Khô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 quy

---

Chuyể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ớp

Khi 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

5

---

Sử 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

5

---

xử 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ợp

Mộ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ình

Hoặ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 PostCSS

Nhiề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ựng

Nế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ày

Dù 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

CSS nội dung là gì?

Làm cách nào để đưa nội dung vào CSS?

Nội dung CSS có thể là HTML không?

Vùng nội dung CSS là gì?