[Checkbox] Tailwind example focus state does not work

[Studio384]

Bug report

Current behavior

The focus style of the checkbox does not work when using the Tailwind example. The same issue appears in the checkbox group demo.

Expected behavior

The lines around the checkbox are shown. This seems to be fixed by adding a focus-visible:outline-solid class. This is probably the result of the examples not being properly updated for Tailwind 4.

 <label className="flex items-center gap-2 text-base text-gray-900">
   <BaseCheckbox.Root
     defaultChecked
-    className="flex size-5 items-center justify-center rounded-sm outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
+    className="flex size-5 items-center justify-center rounded-sm outline-none focus-visible:outline-solid focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-gray-900 data-[unchecked]:border data-[unchecked]:border-gray-300"
   >
     <BaseCheckbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
       <CheckIcon className="size-3" />
     </BaseCheckbox.Indicator>
   </BaseCheckbox.Root>
   Enable notifications
 </label>

Reproducible example

https://base-ui.com/react/components/checkbox#

Base UI version

For example v1.0.0-alpha.6 and latest master branch.

Which browser are you using?

Firefox and Edge

Which OS are you using?

Windows

Which assistive tech are you using (if applicable)?

N/A

Additional context

[atomiks]

We need to support Tailwind v3 and v4 simultaneously though, is there a backwards-compatible outline style?

[vladmoroz]

@atomiks is v3 support required? I saw v4 added the CDN version that could be used in CodeSandbox (which was the limiting factor when I initially worked on the demos), so it'd be possible to migrate all demos to v4. iirc it was really high-effort to test thoroughly in both.

[atomiks]

Given >50% of Tailwind users will still be on it for a while, I'd say probably. v3 currently has over 6M downloads per week (can't find the downloads-by-major tool we had to see the precise % share). Adding a version to the selector like "Tailwind CSS v4" and shifting the burden onto users is possible but doesn't seem very dev friendly in practice