Các tiện ích để kiểm soát tracking, hoặc khoảng cách giữa các chữ cái, của một phần tử.
| Class | Styles |
|---|---|
tracking-tighter | letter-spacing: var(--tracking-tighter); /* -0.05em */ |
tracking-tight | letter-spacing: var(--tracking-tight); /* -0.025em */ |
tracking-normal | letter-spacing: var(--tracking-normal); /* 0em */ |
tracking-wide | letter-spacing: var(--tracking-wide); /* 0.025em */ |
tracking-wider | letter-spacing: var(--tracking-wider); /* 0.05em */ |
tracking-widest | letter-spacing: var(--tracking-widest); /* 0.1em */ |
tracking-(<custom-property>) | letter-spacing: var(<custom-property>); |
tracking-[<value>] | letter-spacing: <value>; |
Sử dụng các tiện ích như tracking-tight và tracking-wide để đặt khoảng cách giữa các chữ cái của một phần tử:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="tracking-tight ...">The quick brown fox ...</p><p class="tracking-normal ...">The quick brown fox ...</p><p class="tracking-wide ...">The quick brown fox ...</p>Sử dụng giá trị âm không có nhiều ý nghĩa với thang đo khoảng cách chữ cái được đặt tên mà Tailwind bao gồm sẵn, nhưng nếu bạn đã tùy chỉnh thang đo của mình để sử dụng số thì nó có thể hữu ích:
@theme { --tracking-1: 0em; --tracking-2: 0.025em; --tracking-3: 0.05em; --tracking-4: 0.1em;}Để sử dụng giá trị khoảng cách chữ cái âm, hãy thêm dấu gạch ngang trước tên class để chuyển đổi nó thành giá trị âm:
<p class="-tracking-2">The quick brown fox ...</p>Use the tracking-[<value>] syntax to set the letter spacing based on a completely custom value:
<p class="tracking-[.25em] ..."> Lorem ipsum dolor sit amet...</p>For CSS variables, you can also use the tracking-(<custom-property>) syntax:
<p class="tracking-(--my-tracking) ..."> Lorem ipsum dolor sit amet...</p>This is just a shorthand for tracking-[var(<custom-property>)] that adds the var() function for you automatically.
Prefix a letter-spacing utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="tracking-tight md:tracking-wide ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.
Use the --tracking-* theme variables to customize the letter spacing utilities in your project:
@theme { --tracking-tightest: -0.075em; }Now the tracking-tightest utility can be used in your markup:
<p class="tracking-tightest"> Lorem ipsum dolor sit amet...</p>Learn more about customizing your theme in the theme documentation.