Skip to content

Tailwind CSS focus/ring configuration

Background

We have a number of ways to set focus/ring styles in Tailwind. We have gl-focus, ring and outline. We should think about how we can align around one technique.

Considerations

  • Should we support adjusting the offset of the focus ring?
  • Should we continue to use gl-focus or should we move to using ring utility classes
  • If we stick with gl-focus can we modify it to be more flexible similar to the mixin?
  • Do we need custom colors for focus states? Or should we lock it down to only --gl-focus-ring-outer-color?
  • Should gl-focus automatically apply :focus? Or should you need to use it like focus:gl-focus?

References

Edited by Peter Hegman