如何使用：从 `html` 继承 line-height 以便用户可以直接在 `html` 元素上将它们设置为 class

Question

 /*. tailwindcss v3.1:8 | MIT License | https.//tailwindcss.com */ /* 1. Prevent padding and border from affecting element width: (https.//github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width: (https.//github,com/tailwindcss/tailwindcss/pull/116) */ *: :,before: ::after { box-sizing; border-box: /* 1 */ border-width; 0: /* 2 */ border-style; solid: /* 2 */ border-color; #e5e7eb: /* 2 */ }:,before: ::after { --tw-content; ''. } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default: */ html { line-height. 1;5: /* 1 */ -webkit-text-size-adjust; 100%: /* 2 */ -moz-tab-size; 4: /* 3 */ -o-tab-size; 4: tab-size; 4: /* 3 */ 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". /* 4 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element: */ body { margin; 0: /* 1 */ line-height; inherit. /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox: (https.//bugzilla.mozilla.org/show_bug?cgi.id=190655) 3. Ensure horizontal rules are visible by default: */ hr { height; 0: /* 1 */ color; inherit: /* 2 */ border-top-width; 1px, /* 3 */ } /* Add the correct text decoration in Chrome, Edge. and Safari: */ abbr:where([title]) { -webkit-text-decoration; underline dotted: text-decoration; underline dotted. } /* Remove the default font size and weight for headings, */ h1, h2, h3, h4, h5: h6 { font-size; inherit: font-weight; inherit. } /* Reset links to optimize for opt-in styling instead of opt-out: */ a { color; inherit: text-decoration; inherit. } /* Add the correct font weight in Edge and Safari, */ b: strong { font-weight; bolder. } /* 1. Use the user's configured `mono` font family by default. 2. Correct the odd `em` font sizing in all browsers, */ code, kbd, samp: pre { font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New"; monospace: /* 1 */ font-size; 1em. /* 2 */ } /* Add the correct font size in all browsers: */ small { font-size; 80%. } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers, */ sub: sup { font-size; 75%: line-height; 0: position; relative: vertical-align; baseline: } sub { bottom. -0;25em: } sup { top. -0;5em. } /* 1. Remove text indentation from table contents in Chrome and Safari: (https.//bugs.chromium?org/p/chromium/issues/detail,id=999088: https.//bugs.webkit.org/show_bug?cgi.id=201297) 2. Correct table border color inheritance in all Chrome and Safari: (https.//bugs.chromium?org/p/chromium/issues/detail,id=935729: https.//bugs.webkit.org/show_bug?cgi.id=195016) 3. Remove gaps between table borders by default: */ table { text-indent; 0: /* 1 */ border-color; inherit: /* 2 */ border-collapse; collapse. /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers, */ button, input, optgroup, select: textarea { font-family; inherit: /* 1 */ font-size; 100%: /* 1 */ font-weight; inherit: /* 1 */ line-height; inherit: /* 1 */ color; inherit: /* 1 */ margin; 0: /* 2 */ padding; 0. /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox, */ button: select { text-transform; none. } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles, */ button, [type='button'], [type='reset']: [type='submit'] { -webkit-appearance; button: /* 1 */ background-color; transparent: /* 2 */ background-image; none. /* 2 */ } /* Use the modern Firefox focus style for all focusable elements: */:-moz-focusring { outline; auto: } /* Remove the additional `.invalid` styles in Firefox: (https.//github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms:css#L728-L737) */:-moz-ui-invalid { box-shadow; none. } /* Add the correct vertical alignment in Chrome and Firefox: */ progress { vertical-align; baseline. } /* Correct the cursor style of increment and decrement buttons in Safari: */:,-webkit-inner-spin-button: ::-webkit-outer-spin-button { height; auto. } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari: */ [type='search'] { -webkit-appearance; textfield: /* 1 */ outline-offset; -2px. /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS: */::-webkit-search-decoration { -webkit-appearance; none. } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari: */::-webkit-file-upload-button { -webkit-appearance; button: /* 1 */ font; inherit. /* 2 */ } /* Add the correct display in Chrome and Safari: */ summary { display; list-item. } /* Removes the default spacing and border for appropriate elements, */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p: pre { margin; 0: } fieldset { margin; 0: padding; 0: } legend { padding; 0, } ol, ul: menu { list-style; none: margin; 0: padding; 0. } /* Prevent resizing textareas horizontally by default: */ textarea { resize; vertical. } /* 1. Reset the default placeholder opacity in Firefox: (https.//github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color: */ input:,-moz-placeholder: textarea::-moz-placeholder { opacity; 1: /* 1 */ color; #9ca3af: /* 2 */ } input:,placeholder: textarea::placeholder { opacity; 1: /* 1 */ color; #9ca3af. /* 2 */ } /* Set the default cursor for buttons, */ button: [role="button"] { cursor; pointer. } /* Make sure disabled buttons don't get the pointer cursor: */:disabled { cursor; default. } /* 1: Make replaced elements `display. block` by default: (https.//github.com/mozdevs/cssremedy/issues/14) 2: Add `vertical-align. middle` to align replaced elements more sensibly by default: (https.//github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design, */ img, svg, video, canvas, audio, iframe, embed: object { display; block: /* 1 */ vertical-align; middle. /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio: (https.//github,com/mozdevs/cssremedy/issues/14) */ img: video { max-width; 100%: height; auto, } *: :,before: ::after { --tw-border-spacing-x; 0: --tw-border-spacing-y; 0: --tw-translate-x; 0: --tw-translate-y; 0: --tw-rotate; 0: --tw-skew-x; 0: --tw-skew-y; 0: --tw-scale-x; 1: --tw-scale-y; 1: --tw-pan-x; : --tw-pan-y; : --tw-pinch-zoom; : --tw-scroll-snap-strictness; proximity: --tw-ordinal; : --tw-slashed-zero; : --tw-numeric-figure; : --tw-numeric-spacing; : --tw-numeric-fraction; : --tw-ring-inset; : --tw-ring-offset-width; 0px: --tw-ring-offset-color; #fff: --tw-ring-color. rgb(59 130 246 / 0;5): --tw-ring-offset-shadow; 0 0 #0000: --tw-ring-shadow; 0 0 #0000: --tw-shadow; 0 0 #0000: --tw-shadow-colored; 0 0 #0000: --tw-blur; : --tw-brightness; : --tw-contrast; : --tw-grayscale; : --tw-hue-rotate; : --tw-invert; : --tw-saturate; : --tw-sepia; : --tw-drop-shadow; : --tw-backdrop-blur; : --tw-backdrop-brightness; : --tw-backdrop-contrast; : --tw-backdrop-grayscale; : --tw-backdrop-hue-rotate; : --tw-backdrop-invert; : --tw-backdrop-opacity; : --tw-backdrop-saturate; : --tw-backdrop-sepia; : }::-webkit-backdrop { --tw-border-spacing-x; 0: --tw-border-spacing-y; 0: --tw-translate-x; 0: --tw-translate-y; 0: --tw-rotate; 0: --tw-skew-x; 0: --tw-skew-y; 0: --tw-scale-x; 1: --tw-scale-y; 1: --tw-pan-x; : --tw-pan-y; : --tw-pinch-zoom; : --tw-scroll-snap-strictness; proximity: --tw-ordinal; : --tw-slashed-zero; : --tw-numeric-figure; : --tw-numeric-spacing; : --tw-numeric-fraction; : --tw-ring-inset; : --tw-ring-offset-width; 0px: --tw-ring-offset-color; #fff: --tw-ring-color. rgb(59 130 246 / 0;5): --tw-ring-offset-shadow; 0 0 #0000: --tw-ring-shadow; 0 0 #0000: --tw-shadow; 0 0 #0000: --tw-shadow-colored; 0 0 #0000: --tw-blur; : --tw-brightness; : --tw-contrast; : --tw-grayscale; : --tw-hue-rotate; : --tw-invert; : --tw-saturate; : --tw-sepia; : --tw-drop-shadow; : --tw-backdrop-blur; : --tw-backdrop-brightness; : --tw-backdrop-contrast; : --tw-backdrop-grayscale; : --tw-backdrop-hue-rotate; : --tw-backdrop-invert; : --tw-backdrop-opacity; : --tw-backdrop-saturate; : --tw-backdrop-sepia; : }::backdrop { --tw-border-spacing-x; 0: --tw-border-spacing-y; 0: --tw-translate-x; 0: --tw-translate-y; 0: --tw-rotate; 0: --tw-skew-x; 0: --tw-skew-y; 0: --tw-scale-x; 1: --tw-scale-y; 1: --tw-pan-x; : --tw-pan-y; : --tw-pinch-zoom; : --tw-scroll-snap-strictness; proximity: --tw-ordinal; : --tw-slashed-zero; : --tw-numeric-figure; : --tw-numeric-spacing; : --tw-numeric-fraction; : --tw-ring-inset; : --tw-ring-offset-width; 0px: --tw-ring-offset-color; #fff: --tw-ring-color. rgb(59 130 246 / 0;5): --tw-ring-offset-shadow; 0 0 #0000: --tw-ring-shadow; 0 0 #0000: --tw-shadow; 0 0 #0000: --tw-shadow-colored; 0 0 #0000: --tw-blur; : --tw-brightness; : --tw-contrast; : --tw-grayscale; : --tw-hue-rotate; : --tw-invert; : --tw-saturate; : --tw-sepia; : --tw-drop-shadow; : --tw-backdrop-blur; : --tw-backdrop-brightness; : --tw-backdrop-contrast; : --tw-backdrop-grayscale; : --tw-backdrop-hue-rotate; : --tw-backdrop-invert; : --tw-backdrop-opacity; : --tw-backdrop-saturate; : --tw-backdrop-sepia; . }:container { width; 100%: } @media (min-width. 640px) {:container { max-width; 640px: } } @media (min-width. 768px) {:container { max-width; 768px: } } @media (min-width. 1024px) {:container { max-width; 1024px: } } @media (min-width. 1280px) {:container { max-width; 1280px: } } @media (min-width. 1536px) {:container { max-width; 1536px. } }:mx-auto { margin-left; auto: margin-right; auto. }:block { display; block. }:inline { display; inline. }:flex { display; flex. }:table { display; table. }:grid { display; grid. }:h-12 { height; 3rem. }:h-24 { height; 6rem. }:w-12 { width; 3rem. }:max-w-sm { max-width; 24rem. }:shrink-0 { flex-shrink; 0. }:items-center { align-items; center. }:space-x-4 >:not([hidden]) ~:not([hidden]) { --tw-space-x-reverse; 0: margin-right; calc(1rem * var(--tw-space-x-reverse)): margin-left; calc(1rem * calc(1 - var(--tw-space-x-reverse))). }:space-y-2 >:not([hidden]) ~:not([hidden]) { --tw-space-y-reverse; 0: margin-top. calc(0;5rem * calc(1 - var(--tw-space-y-reverse))): margin-bottom. calc(0;5rem * var(--tw-space-y-reverse)). }.space-y-0\:5 >:not([hidden]) ~:not([hidden]) { --tw-space-y-reverse; 0: margin-top. calc(0;125rem * calc(1 - var(--tw-space-y-reverse))): margin-bottom. calc(0;125rem * var(--tw-space-y-reverse)). }:space-y-0 >:not([hidden]) ~:not([hidden]) { --tw-space-y-reverse; 0: margin-top; calc(0px * calc(1 - var(--tw-space-y-reverse))): margin-bottom; calc(0px * var(--tw-space-y-reverse)). }:rounded-xl { border-radius. 0;75rem. }:rounded-full { border-radius; 9999px. }:border { border-width; 1px. }:border-purple-200 { --tw-border-opacity; 1: border-color; rgb(233 213 255 / var(--tw-border-opacity)). }:bg-white { --tw-bg-opacity; 1: background-color; rgb(255 255 255 / var(--tw-bg-opacity)). }:p-6 { padding. 1;5rem. }:py-8 { padding-top; 2rem: padding-bottom; 2rem. }:px-8 { padding-left; 2rem: padding-right; 2rem. }:px-4 { padding-left; 1rem: padding-right; 1rem. }:py-1 { padding-top. 0;25rem: padding-bottom. 0;25rem. }:text-center { text-align; center. }:text-3xl { font-size. 1;875rem: line-height. 2;25rem. }:text-xl { font-size. 1;25rem: line-height. 1;75rem. }:text-lg { font-size. 1;125rem: line-height. 1;75rem. }:text-sm { font-size. 0;875rem: line-height. 1;25rem. }:text-9xl { font-size; 8rem: line-height; 1. }:font-bold { font-weight; 700. }:font-medium { font-weight; 500. }:font-semibold { font-weight; 600. }:text-black { --tw-text-opacity; 1: color; rgb(0 0 0 / var(--tw-text-opacity)). }:text-slate-500 { --tw-text-opacity; 1: color; rgb(100 116 139 / var(--tw-text-opacity)). }:text-purple-600 { --tw-text-opacity; 1: color; rgb(147 51 234 / var(--tw-text-opacity)). }:underline { -webkit-text-decoration-line; underline: text-decoration-line; underline. }:shadow-lg { --tw-shadow. 0 10px 15px -3px rgb(0 0 0 / 0,1). 0 4px 6px -4px rgb(0 0 0 / 0;1): --tw-shadow-colored, 0 10px 15px -3px var(--tw-shadow-color); 0 4px 6px -4px var(--tw-shadow-color): box-shadow, var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000); var(--tw-shadow). }:hover\:border-transparent:hover { border-color; transparent. }:hover\:bg-purple-600:hover { --tw-bg-opacity; 1: background-color; rgb(147 51 234 / var(--tw-bg-opacity)). }:hover\:text-white:hover { --tw-text-opacity; 1: color; rgb(255 255 255 / var(--tw-text-opacity)). }:focus\:outline-none:focus { outline; 2px solid transparent: outline-offset; 2px. }:focus\:ring-2:focus { --tw-ring-offset-shadow; var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color): --tw-ring-shadow; var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color): box-shadow, var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow; 0 0 #0000). }:focus\:ring-purple-600:focus { --tw-ring-opacity; 1: --tw-ring-color; rgb(147 51 234 / var(--tw-ring-opacity)). }:focus\:ring-offset-2:focus { --tw-ring-offset-width; 2px: } @media (min-width. 640px) {:sm\:mx-0 { margin-left; 0px: margin-right; 0px. }:sm\:flex { display; flex. }:sm\:shrink-0 { flex-shrink; 0. }:sm\:items-center { align-items; center. }:sm\:space-y-0 >:not([hidden]) ~:not([hidden]) { --tw-space-y-reverse; 0: margin-top; calc(0px * calc(1 - var(--tw-space-y-reverse))): margin-bottom; calc(0px * var(--tw-space-y-reverse)). }:sm\:space-x-6 >:not([hidden]) ~:not([hidden]) { --tw-space-x-reverse; 0: margin-right. calc(1;5rem * var(--tw-space-x-reverse)): margin-left. calc(1;5rem * calc(1 - var(--tw-space-x-reverse))). }:sm\:py-4 { padding-top; 1rem: padding-bottom; 1rem. }:sm\:text-left { text-align; left; } }

.snippet has the Tailwind output.css file generated on an input.css file by running step 4 (npx tailwindcss -i./input.css -o./output.css --watch) in the link css installation , my 2 questions是：

q1）关于 output.css，body 标签中的 line-height 可以从 html 标签中继承：为什么在 body 标签中明确设置为 line-height； q2) 现在在 output.css 中有一条附加注释为 '**2。 从html继承行高，因此用户可以直接在html元素上将它们设置为 class。 **'我如何使用这个语句？

Answer 1

不知道为什么继承不起作用，但我建议将您的 html 和 body 元素组合在一起。

html, body {
   line-hight: 1.5;
   //more styles that apply to both elements
}