Class/var name for on focus outline

[vnugent]

How do I customize component outline in tailwind.config.js?

[saadeghi]

Examples:

<input class="input input-bordered m-4 focus:outline-8">

<input class="input input-bordered m-4 focus:outline-primary">

<input class="input input-bordered m-4 focus:outline-dotted">

<input class="input input-bordered m-4 focus:outline-offset-8">

https://play.tailwindcss.com/ZL061JkSnh

[vnugent]

Thank you. I was hoping for a global variable that can be applied to button and input.

[saadeghi]

Tailwind CSS provides utility classes for the customization so I don't think adding CSS variables would count as an improvement for developer experience 🤔

[vnugent]

Perhaps it depends how we view the role of outline. In my mind it's a global preference similar to --rounded-box and --rounded-button. For example, I'd want all my buttons and form controls to have a lighter outline. Right now I think the outline is inherited from the component color which is quite heavy for my taste.