Lớp này chấp nhận nhiều giá trị trong Tailwind CSS. Tất cả thuộc tính đều được trình bày dưới dạng lớp (class). Lớp này dùng để kiểm soát đường viền (outline) của một phần tử.
Các lớp Outline:
- outline-none: Lớp này dùng để ẩn đường viền mặc định của trình duyệt khi phần tử được focus.
- outline-white: Lớp này thêm đường viền chấm trắng 2px xung quanh phần tử. Đường viền có offset 2px.
- outline-black: Lớp này thêm đường viền chấm đen 2px xung quanh phần tử. Đường viền có offset 2px.
Cú pháp:
<element class="outline-{style}">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Outline Class</b>
<div class="mx-6 bg-green-200 grid grid-rows-3
grid-flow-col text-justify p-4">
<input class="placeholder-gray-500 p-3 m-2 rounded-lg
border-2 border-green-400 bg-green-100
focus:outline-none"
placeholder="Outline-none">
<input class="placeholder-gray-500 p-3 m-2 rounded-lg
border-2 border-green-400 bg-green-100
focus:outline-white"
placeholder="Outline-white">
<input class="placeholder-gray-500 p-3 m-2 rounded-lg
border-2 border-green-400 bg-green-100
focus:outline-black"
placeholder="Outline-black">
</div>
</body>
</html>
Đầu ra:
