archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Revert new default form styles (#15100)

Browse Source 
Closes #15071

This PR reverts the changes in #15036 which add consistent base styles
for buttons and form controls to Preflight.

While this felt like a good idea (for the reasons explained in that PR),
practically this is just too disruptive of a change for people upgrading
from v3 to v4.

While updating some of our projects to v4 we found ourselves adding
classes to undo styles more often than we expected, and it also felt
inconsistent to have to use a different set of classes to style a link
or a button when we wanted them to look the same.

We also decided it feels a little strange that you could change the
border color of an element without ever specifying that it should have a
border, for example this just feels a little wrong:

```html
<button class="border-blue-500">
```

We also needed to set a default `color-scheme` value for any of this
stuff to work which breaks the ability to use the `color-scheme` meta
tag.

Since this change was a fairly major breaking change and we aren't
feeling much benefit from it, it doesn't feel worth making this change
for v4.

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>
This commit is contained in:
Jonathan Reinink 2024-11-22 08:55:05 -05:00 committed by GitHub
parent 92bf26ba1a
commit dad9ac6209
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 59 additions and 988 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Use configured `--letter-spacing` values for custom font size utilities ([#15099](https://github.com/tailwindlabs/tailwindcss/pull/15099))
- Ensure `space-x/y-*` and `divide-x/y-*` with variants can undo `space-x/y-reverse` and `divide-x/y-reverse` ([#15094](https://github.com/tailwindlabs/tailwindcss/pull/15094))
### Changed
- Revert the new base styles for buttons and form controls ([#15100](https://github.com/tailwindlabs/tailwindcss/pull/15100))
## [4.0.0-beta.1] - 2024-11-21
### Added

340
integrations/upgrade/index.test.ts
View File

@ -120,23 +120,6 @@ test(
--- ./src/input.css ---
@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -229,23 +212,6 @@ test(
--- ./src/input.css ---
@import 'tailwindcss' prefix(tw);
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -310,23 +276,6 @@ test(
--- ./src/index.css ---
@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -399,23 +348,6 @@ test(
--- ./src/index.css ---
@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -493,23 +425,6 @@ test(
--- ./src/index.css ---
@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -619,23 +534,6 @@ test(
@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1140,23 +1038,6 @@ test(
@import 'tailwindcss';
@import './utilities.css';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1605,23 +1486,6 @@ test(
@config './tailwind.config.ts';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1646,23 +1510,6 @@ test(
@config "../../tailwind.config.ts";
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1697,23 +1544,6 @@ test(
--color-blue-500: #00f;
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1743,23 +1573,6 @@ test(
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/preflight' layer(base);
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1791,23 +1604,6 @@ test(
@config '../../tailwind.config.ts';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1988,23 +1784,6 @@ test(
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/preflight' layer(base);
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -2141,23 +1920,6 @@ test(
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/preflight' layer(base);
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -2275,23 +2037,6 @@ test(
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/preflight' layer(base);
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -2367,23 +2112,6 @@ test(
@import 'tailwindcss';
@import './styles/components.css' layer(components);
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -2609,23 +2337,6 @@ test(
--radius-sm: var(--custom-rounded-sm);
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -2710,23 +2421,6 @@ test(
--- index.css ---
@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -2840,23 +2534,6 @@ test(
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/preflight' layer(base);
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -3035,23 +2712,6 @@ test(
--opacity-100\\%: 100%;
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still

289
integrations/upgrade/js-config.test.ts
View File

@ -267,23 +267,6 @@ test(
}
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -393,23 +376,6 @@ test(
is-arr-mixed: null, true, false, 1234567, 1.35, 'foo', 'bar', 'true';
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -492,23 +458,6 @@ test(
--color-gray-950: oklch(0.145 0 0);
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -583,23 +532,6 @@ test(
@config '../tailwind.config.ts';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -678,23 +610,6 @@ test(
@config '../tailwind.config.ts';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -769,23 +684,6 @@ test(
@config '../tailwind.config.ts';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -898,23 +796,6 @@ test(
--color-primary: red;
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -940,23 +821,6 @@ test(
--color-primary: blue;
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1034,23 +898,6 @@ test(
--color-primary: red;
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1111,23 +958,6 @@ describe('border compatibility', () => {
--- src/input.css ---
@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1190,23 +1020,6 @@ describe('border compatibility', () => {
--- src/input.css ---
@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1268,23 +1081,6 @@ describe('border compatibility', () => {
"
--- src/input.css ---
@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
"
`)
},
@ -1328,23 +1124,6 @@ describe('border compatibility', () => {
--- src/tailwind.css ---
@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1414,23 +1193,6 @@ describe('border compatibility', () => {
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/preflight' layer(base);
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1549,23 +1311,6 @@ describe('border compatibility', () => {
--spacing-miami: 1337px;
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1680,23 +1425,6 @@ describe('border compatibility', () => {
--spacing-miami: 1337px;
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -1800,23 +1528,6 @@ describe('border compatibility', () => {
}
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still

106
packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
View File

@ -393,11 +393,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
--lightningcss-light: initial;
--lightningcss-dark: ;
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light;
}
body {
@ -496,6 +491,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0;
}
::file-selector-button {
@ -504,6 +502,21 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
@ -588,89 +601,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
height: auto;
}
select, textarea, input:where([type="text"], [type="email"], [type="password"], [type="date"], [type="datetime-local"], [type="month"], [type="number"], [type="search"], [type="time"], [type="week"], [type="tel"], [type="url"]) {
color: var(--lightningcss-light, #000) var(--lightningcss-dark, #fff);
background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #ffffff1a);
border: 1px solid var(--lightningcss-light, #00000080) var(--lightningcss-dark, #ffffff40);
border-radius: 3px;
padding-block: 2px;
padding-inline: 4px;
}
:where(select:not([multiple], [size])) option, :where(select:not([multiple], [size])) optgroup {
color: fieldtext;
background-color: field;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bold;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
select:where(:disabled), textarea:where(:disabled), input:where([type="text"], [type="email"], [type="password"], [type="date"], [type="datetime-local"], [type="month"], [type="number"], [type="search"], [type="time"], [type="week"], [type="tel"], [type="url"]):where(:disabled) {
opacity: 1;
color: var(--lightningcss-light, #00000080) var(--lightningcss-dark, #ffffff80);
background-color: var(--lightningcss-light, #00000006) var(--lightningcss-dark, #ffffff1a);
border-color: var(--lightningcss-light, #0003) var(--lightningcss-dark, #ffffff26);
}
button, input:where([type="button"], [type="reset"], [type="submit"]) {
color: var(--lightningcss-light, #000) var(--lightningcss-dark, #fff);
background-color: var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #fff6);
border: 1px solid var(--lightningcss-light, #00000080) var(--lightningcss-dark, #ffffff1a);
border-radius: 4px;
padding-block: 2px;
padding-inline: 4px;
}
::file-selector-button {
color: var(--lightningcss-light, #000) var(--lightningcss-dark, #fff);
background-color: var(--lightningcss-light, #0000000d) var(--lightningcss-dark, #fff6);
border: 1px solid var(--lightningcss-light, #00000080) var(--lightningcss-dark, #ffffff1a);
border-radius: 4px;
padding-block: 2px;
padding-inline: 4px;
}
button:where(:hover), input:where([type="button"], [type="reset"], [type="submit"]):where(:hover) {
background-color: var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #ffffff73);
}
::file-selector-button:where(:hover) {
background-color: var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #ffffff73);
}
button:where(:active), input:where([type="button"], [type="reset"], [type="submit"]):where(:active) {
background-color: var(--lightningcss-light, #00000006) var(--lightningcss-dark, #ffffff4d);
}
::file-selector-button:where(:active) {
background-color: var(--lightningcss-light, #00000006) var(--lightningcss-dark, #ffffff4d);
}
button:where(:disabled), input:where([type="button"], [type="reset"], [type="submit"]):where(:disabled) {
opacity: 1;
background-color: var(--lightningcss-light, #00000006) var(--lightningcss-dark, #ffffff40);
border-color: var(--lightningcss-light, #0003) var(--lightningcss-dark, #ffffff1a);
}
:where(input:disabled)::file-selector-button {
opacity: 1;
background-color: var(--lightningcss-light, #00000006) var(--lightningcss-dark, #ffffff40);
border-color: var(--lightningcss-light, #0003) var(--lightningcss-dark, #ffffff1a);
}
input:where([type="file"]:disabled) {
color: var(--lightningcss-light, #00000080) var(--lightningcss-dark, #ffffff80);
}
::file-selector-button {
margin-inline-end: 4px;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}

85
packages/@tailwindcss-upgrade/src/codemods/migrate-preflight.test.ts
View File

@ -32,23 +32,6 @@ it("should add compatibility CSS after the `@import 'tailwindcss'`", async () =>
).toMatchInlineSnapshot(`
"@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -81,23 +64,6 @@ it('should add the compatibility CSS after the last `@import`', async () => {
@import './foo.css';
@import './bar.css';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -144,23 +110,6 @@ it('should add the compatibility CSS after the last import, even if a body-less
@import './foo.css';
@import './bar.css';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -207,23 +156,6 @@ it('should add the compatibility CSS before the first `@layer base` (if the "tai
@variant foo {
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -282,23 +214,6 @@ it('should add the compatibility CSS before the first `@layer base` (if the "tai
@variant foo {
}
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still

21
packages/@tailwindcss-upgrade/src/codemods/migrate-preflight.ts
View File

@ -30,25 +30,6 @@ const BORDER_COLOR_COMPATIBILITY_CSS = css`
}
`
const FORMS_RESET_CSS = css`
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
`
export function migratePreflight({
designSystem,
userConfig,
@ -79,7 +60,7 @@ export function migratePreflight({
if (!isTailwindRoot) return
// Figure out the compatibility CSS to inject
let compatibilityCssString = FORMS_RESET_CSS + '\n\n'
let compatibilityCssString = ''
if (defaultBorderColor !== DEFAULT_BORDER_COLOR) {
compatibilityCssString += BORDER_COLOR_COMPATIBILITY_CSS
compatibilityCssString += '\n\n'

51
packages/@tailwindcss-upgrade/src/index.test.ts
View File

@ -96,23 +96,6 @@ it('should migrate a stylesheet', async () => {
).toMatchInlineSnapshot(`
"@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -184,23 +167,6 @@ it('should migrate a stylesheet (with imports)', async () => {
@import './my-components.css' layer(components);
@import './my-utilities.css' layer(utilities);
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
@ -243,23 +209,6 @@ it('should migrate a stylesheet (with preceding rules that should be wrapped in
/**! My license comment */
@import 'tailwindcss';
/*
In Tailwind CSS v4, basic styles are applied to form elements by default. To
maintain compatibility with v3, the following resets have been added:
*/
@layer base {
input,
textarea,
select,
button {
border: 0px solid;
border-radius: 0;
padding: 0;
color: inherit;
background-color: transparent;
}
}
/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still

151
packages/tailwindcss/preflight.css
View File

@ -23,7 +23,6 @@
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS.
8. Set a default `color-scheme`.
*/
html,
@ -44,7 +43,6 @@ html,
font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */
font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
color-scheme: light; /* 8 */
}
/*
@ -239,7 +237,10 @@ video {
}
/*
Inherit font styles in all browsers.
1. Inherit font styles in all browsers.
2. Remove border radius in all browsers.
3. Remove background color in all browsers.
4. Ensure consistent opacity for disabled states in all browsers.
*/
button,
@ -248,11 +249,38 @@ select,
optgroup,
textarea,
::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
font: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
border-radius: 0; /* 2 */
background-color: transparent; /* 3 */
opacity: 1; /* 4 */
}
/*
Restore default font weight.
*/
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
/*
Restore indentation.
*/
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
/*
Restore space after button.
*/
::file-selector-button {
margin-inline-end: 4px;
}
/*
@ -346,113 +374,6 @@ input:where([type='button'], [type='reset'], [type='submit']),
height: auto;
}
/*
Apply consistent base form control styles across browsers.
*/
select,
textarea,
input:where(
[type='text'],
[type='email'],
[type='password'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='number'],
[type='search'],
[type='time'],
[type='week'],
[type='tel'],
[type='url']
) {
border-radius: 3px;
padding-inline: 4px;
padding-block: 2px;
color: light-dark(black, white);
background-color: light-dark(white, rgb(255 255 255 / 10%));
border: 1px solid light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 25%));
}
:where(select:not([multiple], [size])) option,
:where(select:not([multiple], [size])) optgroup {
color: FieldText;
background-color: Field;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bold;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
select:where(:disabled),
textarea:where(:disabled),
input:where(
[type='text'],
[type='email'],
[type='password'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='number'],
[type='search'],
[type='time'],
[type='week'],
[type='tel'],
[type='url']
):where(:disabled) {
opacity: 1;
color: light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 50%));
background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 10%));
border-color: light-dark(rgb(0 0 0 / 20%), rgb(255 255 255 / 15%));
}
/*
Apply consistent base button styles across browsers.
*/
button,
::file-selector-button,
input:where([type='button'], [type='reset'], [type='submit']) {
border-radius: 4px;
padding-inline: 4px;
padding-block: 2px;
color: light-dark(#000, #fff);
background-color: light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 40%));
border: 1px solid light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 10%));
}
button:where(:hover),
::file-selector-button:where(:hover),
input:where([type='button'], [type='reset'], [type='submit']):where(:hover) {
background-color: light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 45%));
}
button:where(:active),
::file-selector-button:where(:active),
input:where([type='button'], [type='reset'], [type='submit']):where(:active) {
background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 30%));
}
button:where(:disabled),
:where(input:disabled)::file-selector-button,
input:where([type='button'], [type='reset'], [type='submit']):where(:disabled) {
opacity: 1;
background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 25%));
border-color: light-dark(rgb(0 0 0 / 20%), rgb(255 255 255 / 10%));
}
input:where([type='file']:disabled) {
color: light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 50%));
}
::file-selector-button {
margin-inline-end: 4px;
}
/*
Make elements with the HTML hidden attribute stay hidden by default.
*/