archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Fix box-sizing for shadow-dom elements

Browse Source
This commit is contained in:
Nestor Vera 2019-09-06 13:58:55 +02:00
parent 40b24aefcd
commit 2821f189cb
1 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/plugins/css/preflight.css
View File

@ -4,23 +4,6 @@
* suitable for web applications.
*/
/**
* 1. Prevent padding and border from affecting element width
* https://goo.gl/pYtbK7
* 2. Change the default font family in all browsers (opinionated)
*/
html {
box-sizing: border-box; /* 1 */
font-family: sans-serif; /* 2 */
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/**
* Removes the default spacing and border for appropriate elements.
*/
@ -75,7 +58,7 @@ ul {
/**
* 1. Use the system font stack as a sane default.
* 2. Use Tailwind's default "normal" line-height so the user isn't forced
* to override it to ensure consistency even when using the default theme.
* to override it to ensure consistency even when using the default theme.
*/
html {
@ -84,31 +67,44 @@ html {
}
/**
* Allow adding a border to an element by just adding a border-width.
* 1. Prevent padding and border from affecting element width.
*
* By default, the way the browser specifies that an element should have no
* border is by setting it's border-style to `none` in the user-agent
* stylesheet.
* We used to set this in the html element and inherit from
* the parent element for everything else. This caused issues
* in shadow-dom-enhanced elements like <details> where the content
* is wrapped by a div with box-sizing set to `content-box`.
*
* In order to easily add borders to elements by just setting the `border-width`
* property, we change the default border-style for all elements to `solid`, and
* use border-width to hide them instead. This way our `border` utilities only
* need to set the `border-width` property instead of the entire `border`
* shorthand, making our border utilities much more straightforward to compose.
* https://github.com/mozdevs/cssremedy/issues/4
*
* https://github.com/tailwindcss/tailwindcss/pull/116
*
* 2. Allow adding a border to an element by just adding a border-width.
*
* By default, the way the browser specifies that an element should have no
* border is by setting it's border-style to `none` in the user-agent
* stylesheet.
*
* In order to easily add borders to elements by just setting the `border-width`
* property, we change the default border-style for all elements to `solid`, and
* use border-width to hide them instead. This way our `border` utilities only
* need to set the `border-width` property instead of the entire `border`
* shorthand, making our border utilities much more straightforward to compose.
*
* https://github.com/tailwindcss/tailwindcss/pull/116
*/
*,
*::before,
*::after {
border-width: 0;
border-style: solid;
border-color: theme('borderColor.default', currentColor);
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: theme('borderColor.default', currentColor); /* 2 */
}
/*
* Ensure horizontal rules are visible by default
*/
hr {
border-top-width: 1px;
}
@ -122,6 +118,7 @@ hr {
*
* https://github.com/tailwindcss/tailwindcss/issues/362
*/
img {
border-style: solid;
}