Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add consistent base styles for buttons and form controls #15036

Merged
merged 10 commits into from
Nov 21, 2024
Merged

Add consistent base styles for buttons and form controls #15036

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0457841
Upgrade: Add form reset styles
philipp-spiess Nov 19, 2024
7886f7d
Update form preflight
philipp-spiess Nov 19, 2024
b473018
Update form styles and reorganize
reinink Nov 20, 2024
ddaa8cc
Upgrade snapshots
philipp-spiess Nov 20, 2024
88b324b
Update packages/@tailwindcss-upgrade/src/codemods/migrate-forms-reset.ts
philipp-spiess Nov 20, 2024
3ea01c3
Upgrade snapshots
philipp-spiess Nov 20, 2024
2707935
Use `:is()`
reinink Nov 20, 2024
aa8f42b
Use `:is()`
reinink Nov 20, 2024
fd0a7e9
Upgrade snapshots
philipp-spiess Nov 20, 2024
9d17e83
add change log
philipp-spiess Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
285 changes: 285 additions & 0 deletions integrations/upgrade/index.test.ts
View file
Open in desktop

Large diffs are not rendered by default.

256 changes: 256 additions & 0 deletions integrations/upgrade/js-config.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,21 @@ test(
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}

--- src/test.js ---
export default {
Expand Down Expand Up @@ -393,6 +408,21 @@ test(
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}
"
`)

Expand Down Expand Up @@ -475,6 +505,21 @@ test(
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}
"
`)

Expand Down Expand Up @@ -549,6 +594,21 @@ test(
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}
"
`)

Expand Down Expand Up @@ -627,6 +687,21 @@ test(
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}
"
`)

Expand Down Expand Up @@ -701,6 +776,21 @@ test(
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}
"
`)

Expand Down Expand Up @@ -813,6 +903,21 @@ test(
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}

--- project-b/src/input.css ---
@import 'tailwindcss';
Expand All @@ -838,6 +943,21 @@ test(
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}
"
`)
},
Expand Down Expand Up @@ -915,6 +1035,21 @@ test(
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}
"
`)
},
Expand Down Expand Up @@ -975,6 +1110,21 @@ describe('border compatibility', () => {
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}
"
`)
},
Expand Down Expand Up @@ -1037,6 +1187,21 @@ describe('border compatibility', () => {
border-color: oklch(0.623 0.214 259.815);
}
}
/*
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;
background-color: transparent;
}
}
"
`)
},
Expand Down Expand Up @@ -1081,6 +1246,22 @@ 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;
background-color: transparent;
}
}
"
`)
},
Expand Down Expand Up @@ -1141,6 +1322,21 @@ describe('border compatibility', () => {
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}
"
`)
},
Expand Down Expand Up @@ -1210,6 +1406,21 @@ describe('border compatibility', () => {
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}

--- src/input.css ---
@import './base.css';
Expand Down Expand Up @@ -1328,6 +1539,21 @@ describe('border compatibility', () => {
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}

.container {
width: calc(var(--spacing) * 2);
Expand Down Expand Up @@ -1442,6 +1668,21 @@ describe('border compatibility', () => {
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}

.container {
width: var(--spacing-2);
Expand Down Expand Up @@ -1545,6 +1786,21 @@ describe('border compatibility', () => {
border-color: var(--color-gray-200, currentColor);
}
}
/*
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;
background-color: transparent;
}
}
"
`)
},
Expand Down
Loading