a minimal, customizable, CSS reset for tailwind
philosophy, usage, options, FAQ
https://github.com/MathGeniusJodie/mass-extinction
https://www.npmjs.com/package/mass-extinction
- small code size is a priority
- does more than preflight by fixing some common annoyances
- lets you pick the resets you want/need if you want to deviate from the sensible defaults
- is made specifically for a tailwind workflow
- doesn't reset styles you're going to overwrite anyway, follows normalize's approach of keeping default browser styles in cases where they do no harm
- relies on inherit to set defaults (like border color) when possible, allowing the use of utility classes
in tailwind.config.js
module.exports = {
plugins: [require("mass-extinction")],
corePlugins: {
preflight: false,
},
};
in your css
@tailwind base;
theme: {
extinguish: {
legacy: true,
boxSizing: false, // "unset" "content-box" "border-box" "inherit"
layout: false,
borderColor: false,
font: true,
pseudoElements: false,
placeholders: false,
images: true,
forms: false,
lists: false,
forElements(element,spec){}
}
}
old browser support (currently only for ie11), doesn't use the unset keyword and changes default styles that are different from other browsers (currently <pre>
, <code>
and <samp>
not inheriting font-size
)
* {
contain: layout;
}
avoids performance footguns (recommended)
false by default because it's tricky to get consistent styling cross-browser as safari and edge don't support this feature yet, this also breaks the tailwind typography plugin
border-color: inherit
, allows setting a default border color like in preflight
makes all elements inherit font
true by default to match normalize.css but for content-focused websites, you probably don't want form elements to inherit font
add reset styles to ::before
and ::after
false by default since the tailwindcss workflow rarely uses pseudoelements
pseudoelements should be avoided in general since content belongs in html and there doesn't exist a way to hide purely presentational pseudoelement content from screen readers
must be enabled for the tailwind typography plugin to work
unset placeholder opacity (mostly for firefox)
unset image height (makes images keep aspect ratio)
removes inconsistent styling in mobile safari
this setting is false by default because if you want consistent styles for form controls it's recommended you use a more complete library like https://github.com/tailwindlabs/tailwindcss-forms that will make this reset redundant
unstyle <ul>
and <ol>
elements
this setting is false by default because in most cases you can just use role=list
on a <div>
if you want an unstyled list
function that returns css rules
first argument is the element name as a string
second argument is an object containing the properties of the element according to the html spec (currently just contentModel and display) see the spec.js
file for more details
example:
// make flex the default display property for elements that accept flow content
(element, spec) => {
const rules = {};
if (
spec.contentModel == "flow" && spec.display == "block"
) {
rules[element] = {
display: "flex",
flexDirection: "column",
};
}
return rules;
}
if you want to support ie, put role=main
on a <div>
fieldsets should be avoided https://bugs.chromium.org/p/chromium/issues/detail?id=375693, use role=group
on a <div>
instead
if you want to support ie, use script tags instead
because that's not the semantics that operating systems use