From ed1097e3e632941ef7c930ec5c1eef7bb384b66b Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Thu, 7 Nov 2024 21:12:05 -0500 Subject: [PATCH 1/4] Don't give input elements a transparent background by default --- .../src/__snapshots__/index.test.ts.snap | 4 ++- packages/tailwindcss/preflight.css | 25 +++++++++++++------ 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 24d0c8fa484d..39baefaa01eb 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -467,7 +467,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` font-variation-settings: inherit; letter-spacing: inherit; color: inherit; - background: none; } ::file-selector-button { @@ -476,6 +475,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` font-variation-settings: inherit; letter-spacing: inherit; color: inherit; + } + + button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { background: none; } diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css index 6e57b9faadf3..afeaa1d5955e 100644 --- a/packages/tailwindcss/preflight.css +++ b/packages/tailwindcss/preflight.css @@ -175,8 +175,7 @@ table { } /* - 1. Inherit the font styles in all browsers. - 2. Remove the default background color. + Inherit font styles in all browsers. */ button, @@ -185,12 +184,22 @@ optgroup, select, textarea, ::file-selector-button { - font: inherit; /* 1 */ - font-feature-settings: inherit; /* 1 */ - font-variation-settings: inherit; /* 1 */ - letter-spacing: inherit; /* 1 */ - color: inherit; /* 1 */ - background: transparent; /* 2 */ + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; +} + +/* + Remove the default background color of buttons by default. +*/ + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + background: transparent; } /* From 970e1986271811520a2592566569c3ce26cd97c6 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Thu, 7 Nov 2024 21:16:06 -0500 Subject: [PATCH 2/4] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b7a97d63d85e..e1da5ce36416 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Rebase `url()` inside imported CSS files when using Vite ([#14877](https://github.com/tailwindlabs/tailwindcss/pull/14877)) - Ensure that CSS transforms from other Vite plugins correctly work in full builds (e.g. `:deep()` in Vue) ([#14871](https://github.com/tailwindlabs/tailwindcss/pull/14871)) - Don't unset keys like `--inset-shadow-*` when unsetting keys like `--inset-*` ([#14906](https://github.com/tailwindlabs/tailwindcss/pull/14906)) +- Don't override user-agent background color for input elements in Preflight ([#14913](https://github.com/tailwindlabs/tailwindcss/pull/14913)) - _Upgrade (experimental)_: Install `@tailwindcss/postcss` next to `tailwindcss` ([#14830](https://github.com/tailwindlabs/tailwindcss/pull/14830)) - _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838)) - _Upgrade (experimental)_: Fix crash during upgrade when content globs escape root of project ([#14896](https://github.com/tailwindlabs/tailwindcss/pull/14896)) From 6e1405b7a4452f77e3ee7e96b05ec4adf217afd1 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 8 Nov 2024 09:46:19 -0500 Subject: [PATCH 3/4] Combine selectors --- packages/tailwindcss/preflight.css | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css index afeaa1d5955e..cafbaffb100f 100644 --- a/packages/tailwindcss/preflight.css +++ b/packages/tailwindcss/preflight.css @@ -191,17 +191,6 @@ textarea, color: inherit; } -/* - Remove the default background color of buttons by default. -*/ - -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - background: transparent; -} - /* Reset the default inset border style for form controls to solid. */ @@ -213,12 +202,15 @@ textarea { } /* - Correct the inability to style the border radius in iOS Safari. + 1. Remove the default background color of buttons by default. + 2. Correct the inability to style the border radius in iOS Safari. */ + button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { - appearance: button; + background: transparent; /* 1 */ + appearance: button; /* 2 */ } /* From 1a33648564936c0f576b844ba6ce840b3172a384 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 8 Nov 2024 09:49:11 -0500 Subject: [PATCH 4/4] Update snapshots --- .../src/__snapshots__/index.test.ts.snap | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 39baefaa01eb..ad9c3ff71f41 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -477,20 +477,18 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` color: inherit; } - button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { - background: none; - } - input:where(:not([type="button"], [type="reset"], [type="submit"])), select, textarea { border-width: 1px; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; + background: none; } ::file-selector-button { appearance: button; + background: none; } :-moz-focusring {