Add color-scheme utilities (#14567)

Replaces #11271 — the merge conflicts are killing me and it's way easier
to just do it again (added you as a co-author though @lukewarlow so
you're still credited!)

This PR adds the following new utilities for the `color-scheme`
property:

| Class               | CSS                        |
| ------------------- | -------------------------- |
| `scheme-normal`     | `color-scheme: normal`     |
| `scheme-dark`       | `color-scheme: dark`       |
| `scheme-light`      | `color-scheme: light`      |
| `scheme-light-dark` | `color-scheme: light dark` |
| `scheme-only-dark`  | `color-scheme: dark only`  |
| `scheme-only-light` | `color-scheme: light only` |

Went with `scheme-*` for the utilities because there are currently no
other CSS properties with the word `scheme` in them and
`scheme-light-dark` is going to be a common value which is three words
already even with the shortened property name.

I considered setting `color-scheme: light dark` by default as part of
Preflight for this PR but decided against it, at least for this PR. I
think that could still be a useful default but we should think about it
a bit more because if you're building a light-mode-only site it'll force
you to do some extra work.

---------

Co-authored-by: Adam Wathan <[email protected]>
Co-authored-by: Luke Warlow <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for prefixes ([#14501](https://github.com/tailwindlabs/tailwindcss/pull/14501))
 - Expose timing information in debug mode ([#14553](https://github.com/tailwindlabs/tailwindcss/pull/14553))
 - Add support for `blocklist` in config files ([#14556](https://github.com/tailwindlabs/tailwindcss/pull/14556))
+- Add `color-scheme` utilities ([#14567](https://github.com/tailwindlabs/tailwindcss/pull/14567))
 - _Experimental_: Migrate `@import "tailwindcss/tailwind.css"` to `@import "tailwindcss"` ([#14514](https://github.com/tailwindlabs/tailwindcss/pull/14514))
 - _Experimental_: Add template codemods for migrating `bg-gradient-*` utilities to `bg-linear-*` ([#14537](https://github.com/tailwindlabs/tailwindcss/pull/14537]))
 - _Experimental_: Add template codemods for migrating prefixes ([#14557](https://github.com/tailwindlabs/tailwindcss/pull/14557]))

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

@@ -3174,6 +3174,12 @@ exports[`getClassList 1`] = `
   "scale-z-75",
   "scale-z-90",
   "scale-z-95",
+  "scheme-dark",
+  "scheme-light",
+  "scheme-light-dark",
+  "scheme-normal",
+  "scheme-only-dark",
+  "scheme-only-light",
   "scroll-auto",
   "scroll-m-0.5",
   "scroll-m-1",

packages/tailwindcss/src/property-order.ts

@@ -281,6 +281,8 @@ export default [
   'caret-color',
   'accent-color',
 
+  'color-scheme',
+
   'opacity',
 
   'background-blend-mode',

packages/tailwindcss/src/utilities.test.ts

@@ -5907,6 +5907,70 @@ test('appearance', async () => {
   ).toEqual('')
 })
 
+test('color-scheme', async () => {
+  expect(
+    await run([
+      'scheme-normal',
+      'scheme-dark',
+      'scheme-light',
+      'scheme-light-dark',
+      'scheme-only-dark',
+      'scheme-only-light',
+    ]),
+  ).toMatchInlineSnapshot(`
+    ".scheme-dark {
+      --lightningcss-light: ;
+      --lightningcss-dark: initial;
+      color-scheme: dark;
+    }
+
+    .scheme-light {
+      --lightningcss-light: initial;
+      --lightningcss-dark: ;
+      color-scheme: light;
+    }
+
+    .scheme-light-dark {
+      --lightningcss-light: initial;
+      --lightningcss-dark: ;
+      color-scheme: light dark;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .scheme-light-dark {
+        --lightningcss-light: ;
+        --lightningcss-dark: initial;
+      }
+    }
+
+    .scheme-normal {
+      color-scheme: normal;
+    }
+
+    .scheme-only-dark {
+      --lightningcss-light: ;
+      --lightningcss-dark: initial;
+      color-scheme: dark only;
+    }
+
+    .scheme-only-light {
+      --lightningcss-light: initial;
+      --lightningcss-dark: ;
+      color-scheme: light only;
+    }"
+  `)
+  expect(
+    await run([
+      'scheme',
+      '-scheme-dark',
+      '-scheme-light',
+      '-scheme-light-dark',
+      '-scheme-dark-only',
+      '-scheme-light-only',
+    ]),
+  ).toEqual('')
+})
+
 test('columns', async () => {
   expect(
     await compileCss(

packages/tailwindcss/src/utilities.ts

@@ -1872,6 +1872,13 @@ export function createUtilities(theme: Theme) {
   staticUtility('appearance-none', [['appearance', 'none']])
   staticUtility('appearance-auto', [['appearance', 'auto']])
 
+  staticUtility('scheme-normal', [['color-scheme', 'normal']])
+  staticUtility('scheme-dark', [['color-scheme', 'dark']])
+  staticUtility('scheme-light', [['color-scheme', 'light']])
+  staticUtility('scheme-light-dark', [['color-scheme', 'light dark']])
+  staticUtility('scheme-only-dark', [['color-scheme', 'only dark']])
+  staticUtility('scheme-only-light', [['color-scheme', 'only light']])
+
   // columns-*
   staticUtility('columns-auto', [['columns', 'auto']])