diff --git a/CHANGELOG.md b/CHANGELOG.md index 29594f4e3bc6..56a3c9f2de4b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -62,6 +62,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Rename `--line-height-*` variables to `--leading-*` ([#14925](https://github.com/tailwindlabs/tailwindcss/pull/14925)) - Revert specificity of `*` variant to match v3 behavior ([#14920](https://github.com/tailwindlabs/tailwindcss/pull/14920)) - Replace `outline-none` with `outline-hidden`, add new simplified `outline-none` utility ([#14926](https://github.com/tailwindlabs/tailwindcss/pull/14926)) +- Revert adding borders by default to form inputs ([#14929](https://github.com/tailwindlabs/tailwindcss/pull/14929)) ## [4.0.0-alpha.31] - 2024-10-29 diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts index 9784f57c98b7..469291390e61 100644 --- a/integrations/upgrade/index.test.ts +++ b/integrations/upgrade/index.test.ts @@ -133,22 +133,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - @utility foo { color: red; } @@ -240,22 +224,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - .btn { @apply tw:rounded-md! tw:px-2 tw:py-1 tw:bg-blue-500 tw:text-white; } @@ -320,22 +288,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - .a { @apply flex; } @@ -408,22 +360,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - @layer base { html { color: #333; @@ -501,22 +437,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - @utility btn { @apply rounded-md px-2 py-1 bg-blue-500 text-white; } @@ -1002,22 +922,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - --- ./src/utilities.css --- @utility no-scrollbar { &::-webkit-scrollbar { @@ -1442,22 +1346,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - --- ./src/root.2.css --- /* Already contains @config */ @import 'tailwindcss'; @@ -1482,22 +1370,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - --- ./src/root.3.css --- /* Inject missing @config above first @theme */ @import 'tailwindcss'; @@ -1532,22 +1404,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - --- ./src/root.4.css --- /* Inject missing @config due to nested imports with tailwind imports */ @import './root.4/base.css'; @@ -1580,22 +1436,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - --- ./src/root.4/utilities.css --- @import 'tailwindcss/utilities' layer(utilities); @@ -1622,22 +1462,6 @@ test( border-color: var(--color-gray-200, currentColor); } } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) }, @@ -1696,22 +1520,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - --- ./src/styles/components.css --- .btn { @apply bg-black px-4 py-2 rounded-md text-white font-medium hover:bg-zinc-800; diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts index 2681e890f877..6e03c77c62de 100644 --- a/integrations/upgrade/js-config.test.ts +++ b/integrations/upgrade/js-config.test.ts @@ -279,22 +279,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - --- src/test.js --- export default { 'shouldNotMigrate': !border.test + '', @@ -402,22 +386,6 @@ test( border-color: var(--color-gray-200, currentColor); } } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) @@ -499,22 +467,6 @@ test( border-color: var(--color-gray-200, currentColor); } } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) @@ -588,22 +540,6 @@ test( border-color: var(--color-gray-200, currentColor); } } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) @@ -681,22 +617,6 @@ test( border-color: var(--color-gray-200, currentColor); } } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) @@ -770,22 +690,6 @@ test( border-color: var(--color-gray-200, currentColor); } } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) @@ -898,22 +802,6 @@ test( } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - --- project-b/src/input.css --- @import 'tailwindcss'; @@ -938,22 +826,6 @@ test( border-color: var(--color-gray-200, currentColor); } } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) }, @@ -1030,22 +902,6 @@ test( border-color: var(--color-gray-200, currentColor); } } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) }, @@ -1105,22 +961,6 @@ describe('border compatibility', () => { border-color: var(--color-gray-200, currentColor); } } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) }, @@ -1182,22 +1022,6 @@ describe('border compatibility', () => { border-color: oklch(0.623 0.214 259.815); } } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) }, @@ -1241,22 +1065,6 @@ describe('border compatibility', () => { " --- src/input.css --- @import 'tailwindcss'; - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) }, @@ -1316,22 +1124,6 @@ describe('border compatibility', () => { border-color: var(--color-gray-200, currentColor); } } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } " `) }, @@ -1401,22 +1193,6 @@ describe('border compatibility', () => { } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - --- src/input.css --- @import './base.css'; @import './my-base.css'; @@ -1534,22 +1310,6 @@ describe('border compatibility', () => { } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - .container { width: calc(var(--spacing) * 2); width: calc(var(--spacing) * 4.5); @@ -1663,22 +1423,6 @@ describe('border compatibility', () => { } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - .container { width: var(--spacing-2); width: var(--spacing-4_5); diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 5605db731ad4..ba108e6951b6 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -477,10 +477,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` color: inherit; } - 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; diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.test.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.test.ts index fae0db2b37de..a4c2bc2aa9ba 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.test.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.test.ts @@ -48,22 +48,6 @@ it("should add compatibility CSS after the `@import 'tailwindcss'`", async () => ::file-selector-button { border-color: var(--color-gray-200, currentColor); } - } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } }" `) }) @@ -96,22 +80,6 @@ it('should add the compatibility CSS after the last `@import`', async () => { ::file-selector-button { border-color: var(--color-gray-200, currentColor); } - } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } }" `) }) @@ -158,22 +126,6 @@ it('should add the compatibility CSS after the last import, even if a body-less ::file-selector-button { border-color: var(--color-gray-200, currentColor); } - } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } }" `) }) @@ -222,22 +174,6 @@ it('should add the compatibility CSS before the first `@layer base` (if the "tai } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - @utility bar { } @@ -296,22 +232,6 @@ it('should add the compatibility CSS before the first `@layer base` (if the "tai } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - @utility bar { } diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.ts index 8f762c4e3218..0fe0b00115b4 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.ts @@ -30,24 +30,6 @@ const BORDER_COLOR_COMPATIBILITY_CSS = css` } ` -const BORDER_WIDTH_COMPATIBILITY_CSS = css` - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } -` - export function migrateBorderCompatibility({ designSystem, userConfig, @@ -84,7 +66,6 @@ export function migrateBorderCompatibility({ compatibilityCssString += '\n\n' } - compatibilityCssString += BORDER_WIDTH_COMPATIBILITY_CSS compatibilityCssString = `\n@tw-bucket compatibility {\n${compatibilityCssString}\n}\n` let compatibilityCss = postcss.parse(compatibilityCssString) diff --git a/packages/@tailwindcss-upgrade/src/index.test.ts b/packages/@tailwindcss-upgrade/src/index.test.ts index 519508297594..65d74937b42b 100644 --- a/packages/@tailwindcss-upgrade/src/index.test.ts +++ b/packages/@tailwindcss-upgrade/src/index.test.ts @@ -114,22 +114,6 @@ it('should migrate a stylesheet', async () => { } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - @utility b { z-index: 2; } @@ -199,22 +183,6 @@ it('should migrate a stylesheet (with imports)', async () => { ::file-selector-button { border-color: var(--color-gray-200, currentColor); } - } - - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } }" `) }) @@ -259,22 +227,6 @@ it('should migrate a stylesheet (with preceding rules that should be wrapped in } } - /* - Form elements have a 1px border by default in Tailwind CSS v4, so we've - added these compatibility styles to make sure everything still looks the - same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add \`border-0\` to - any form elements that shouldn't have a border. - */ - @layer base { - input:where(:not([type='button'], [type='reset'], [type='submit'])), - select, - textarea { - border-width: 0; - } - } - @layer base { html { color: red; diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css index cafbaffb100f..b5d747f39187 100644 --- a/packages/tailwindcss/preflight.css +++ b/packages/tailwindcss/preflight.css @@ -191,16 +191,6 @@ textarea, color: inherit; } -/* - Reset the default inset border style for form controls to solid. -*/ - -input:where(:not([type='button'], [type='reset'], [type='submit'])), -select, -textarea { - border-width: 1px; -} - /* 1. Remove the default background color of buttons by default. 2. Correct the inability to style the border radius in iOS Safari.