From 1e0e636238b102c8aa4febd64a225f9940aebd67 Mon Sep 17 00:00:00 2001
From: Sueun Cho <sueun.dev@gmail.com>
Date: Tue, 2 Jun 2026 18:27:23 -0400
Subject: [PATCH] docs: clarify checked checkbox background styling

---
 README.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index f816930..36e079f 100644
--- a/README.md
+++ b/README.md
@@ -67,10 +67,12 @@ Every element has been normalized/reset to a simple visually consistent style th
   <!-- ... -->
 </select>
 
-<!-- Or change a checkbox color using text color utilities: -->
-<input type="checkbox" class="rounded text-pink-500" />
+<!-- Or give a checked checkbox its own background color: -->
+<input type="checkbox" class="rounded checked:bg-pink-500" />
 ```
 
+If you give checkboxes or radios an unchecked background with `bg-*`, use `checked:bg-*` for the checked color. These controls use custom appearance styles, so native `accent-*` utilities do not control the rendered checked background.
+
 More customization examples and best practices coming soon.
 
 ### Using classes to style
@@ -84,7 +86,7 @@ In addition to the global styles, we also generate a set of corresponding classe
   <!-- ... -->
 </select>
 
-<input type="checkbox" class="form-checkbox rounded text-pink-500" />
+<input type="checkbox" class="form-checkbox rounded checked:bg-pink-500" />
 ```
 
 Here is a complete table of the provided `form-*` classes for reference: