From c246f197730cf21d17dc9b585ff9dec970c1ad2f Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 11 Mar 2019 08:41:16 -0400 Subject: [PATCH 1/4] Make form elements inherit more font properties --- __tests__/fixtures/tailwind-output-important.css | 16 ++++++++++++++++ __tests__/fixtures/tailwind-output.css | 16 ++++++++++++++++ src/plugins/css/preflight.css | 15 +++++++++++++++ 3 files changed, 47 insertions(+) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 1b83dc997..e37c560bf 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -488,6 +488,22 @@ h6 { font-weight: inherit; } +/** + * Inherit color, font-weight, and line-height from the parent + * so that form elements don't inadvertently have any styles + * that deviate from your design system. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; + font-weight: inherit; + line-height: inherit; +} + .container { width: 100%; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 1aab26175..da8803c5b 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -488,6 +488,22 @@ h6 { font-weight: inherit; } +/** + * Inherit color, font-weight, and line-height from the parent + * so that form elements don't inadvertently have any styles + * that deviate from your design system. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; + font-weight: inherit; + line-height: inherit; +} + .container { width: 100%; } diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index af4c3dc12..0a76210f9 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -133,3 +133,18 @@ h6 { font-size: inherit; font-weight: inherit; } + +/** + * Inherit color, font-weight, and line-height from the parent + * so that form elements don't inadvertently have any styles + * that deviate from your design system. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + font-weight: inherit; + line-height: inherit; +} From 58f581ef320e758da479cefaebc47ea427044279 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 12 Mar 2019 11:17:35 -0400 Subject: [PATCH 2/4] Reset form elements even more aggressively --- __tests__/fixtures/tailwind-output-important.css | 14 ++++++++++++-- __tests__/fixtures/tailwind-output.css | 14 ++++++++++++-- src/plugins/css/preflight.css | 15 +++++++++++++-- 3 files changed, 37 insertions(+), 6 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index e37c560bf..f89a5fdf2 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -489,9 +489,11 @@ h6 { } /** - * Inherit color, font-weight, and line-height from the parent + * Reset form elements to inherit their styles from the parent * so that form elements don't inadvertently have any styles - * that deviate from your design system. + * that deviate from your design system. These styles + * supplement a partial reset that is already applied by + * normalize.css. */ button, @@ -499,9 +501,17 @@ input, optgroup, select, textarea { + padding: 0; + border-radius: 0; + background-color: transparent; color: inherit; font-weight: inherit; line-height: inherit; + font-style: inherit; + font-variant: inherit; + text-align: inherit; + text-transform: inherit; + letter-spacing: inherit; } .container { diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index da8803c5b..6650a5869 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -489,9 +489,11 @@ h6 { } /** - * Inherit color, font-weight, and line-height from the parent + * Reset form elements to inherit their styles from the parent * so that form elements don't inadvertently have any styles - * that deviate from your design system. + * that deviate from your design system. These styles + * supplement a partial reset that is already applied by + * normalize.css. */ button, @@ -499,9 +501,17 @@ input, optgroup, select, textarea { + padding: 0; + border-radius: 0; + background-color: transparent; color: inherit; font-weight: inherit; line-height: inherit; + font-style: inherit; + font-variant: inherit; + text-align: inherit; + text-transform: inherit; + letter-spacing: inherit; } .container { diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index 0a76210f9..5babbd2ae 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -135,16 +135,27 @@ h6 { } /** - * Inherit color, font-weight, and line-height from the parent + * Reset form elements to inherit their styles from the parent * so that form elements don't inadvertently have any styles - * that deviate from your design system. + * that deviate from your design system. These styles + * supplement a partial reset that is already applied by + * normalize.css. */ + button, input, optgroup, select, textarea { + padding: 0; + border-radius: 0; + background-color: transparent; color: inherit; font-weight: inherit; line-height: inherit; + font-style: inherit; + font-variant: inherit; + text-align: inherit; + text-transform: inherit; + letter-spacing: inherit; } From b4db53676e1e3488a8ddd804662854325280a8fd Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 12 Mar 2019 16:59:25 -0400 Subject: [PATCH 3/4] Don't reset form elements quite as aggressively --- .../fixtures/tailwind-output-important.css | 17 +++++------------ __tests__/fixtures/tailwind-output.css | 17 +++++------------ src/plugins/css/preflight.css | 17 +++++------------ 3 files changed, 15 insertions(+), 36 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index f89a5fdf2..32a2d0fa8 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -489,9 +489,9 @@ h6 { } /** - * Reset form elements to inherit their styles from the parent - * so that form elements don't inadvertently have any styles - * that deviate from your design system. These styles + * Reset form element properties that are easy to forget to + * style explicitly so you don't inadvertently introduce + * styles that deviate from your design system. These styles * supplement a partial reset that is already applied by * normalize.css. */ @@ -502,16 +502,9 @@ optgroup, select, textarea { padding: 0; - border-radius: 0; - background-color: transparent; - color: inherit; - font-weight: inherit; line-height: inherit; - font-style: inherit; - font-variant: inherit; - text-align: inherit; - text-transform: inherit; - letter-spacing: inherit; + color: inherit; + background-color: transparent; } .container { diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 6650a5869..5727063ec 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -489,9 +489,9 @@ h6 { } /** - * Reset form elements to inherit their styles from the parent - * so that form elements don't inadvertently have any styles - * that deviate from your design system. These styles + * Reset form element properties that are easy to forget to + * style explicitly so you don't inadvertently introduce + * styles that deviate from your design system. These styles * supplement a partial reset that is already applied by * normalize.css. */ @@ -502,16 +502,9 @@ optgroup, select, textarea { padding: 0; - border-radius: 0; - background-color: transparent; - color: inherit; - font-weight: inherit; line-height: inherit; - font-style: inherit; - font-variant: inherit; - text-align: inherit; - text-transform: inherit; - letter-spacing: inherit; + color: inherit; + background-color: transparent; } .container { diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index 5babbd2ae..c86bed9d5 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -135,9 +135,9 @@ h6 { } /** - * Reset form elements to inherit their styles from the parent - * so that form elements don't inadvertently have any styles - * that deviate from your design system. These styles + * Reset form element properties that are easy to forget to + * style explicitly so you don't inadvertently introduce + * styles that deviate from your design system. These styles * supplement a partial reset that is already applied by * normalize.css. */ @@ -148,14 +148,7 @@ optgroup, select, textarea { padding: 0; - border-radius: 0; - background-color: transparent; - color: inherit; - font-weight: inherit; line-height: inherit; - font-style: inherit; - font-variant: inherit; - text-align: inherit; - text-transform: inherit; - letter-spacing: inherit; + color: inherit; + background-color: transparent; } From 3d12231bdbe38a35081c992751b796252a4e5e7c Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 12 Mar 2019 17:05:20 -0400 Subject: [PATCH 4/4] Remove background color transparent --- __tests__/fixtures/tailwind-output-important.css | 1 - __tests__/fixtures/tailwind-output.css | 1 - src/plugins/css/preflight.css | 1 - 3 files changed, 3 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 32a2d0fa8..9cc0dd771 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -504,7 +504,6 @@ textarea { padding: 0; line-height: inherit; color: inherit; - background-color: transparent; } .container { diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 5727063ec..6232f0834 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -504,7 +504,6 @@ textarea { padding: 0; line-height: inherit; color: inherit; - background-color: transparent; } .container { diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index c86bed9d5..e2f1e8820 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -150,5 +150,4 @@ textarea { padding: 0; line-height: inherit; color: inherit; - background-color: transparent; }