From 3cd11c35b1fe3eff5a7f006444db448b5ac6de29 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 3 Nov 2020 15:52:27 -0500 Subject: [PATCH] Don't explicitly set font/line-height on body, inherit from html instead --- __tests__/fixtures/tailwind-output-flagged.css | 12 +++++++++++- __tests__/fixtures/tailwind-output-important.css | 12 +++++++++++- .../fixtures/tailwind-output-no-color-opacity.css | 12 +++++++++++- __tests__/fixtures/tailwind-output.css | 12 +++++++++++- src/plugins/css/preflight.css | 13 ++++++++++++- 5 files changed, 56 insertions(+), 5 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index 00c2f5157897..d4194e8cc494 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -361,11 +361,21 @@ ul { * to override it to ensure consistency even when using the default theme. */ -html, body { +html { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ line-height: 1.5; /* 2 */ } +/** + * Inherit font-family and line-height from `html` so users can set them as + * a class directly on the `html` element. + */ + +body { + font-family: inherit; + line-height: inherit; +} + /** * 1. Prevent padding and border from affecting element width. * diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index d5e8621ba89b..5d83b71f3a11 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -361,11 +361,21 @@ ul { * to override it to ensure consistency even when using the default theme. */ -html, body { +html { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ line-height: 1.5; /* 2 */ } +/** + * Inherit font-family and line-height from `html` so users can set them as + * a class directly on the `html` element. + */ + +body { + font-family: inherit; + line-height: inherit; +} + /** * 1. Prevent padding and border from affecting element width. * diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index dc877981d671..9ff222423a56 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -361,11 +361,21 @@ ul { * to override it to ensure consistency even when using the default theme. */ -html, body { +html { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ line-height: 1.5; /* 2 */ } +/** + * Inherit font-family and line-height from `html` so users can set them as + * a class directly on the `html` element. + */ + +body { + font-family: inherit; + line-height: inherit; +} + /** * 1. Prevent padding and border from affecting element width. * diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 00c2f5157897..d4194e8cc494 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -361,11 +361,21 @@ ul { * to override it to ensure consistency even when using the default theme. */ -html, body { +html { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ line-height: 1.5; /* 2 */ } +/** + * Inherit font-family and line-height from `html` so users can set them as + * a class directly on the `html` element. + */ + +body { + font-family: inherit; + line-height: inherit; +} + /** * 1. Prevent padding and border from affecting element width. * diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index db3f9ad7805e..7afaf32bd2a9 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -62,11 +62,22 @@ ul { * to override it to ensure consistency even when using the default theme. */ -html, body { +html { font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 1 */ line-height: 1.5; /* 2 */ } + +/** + * Inherit font-family and line-height from `html` so users can set them as + * a class directly on the `html` element. + */ + +body { + font-family: inherit; + line-height: inherit; +} + /** * 1. Prevent padding and border from affecting element width. *