Fighting Tailwind Forms

I have an existing project. I finally decided to use tailwind to style it. I went ahead and purchased tailwind UI because ain't nobody got time for design. I went forward by implementing some form elements and a checkbox. The forms plugin came in really clutch here and gave me a really pretty checkbox that was colored to match the rest of the app. However, the default input focus rings were still part of my app, in the other parts that weren't yet tailwinded.

By reading the docs (imagine that) I was able to find the "opt-in" mode for the plugin, I was able to adapt the individual checkbox to give me the pretty green color without the plugin affecting every single other input in the app with default indigo focus rings. Problem solved!

<input
  id="comments"
  name="comments"
  type="checkbox"
  checked={state.waiverAcceptance.state === 'VALID'}
  className="w-4 h-4 text-green-600 border-gray-300 rounded form-checkbox focus:ring-green-500"
  onChange={() => {
    send({ type: 'WAIVER_TOGGLED' });
  }}
/>