tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

History

Replace outline-none with outline-hidden, add new outline-none (#14926 )

This PR renames the existing `outline-none` utility to `outline-hidden`,
and adds a new simpler `outline-none` utility that just sets
`outline-style: none`.

The existing `outline-none` utility doesn't actually set `outline:
none`, and instead creates a 2px invisible outline:

```css
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
```

We implemented it this way because people often use `outline: none` to
hide focus rings and replace them with custom shadow-based focus rings,
without realizing that that approach leads to no visible focus ring in
forced colors mode because box shadows aren't rendered in forced colors
mode.

While this is sort of helpful and clever, it can be a pain when you
really do need `outline: none`, and I think it feels surprising in
hindsight to hijack the name of an existing CSS property value and make
it mean something else.

The name `outline-hidden` feels better because it's a new keyword that
CSS doesn't use for outlines, and implies that perhaps there's a bit
more going on than just setting `outline-style: none`.

This PR includes a codemod to convert any existing use of `outline-none`
to `outline-hidden`, and we will be sure to explain what
`outline-hidden` does for you in the v4 documentation.

Manually tested this in the Vite playground to make sure it behaves as
expected 👍

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

2024-11-08 20:03:12 +01:00

src

Replace outline-none with outline-hidden, add new outline-none (#14926 )

2024-11-08 20:03:12 +01:00

package.json

Fix crash during upgrade when content globs escape root of project (#14896 )

2024-11-07 12:22:25 +00:00

README.md

Add initial codemod tooling (#14434 )

2024-09-18 16:45:43 +02:00

tsconfig.json

Internal refactor, introduce AtRule (#14802 )