Why is the default outline not removed?

[jeroenvanrensen]

Hi everyone,

I'm a big fan of Tailwind CSS, but there is one thing that really annoys me.

Every time I have a button I have to apply focus:outline-none and for each a tag I have to apply outline-none.

Can't that just be default?

I'm happy to hear how you think about this.

Jeroen

[chr-ge]

This should work well.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  button {
    @apply focus:outline-none;
  }
  a {
    @apply outline-none;
  }
}

Tailwind Docs

[simonswiss]

Hi @jeroenvanrensen 👋

It's not the default because that outline is very important for accessibility reasons.

If you're going to remove it, it's recommended that you always implement a visual replacement for that outline. The ring utilities are great for this!

Here's a quick video that explains them in details: https://www.youtube.com/watch?v=ZbefZhgq9iQ

Now, you could do what @chr-ge suggests above, but I would add the base focus:ring class as a substitute as well:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  button {
    @apply focus:outline-none focus:ring;
  }
}

[jeroenvanrensen]

@simonswiss Okay I understand thank you very much!

[simonswiss]

No problem - glad I could help 👍