Reset borders, padding, and margin universally (#13189)

* Reset borders, padding, and margin universally Noticed iframes have a default border we weren't resetting, feels safest to just remove borders across the board and reintroduce them for form controls. We were also resetting padding on an element by element basis but I can't think of any elements we are actually trying to avoid resetting padding on, so just reset it everywhere. This also removes the left margin on file buttons that separates the button from the meta data about the currently selected file but I think this is fine, let the user decide how much space to put there intentionally like we do with other things. * Include ::first-letter Supports margin/padding/border (but not box-sizing) so should be in reset list. * Update changelog --------- Co-authored-by: Adam Wathan <[email protected]>
tailwindlabs · Mar 11, 2024 · 78d1c50 · 78d1c50
1 parent d863de7
commit 78d1c50
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Ensure `scale-*` utilities support percentage values ([#13182](https://github.com/tailwindlabs/tailwindcss/pull/13182))
 - Prevent `content-none` from being overridden when conditionally styling `::before`/`::after` ([#13187](https://github.com/tailwindlabs/tailwindcss/pull/13187))
+- Remove default borders from `iframe` elements ([#13189](https://github.com/tailwindlabs/tailwindcss/pull/13189))
 
 ### Changed
 

diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -402,16 +402,18 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 }
 
 @layer base {
-  *, :after, :before, ::backdrop {
+  *, :after, :before, ::backdrop, :first-letter {
     box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
   }
 
   ::file-selector-button {
     box-sizing: border-box;
-  }
-
-  * {
+    border: 0 solid;
     margin: 0;
+    padding: 0;
   }
 
   html, :host {
@@ -430,7 +432,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
   hr {
     color: inherit;
-    border: 0 solid;
     border-top-width: 1px;
     height: 0;
   }
@@ -494,8 +495,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     font-variation-settings: inherit;
     color: inherit;
     background: none;
-    border: 1px solid;
-    padding: 0;
   }
 
   ::file-selector-button {
@@ -504,18 +503,18 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     font-variation-settings: inherit;
     color: inherit;
     background: none;
+  }
+
+  input:where(:not([type="button"], [type="reset"], [type="submit"])), select, textarea {
     border: 1px solid;
-    padding: 0;
   }
 
   button, input:where([type="button"], [type="reset"], [type="submit"]) {
     appearance: button;
-    border: 0;
   }
 
   ::file-selector-button {
     appearance: button;
-    border: 0;
   }
 
   :-moz-focusring {
@@ -546,24 +545,10 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     display: list-item;
   }
 
-  fieldset {
-    border: 0;
-    padding: 0;
-  }
-
-  legend {
-    padding: 0;
-  }
-
   ol, ul, menu {
-    padding: 0;
     list-style: none;
   }
 
-  dialog {
-    padding: 0;
-  }
-
   textarea {
     resize: vertical;
   }

diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
@@ -1,21 +1,19 @@
 /*
-  Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
 */
 
 *,
 ::after,
 ::before,
 ::backdrop,
+::first-letter,
 ::file-selector-button {
-  box-sizing: border-box;
-}
-
-/*
-  Remove any default margins.
-*/
-
-* {
-  margin: 0;
+  box-sizing: border-box; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 2 */
+  border: 0 solid; /* 3 */
 }
 
 /*
@@ -65,7 +63,6 @@ body {
 hr {
   height: 0; /* 1 */
   color: inherit; /* 2 */
-  border: 0 solid; /* 3 */
   border-top-width: 1px; /* 3 */
 }
 
@@ -180,9 +177,7 @@ table {
 
 /*
   1. Inherit the font styles in all browsers.
-  2. Reset the default inset border style to solid.
-  3. Remove the default background color.
-  4. Remove default padding.
+  2. Remove the default background color.
 */
 
 button,
@@ -195,20 +190,26 @@ textarea,
   font-feature-settings: inherit; /* 1 */
   font-variation-settings: inherit; /* 1 */
   color: inherit; /* 1 */
-  border: 1px solid; /* 2 */
-  background: transparent; /* 3 */
-  padding: 0; /* 4 */
+  background: transparent; /* 2 */
+}
+
+/*
+  Reset the default inset border style for form controls to solid.
+*/
+
+input:where(:not([type='button'], [type='reset'], [type='submit'])),
+select,
+textarea {
+  border: 1px solid;
 }
 
 /*
-  1. Correct the inability to style the border radius in iOS Safari.
-  2. Make borders opt-in.
+  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; /* 1 */
-  border: 0; /* 2 */
+  appearance: button;
 }
 
 /*
@@ -260,19 +261,6 @@ summary {
   display: list-item;
 }
 
-/*
-  Remove the default border and spacing for fieldset and legend elements.
-*/
-
-fieldset {
-  border: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
 /*
   Make lists unstyled by default.
 */
@@ -281,15 +269,6 @@ ol,
 ul,
 menu {
   list-style: none;
-  padding: 0;
-}
-
-/*
-  Remove the default padding from dialog elements.
-*/
-
-dialog {
-  padding: 0;
 }
 
 /*