Applying Global Focus Styles in Tailwind CSS

[onurhan1337]

I'm working on a project where I need to apply the same focus styles to all focusable elements. I've found a solution where I extend the default styles in the tailwind.config.js file and then use the @layer directive to apply these styles to all focusable elements. This seems to work well, but I'm wondering if there are other, perhaps better, ways to achieve this. Any suggestions or best practices are welcome.

example globals.css:

@layer base {
  button,
  a,
  input,
  select,
  textarea {
    @apply focus:outline-blue focus:ring;
  }
}

[Pascalmh]

This could be an alternative to apply the styling to any element that is focusable, so you don't need to list the html elements (button, a, input, …)

@layer base {
  *:focus {
      @apply outline-blue ring;
  }
}