Các tiện ích để kiểm soát kiểu outline của một phần tử.
| Class | Styles |
|---|---|
outline-solid | outline-style: solid; |
outline-dashed | outline-style: dashed; |
outline-dotted | outline-style: dotted; |
outline-double | outline-style: double; |
outline-none | outline-style: none; |
outline-hidden | outline: 2px solid transparent;
outline-offset: 2px; |
Sử dụng các tiện ích như outline-solid và outline-dashed để đặt kiểu outline của một phần tử:
outline-solid
outline-dashed
outline-dotted
outline-double
<button class="outline-2 outline-offset-2 outline-solid ...">Button A</button><button class="outline-2 outline-offset-2 outline-dashed ...">Button B</button><button class="outline-2 outline-offset-2 outline-dotted ...">Button C</button><button class="outline-3 outline-offset-2 outline-double ...">Button D</button>Sử dụng tiện ích outline-hidden để ẩn outline mặc định của trình duyệt trên các phần tử được focus, trong khi vẫn giữ outline trong chế độ forced colors:
Try emulating `forced-colors: active` in your developer tools to see the behavior
<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />Rất khuyến khích áp dụng kiểu focus riêng của bạn để đảm bảo khả năng truy cập khi sử dụng tiện ích này.
Sử dụng tiện ích outline-none để loại bỏ hoàn toàn outline mặc định của trình duyệt trên các phần tử được focus:
<div class="focus-within:outline-2 focus-within:outline-indigo-600 ..."> <textarea class="outline-none ..." placeholder="Leave a comment..." /> <button class="..." type="button">Post</button></div>Rất khuyến khích áp dụng kiểu focus riêng của bạn để đảm bảo khả năng truy cập khi sử dụng tiện ích này.
Prefix an outline-style utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="outline md:outline-dashed ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.