Utilitas Outline dan Ring
Tambahkan indikator fokus yang mudah diakses menggunakan utilitas ring-* yang ditampilkan di luar elemen tanpa memengaruhi tata letak.
Utilitas Outline dan Ring adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Mengapa Outline dan Ring Penting
Saat pengguna bernavigasi menggunakan papan ketik atau pembaca layar, indikator fokus yang terlihat sangat penting untuk mengetahui elemen mana yang aktif. Peramban menyediakan outline fokus bawaan, tetapi banyak desainer menonaktifkannya dengan outline-none tanpa menyediakan pengganti yang aksesibel. Utilitas ring-* Tailwind dirancang khusus untuk hal ini — utilitas tersebut membuat indikator fokus yang terlihat dan aksesibel, dengan tampilan yang lebih baik daripada bawaan peramban tanpa mengorbankan aksesibilitas.
<!-- Accessible focus ring replacing browser default -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Press Tab to focus me
</button>Cara Kerja Utilitas Ring
Ring Tailwind diimplementasikan menggunakan box-shadow, bukan properti CSS outline. Artinya, ring ikut dalam penumpukan bayangan dan dapat digabungkan dengan bayangan kotak lainnya. Utilitas ring-* menetapkan lebar ring, ring-{color} menetapkan warnanya, dan ring-offset-* menambahkan jarak antara elemen dan ring. Berbeda dari outline, ring tidak memengaruhi tata letak dan bekerja dengan benar bersama border-radius.
<!-- Ring details: width + color + offset -->
<div class="flex gap-6 p-6">
<!-- Width only -->
<button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:outline-none">
Ring width 2
</button>
<!-- Width + color -->
<button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
Colored ring
</button>
<!-- Width + color + offset -->
<button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none">
Ring with offset
</button>
</div>Utilitas Lebar Ring
Lebar ring berkisar dari ring-0 (tanpa ring) hingga ring-8 (8px). Nilai yang paling sering digunakan adalah ring-1, ring-2, dan ring-4. ring-2 menghasilkan indikator fokus yang terlihat jelas tetapi tidak berlebihan. Perhatikan bahwa berbeda dari border-*, ring tidak memiliki kendali arah — ring selalu mengelilingi seluruh elemen di semua sisi.
<!-- Ring width scale -->
<div class="flex gap-4 flex-wrap p-6">
<div class="w-16 h-16 bg-white rounded-lg ring-1 ring-blue-500 flex items-center justify-center text-xs">ring-1</div>
<div class="w-16 h-16 bg-white rounded-lg ring-2 ring-blue-500 flex items-center justify-center text-xs">ring-2</div>
<div class="w-16 h-16 bg-white rounded-lg ring-4 ring-blue-500 flex items-center justify-center text-xs">ring-4</div>
<div class="w-16 h-16 bg-white rounded-lg ring-8 ring-blue-500 flex items-center justify-center text-xs">ring-8</div>
</div>Warna dan Opasitas Ring
Tetapkan warna ring dengan ring-{color}-{shade}, seperti ring-indigo-500 atau ring-green-400. Warna ring harus memiliki kontras yang cukup dengan latar belakang elemen dan latar belakang halaman. Anda juga dapat menerapkan opasitas menggunakan pengubah garis miring: ring-blue-500/50 untuk ring semi-transparan. Ini menciptakan efek cahaya yang lebih lembut sambil tetap mempertahankan visibilitas yang memadai.
<!-- Semantic ring colors for different states -->
<div class="space-y-3 max-w-xs">
<input class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Default focus" />
<input class="w-full border border-green-300 rounded-lg px-4 py-2 ring-2 ring-green-400" placeholder="Success state" />
<input class="w-full border border-red-300 rounded-lg px-4 py-2 ring-2 ring-red-400" placeholder="Error state" />
</div>ring-offset dan ring-offset-color
ring-offset-* menambahkan ruang putih antara border elemen dan ring, sehingga ring tampak berbeda secara visual dari elemen itu sendiri. ring-offset-2 merupakan nilai yang paling umum dan menghasilkan jarak 2px. Secara bawaan, offset berwarna putih — pada latar belakang berwarna, sesuaikan dengan ring-offset-blue-600 untuk mengisi jarak dengan warna latar belakang, bukan putih, sehingga pemisahan visual tetap terjaga.
<!-- ring-offset creating visual separation -->
<div class="flex gap-4 items-center p-6">
<!-- On white: default white offset looks great -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg ring-2 ring-blue-500 ring-offset-2">
White bg offset
</button>
<!-- On colored bg: match offset to background -->
<div class="bg-blue-600 p-4 rounded-xl">
<button class="bg-white text-blue-600 px-4 py-2 rounded-lg ring-2 ring-white ring-offset-2 ring-offset-blue-600">
Colored bg offset
</button>
</div>
</div>ring-inset untuk Ring Bagian Dalam
ring-inset menggambar ring di bagian dalam elemen, bukan di luar, serupa dengan shadow-inner. Ini berguna saat ring luar akan berbenturan dengan elemen di dekatnya atau melampaui wadah yang terpotong. Ring bagian dalam juga berbeda secara visual — ring ini menyampaikan status terpilih atau aktif, bukan status fokus, sehingga berguna untuk komponen sakelar dan tab aktif.
<!-- Inner ring for active/selected states -->
<div class="flex gap-3">
<!-- Selected card with inner ring -->
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 ring-2 ring-inset ring-blue-500 cursor-pointer">
<div class="font-semibold text-blue-700">Basic Plan</div>
<div class="text-sm text-blue-600">$9/month</div>
</div>
<!-- Unselected card -->
<div class="bg-white border border-gray-200 rounded-xl p-4 cursor-pointer hover:border-gray-300">
<div class="font-semibold">Pro Plan</div>
<div class="text-sm text-gray-500">$29/month</div>
</div>
</div>Utilitas outline-*
Tailwind juga menyediakan utilitas untuk properti outline pada CSS. Meskipun ring biasanya lebih disarankan untuk gaya fokus, outline bawaan memiliki satu keunggulan unik: outline tidak terpengaruh oleh overflow-hidden—outline dirender di luar wadah yang terpotong. outline-none menghapus outline bawaan peramban, sedangkan outline, outline-2, dan outline-dashed menambahkan outline bergaya.
<!-- outline utilities -->
<div class="space-y-3 max-w-xs">
<!-- Remove default outline (bad practice alone!) -->
<button class="w-full bg-gray-200 p-2 rounded focus:outline-none">outline-none (no focus!)</button>
<!-- Custom outline -->
<button class="w-full bg-gray-200 p-2 rounded outline outline-2 outline-blue-500">
outline-2 outline-blue-500
</button>
<!-- Dashed outline -->
<button class="w-full bg-gray-200 p-2 rounded outline outline-dashed outline-2 outline-gray-400">
outline-dashed
</button>
</div>Utilitas outline-offset
outline-offset-* mengatur jarak antara batas elemen dan outline-nya, sama seperti ring-offset-* untuk ring. Nilai positif mendorong outline ke luar, sedangkan nilai negatif menariknya ke dalam. Utilitas ini berguna untuk membuat gaya fokus yang khas dan tetap mempertahankan jarak dari tepi elemen tanpa memengaruhi tata letak (outline tidak memengaruhi tata letak dalam CSS).
<!-- outline-offset creates space between element and outline -->
<div class="flex gap-6 p-6">
<button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-0">
offset-0
</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-2">
offset-2
</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-4">
offset-4
</button>
</div>Praktik Terbaik: Varian focus-visible
Pola focus-visible:ring-* hanya menampilkan ring fokus untuk navigasi dengan papan ketik, bukan untuk klik tetikus. Ini mengatasi konflik pengalaman pengguna antara perancang (yang tidak menyukai ring yang terlihat saat mengeklik dengan tetikus) dan persyaratan aksesibilitas (yang mewajibkan fokus terlihat bagi pengguna papan ketik). Dalam proyek Tailwind modern, selalu utamakan focus-visible:ring-2 daripada focus:ring-2.
<!-- focus-visible: best practice for modern a11y -->
<div class="flex gap-4">
<!-- Ring shows for keyboard, hidden for mouse -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
Smart Focus Ring
</button>
<!-- Compare: always visible on any focus -->
<button class="bg-gray-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
Always Visible Ring
</button>
</div>Ring dalam Komponen Interaktif
Ring sangat berguna dalam pola interaktif yang kompleks. Implementasi khusus kotak centang dan tombol radio, tag pilihan ganda, serta pemilih warna semuanya menggunakan ring untuk menampilkan status pilihan dengan jelas. Berikut pola pemilih warna yang menampilkan indikator ring di bagian dalam swatch yang dipilih—pola umum pada pemilih palet warna dan pemilih tema.
<!-- Color picker with ring-based selection indicator -->
<div class="flex gap-3">
<!-- Selected: shows inset ring -->
<button class="w-10 h-10 rounded-full bg-blue-500 ring-2 ring-blue-500 ring-offset-2" aria-label="Blue (selected)"></button>
<!-- Unselected swatches -->
<button class="w-10 h-10 rounded-full bg-purple-500 hover:ring-2 hover:ring-purple-500 hover:ring-offset-2 transition-all" aria-label="Purple"></button>
<button class="w-10 h-10 rounded-full bg-green-500 hover:ring-2 hover:ring-green-500 hover:ring-offset-2 transition-all" aria-label="Green"></button>
<button class="w-10 h-10 rounded-full bg-red-500 hover:ring-2 hover:ring-red-500 hover:ring-offset-2 transition-all" aria-label="Red"></button>
</div>Menggabungkan Ring, Bayangan, dan Batas
Karena ring diimplementasikan dengan box-shadow, Anda dapat menggabungkannya dengan utilitas bayangan lain dari Tailwind dengan mencantumkan kelas bayangan dan ring. Properti box-shadow menumpuk beberapa nilai. Dengan demikian, kartu dapat memiliki bayangan elevasi dan ring fokus secara bersamaan, sehingga penanda interaktif tidak menghilangkan kedalaman visual.
<!-- Card that keeps its shadow AND gets a ring on focus -->
<div class="p-6">
<button class="w-full text-left bg-white rounded-xl shadow-md border border-gray-200 p-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 hover:shadow-lg transition-shadow">
<h3 class="font-bold">Clickable Card</h3>
<p class="text-gray-500 text-sm mt-1">Has shadow + focus ring when keyboard focused.</p>
</button>
</div>Pemeriksaan Singkat
Uji pemahaman Anda tentang konsep Tailwind CSS Mastery dari pelajaran ini.
Rangkuman Pelajaran
Dalam pelajaran ini Anda mempelajari bahwa: utilitas ring-* membuat indikator fokus yang aksesibel menggunakan box-shadow tanpa memengaruhi tata letak, ring-offset-* menambahkan pemisah visual antara elemen dan ring fokusnya, serta focus-visible:ring-* adalah praktik terbaik modern yang hanya menampilkan ring bagi pengguna papan ketik. Selanjutnya, kita akan membahas varian keadaan hover dan aktif untuk gaya interaktif.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Utilitas Outline dan Ring” gratis?
Ya — teks lengkap “Utilitas Outline dan Ring” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Utilitas Outline dan Ring”?
Tambahkan indikator fokus yang mudah diakses menggunakan utilitas ring-* yang ditampilkan di luar elemen tanpa memengaruhi tata letak. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Utilitas Outline dan Ring” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Lebar dan Warna Border
- Radius Border dan Sudut Membulat
- Bayangan Kotak
- Utilitas Outline dan Ring