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>

CHANGELOG.md

@@ -61,6 +61,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Rename `--letter-spacing-*` variables to `--tracking-*` ([#14921](https://github.com/tailwindlabs/tailwindcss/pull/14921))
 - Rename `--line-height-*` variables to `--leading-*` ([#14925](https://github.com/tailwindlabs/tailwindcss/pull/14925))
 - Revert specificity of `*` variant to match v3 behavior ([#14920](https://github.com/tailwindlabs/tailwindcss/pull/14920))
+- Replace `outline-none` with `outline-hidden`, add new simplified `outline-none` utility ([#14926](https://github.com/tailwindlabs/tailwindcss/pull/14926))
 
 ## [4.0.0-alpha.31] - 2024-10-29
 

packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.test.ts

@@ -32,6 +32,8 @@ test.each([
 
   ['blur', 'blur-sm'],
   ['blur-sm', 'blur-xs'],
+
+  ['focus:outline-none', 'focus:outline-hidden'],
 ])('%s => %s', async (candidate, result) => {
   let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
     base: __dirname,

packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts

@@ -30,6 +30,8 @@ const LEGACY_CLASS_MAP = {
 
   blur: 'blur-sm',
   'blur-sm': 'blur-xs',
+
+  'outline-none': 'outline-hidden',
 }
 
 const SEEDED = new WeakSet<DesignSystem>()

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -4561,6 +4561,7 @@ exports[`getClassList 1`] = `
   "outline-dashed",
   "outline-dotted",
   "outline-double",
+  "outline-hidden",
   "outline-inherit",
   "outline-inherit/0",
   "outline-inherit/5",

packages/tailwindcss/src/utilities.test.ts

@@ -14355,11 +14355,6 @@ test('outline', async () => {
       --color-red-500: #ef4444;
     }
 
-    .outline-none {
-      outline-offset: 2px;
-      outline: 2px solid #0000;
-    }
-
     .outline {
       outline-style: var(--tw-outline-style);
       outline-width: 1px;
@@ -14469,6 +14464,11 @@ test('outline', async () => {
       outline-style: double;
     }
 
+    .outline-none {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
     .outline-solid {
       --tw-outline-style: solid;
       outline-style: solid;

packages/tailwindcss/src/utilities.ts

@@ -3704,14 +3704,18 @@ export function createUtilities(theme: Theme) {
       return atRoot([property('--tw-outline-style', 'solid', '<custom-ident>')])
     }
 
-    staticUtility('outline-none', [
+    staticUtility('outline-hidden', [
       ['outline', '2px solid transparent'],
       ['outline-offset', '2px'],
     ])
 
     /**
      * @css `outline-style`
      */
+    staticUtility('outline-none', [
+      ['--tw-outline-style', 'none'],
+      ['outline-style', 'none'],
+    ])
     staticUtility('outline-solid', [
       ['--tw-outline-style', 'solid'],
       ['outline-style', 'solid'],
@@ -3939,9 +3943,7 @@ export function createUtilities(theme: Theme) {
           ),
           decl(
             'letter-spacing',
-            options['--tracking']
-              ? `var(--tw-tracking, ${options['--tracking']})`
-              : undefined,
+            options['--tracking'] ? `var(--tw-tracking, ${options['--tracking']})` : undefined,
           ),
           decl(
             'font-weight',