Tailwindcss: [Feedback Requested] Improvements to our Preflight/Reset styles for 1.0

[adamwathan]

One of the final bigger projects I want to tackle for v1.0 is making sure our reset styles are as useful as possible for the way people build things with Tailwind.

For example, recently we updated Preflight to reset all heading tags to inherit the parent font size and weight (#703) so that you never accidentally use a default user agent font size for a heading that isn't part of your type scale.

Some of the other changes I'm considering in this direction are:

• Make buttons, inputs, etc. inherit the parent line-height. By default I think these use 1.15 (at least in Chrome), and I often forget to set an explicit line-height on these elements which allows non-design system values to creep into my UI.
• Make buttons, inputs, etc. inherit the parent font color. Inputs at least default to black, but not sure about other stuff. I don't want elements accidentally using colors I'm not intentionally including in my design.
• Remove the default 1px padding on input fields, as pointed out in https://github.com/tailwindcss/tailwindcss/issues/709, since without a default border this extra padding can be unintuitive.

What I'm hoping to do with this thread is gather examples of other reset styles people are using on their own projects, and hear from the community about anything annoying they run into with Tailwind currently that could be solved by tweaking our reset (accidentally using a user-agent heading size is a good example of this.)

The TL;DR question is:

Are there situations with Tailwind where you find it is too easy to accidentally deviate from your own design system that we might be able to help you avoid by tweaking something in our base styles?

Thanks!

[maximux13]

Rescently I've been using tailwinds in a electron web app an i think will be helpful to reset the user agent style regarding to the margins of the headings.

[benface]

I found this resource to be very useful to figure out what needs to be reset: https://www.w3schools.com/cssref/css_default_values.asp

A couple things I see that's not already taken care of by Preflight:

• a has a default color and underline, so I always do this:

  a {
      color: inherit;
      text-decoration: none;
  }
  

  But maybe that should be left up to the user, since it affects accessibility? Of course that's not an issue as long as the links are styled in any way, but in that sense it would be similar to setting outline: none by default.

• some elements (cite, em, var, address, dfn) are italic by default, which could be removed with font-style: inherit

• small has a default font-size, which could be overridden with font-size: inherit
• hr has some default margin that could be removed
• I would love to see more agressive resets for form elements, e.g.:
  button, input, textarea, select { margin: 0; padding: 0; border-radius: 0; /* for iOS */ background-color: transparent; font: inherit; color: inherit; text-align: inherit; text-transform: inherit; letter-spacing: inherit; }
• not showing up in the list linked above for some reason, but th and td have a 1px default padding in some browsers at least, so I always reset them with padding: 0
• something that Bootstrap does is make the default [hidden] display: none rule !important, and I think that's a great idea because really, you would never want something [hidden] to be visible because it has a flex or something on it (but actually now that I think about it, flex would override it if Tailwind's important option is enabled... hmmm)

[benfurfie]

That sounds good Adam. I always tend to spend time setting a lot of values that you and @benface mentioned to default to inherit parent styles. Particularly font sizes and colours to inherit on base tags like p, a, ul/ol, li etc.

That said, I don't agree with Ben's last point about Bootstrap's behaviour with hidden. I frequently use hidden to hide elements at different viewport sizes (i.e. hidden md:flex, which using !important would prevent. There is never any reason anything should use !important if the cascade is respected.

[benface]

@benfurfie I'm talking about the hidden attribute, not the class.

[sandren]

I think we should consider replacing Normalize with Sanitize as the CSS base for Preflight. Sanitize is maintained by the co-author of Normalize and they are both updated and released on the same schedule. The difference in philosophy is outlined here:

normalize.css and sanitize.css correct browser bugs while carefully testing and documenting changes. normalize.css styles adhere to css specifications. sanitize.css styles adhere to common developer expectations and preferences.

While Sanitize may be more "opinionated", the source of those opinions is the general consensus of best practices and in line with Preflight's existing goal to provide "a starting point more suitable for web applications." It includes several of the custom reset styles Tailwind already appends to Normalize such as using border-box sizing, enabling vertical resizing of textareas, and setting table borders to collapse.

Beyond the adoption of Sanitize, I would suggest adding the following to Tailwind's custom reset styles:

html {
  line-height: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

ol,
ul {
  list-style: none;
  padding-left: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

These additions are based @adamwathan's recommendation to eliminate the accidental usage of default UA styles inconsistent with the Tailwind's base design system or the one a developer manually sets in the configuration.

[benfurfie]

Ah. Apologies @benface.

@sandrend Completely agree about using Sanitize over Normalize. But with the header font, would it not be better to set it to font-size: inherit. Then it can easily be overridden, you can be sure it’ll be consistent and you don’t introduce the headache of font size ems to the stylesheet.

[sandren]

But with the header font, would it not be better to set it to font-size: inherit. Then it can easily be overridden, you can be sure it’ll be consistent and you don’t introduce the headache of font size ems to the stylesheet.

That's a good point. I have amended my comment. 😄

[benface]

I agree that inherit is better/clearer, but I'm pretty sure 1em is essentially the same thing. It computes to 100% of the inherited font-size.

[ion1]

I also encountered an <input type="text"> defaulting to a white background and overriding the parent element's inner shadow. background-color: transparent was already mentioned by @benface; I'm confirming it's useful.

[marcfilleul]

What do you think of this CSS reset (this project is heavily inspired by normalize.css and the original reset by Eric Meyer.) :

https://github.com/nicolas-cusan/destyle.css

[adamwathan]

Not planning to make any more changes here before 1.0 — thanks for the input all!