Tailwind Example - Outlined Button Gotcha

The "Gotcha": Forgetting `bg-transparent` if an element has a default background from elsewhere, and not providing clear `hover`/`focus` states.

Button inside a styled container:

This button relies on the default transparent background of a `<button>`. In most cases, this works fine. Hover/Focus states are good.

This button explicitly uses `bg-transparent` for robustness against other styles.
It also features distinct `hover:bg-purple-600 hover:text-white` and `focus:ring-2` states.

Gotcha Summary:

`bg-transparent` : While standard HTML buttons are often transparent by default, explicitly using `bg-transparent` ensures the outlined effect if there are other CSS rules (e.g., from a component library or global styles) that might give the button a default background color.
Clear Hover/Focus States : Outlined buttons can have low contrast. It's essential to provide very clear visual feedback on hover and focus. Common practice is to "fill" the button with color on hover/focus or add a prominent ring.

Addressing the "Gotcha" for Outlined Buttons

Button inside a styled container:

Gotcha Summary: