diff --git a/packages/@tailwindcss-postcss/README.md b/packages/@tailwindcss-postcss/README.md index 3facf2887..953c3ad24 100644 --- a/packages/@tailwindcss-postcss/README.md +++ b/packages/@tailwindcss-postcss/README.md @@ -88,6 +88,25 @@ export default { } ``` +### Enabling or disabling the `color-mix(…)` polyfill + +For browsers without `color-mix()` support (Safari < 16.2), the plugin emits every `color-mix(…)` declaration twice: a plain fallback declaration, plus the original gated behind `@supports (color: color-mix(in lab, red, red))`. This is enabled by default. + +If every browser you support has `color-mix()`, you can set `colorMixPolyfill` to `false` to drop the duplicated declarations from the output: + +```js +import tailwindcss from '@tailwindcss/postcss' + +export default { + plugins: [ + tailwindcss({ + // Disable the `color-mix(…)` fallbacks + colorMixPolyfill: false, + }), + ], +} +``` + ### Enabling or disabling `url(…)` rewriting Our PostCSS plugin can rewrite `url(…)`s for you since it also handles `@import` (no `postcss-import` is needed). This feature is enabled by default. diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 9a8f1931a..f730a0395 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -111,7 +111,7 @@ test('`color-mix(…)` fallbacks can be disabled', async () => { let withPolyfill = await postcss([ tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }), ]).process(input, { from: inputCssFilePath() }) - expect(withPolyfill.css).toContain('color-mix(in lab, red, red)') + expect(withPolyfill.css).toContain('@supports (color: color-mix(in lab, red, red))') // Disabled: the declaration ships once, and nothing else changes. let withoutPolyfill = await postcss([