This is a CSS browser reset based on Tailwind's preflight, optimized for non-Tailwind projects. Optional enhancements like smooth scrolling and other utilities are also provided.
The following adjustments have been made to the preflight:
- Tailwind-specific CSS variables and styling removed.
- Two Tailwind
font-familydefaults have been removed from the preflight in favor of optional imports. One was setting the default font stack for the overall HTML document, and the other was setting monospace fonts for HTML elements likecode.
Font stacks are a rapidly evolving space at the moment, and the use of
system fonts is becoming more common, such as in Tailwind's
preflight. However, the use of system-ui and similar values for the font-family
property can be problematic. They not only depend on the OS version,
but on the language settings of the OS as well, which can be unpredictable,
according to the following article: https://infinnie.github.io/blog/2017/systemui.html.
Granted, this is an older article, but as a precaution, font-family defaults
have been moved to optional imports with possible system fonts being manually
specified over the usage of system-ui, monospace-ui, etc.
#pnpm
pnpm add css-preflight
#npm
npm install css-preflightNote this setup doesn't contain any defaults for the main font. Those are available as optional imports.
// main preflight
// import "css-preflight" does the same.
import "css-preflight/preflight.css";
// Sets default fonts for html elements that use monospace fonts
// Unnecessary to use this if wanting to set your own monospace fonts
import "css-preflight/mono-elements.css";For fastest performance, it's recommended to have the CSS directly
injected into the HTML as a <style> tag, along with any other critical
CSS applying to above-the-fold content. Avoid putting the <style> tag
inside <head> as invalid CSS can break processing of other elements
inside <head>.
<head></head>
<body>
<style>
<!-- Inject here -->
</style>
<!-- Rest of html -->
</body>Reminder to set emoji font fallbacks when defining your own font stacks:
:root,
:host {
font-family:
/* Your fonts here */
sans-serif, /* or serif, monospace, etc. */
/* then do: */
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
}The main Tailwind-derived CSS reset.
import "css-preflight"; // styles/preflight.cssimport "css-preflight/preflight.css"; // styles/preflight.cssSets a default main font for the document (body text, headings, etc.) Only applies these
to :root and :host, to be inherited by other elements. Useful in development when
no main font has been chosen for the design yet, or for simple testing purposes.
import "css-preflight/font-mono.css";import "css-preflight/font-sans-serif.css";import "css-preflight/font-serif.css";Sets a default monospace font stack for the code, kbd, samp, and pre
HTML elements. Many design and branding systems don't include
monospace font guidelines so this option can be useful for those cases.
import "css-preflight/mono-elements.css";Sets 1 rem = 1px at the root for easier design-dev hand-off. This calculation
is done using %, so if the user adjusts the browser font sizes, those will
still affect the page for accessibility purposes. Note this may affect
framework error debug message pages in development (e.g. Nuxt, Next, Astro, etc.).
import "css-preflight/rem-same-px.css"; // styles/rem-same-px.cssEnables smooth scrolling to anchor points (e.g. #about). Disabled for prefers-reduced-motion.
import "css-preflight/smooth-scroll.css"; // styles/smooth-scroll.cssAdds text-wrap: balance on h1-h6 and blockquote. Helps prevent single hanging words on
heading newlines.
import "css-preflight/text-wrap-balance.css"; // styles/text-wrap-balance.cssThe repo falls under MIT licensing, contained in the LICENSE.md file.
Usage of the preflight.css file is also subject to Tailwind's licensing (MIT), which is included
in the repo for reference.
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}