CSS Preflight
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 (see usage).
Preflight
The following adjustments have been made to Tailwind's preflight, located in styles/preflight.css
:
- Tailwind-specific CSS variables removed.
- Tailwind postcss functions like
theme()
removed. - Vendor prefixes (e.g.
-webkit-
,-moz-
) from css properties have been removed, to avoid duplication from autoprefixer when used. Inline comments in thepreflight.css
source code indicate which of these have been adjusted and note the original existing prefix. - system-ui fonts have been removed completely from
font-family
properties in exchange for either websafe fonts (e.g. Courier New for monospace elements), or removed completely (in the case of the original preflight's font-family on:root
).
Removing System UI Fonts
system-ui fonts can be problematic as they not only depend on the OS version, but on the language settings of the OS as well. These have been removed as it's felt they're too unpredictable to be left in as a preflight, and better left for a dev to intentionally specify them.
Installation
#pnpm
pnpm add css-preflight
#npm
npm install css-preflight
Usage
The exports are broken down into 4 main CSS files. Completely unprocessed so it's up to the dev to pass them through optimizations like Autoprefixer and minification.
Simply import these into the root layout file (like Layout.astro
for example).
They should be imported first before any other CSS imports.
Possible Imports
import 'css-preflight'; // styles/preflight.css
import 'css-preflight/preflight'; // ALIAS: styles/preflight.css
import 'css-preflight/enhancements'; // styles/enhancements.css
import 'css-preflight/smooth-scroll'; // styles/smooth-scroll.css
import 'css-preflight/rem-same-px'; // styles/rem-same-px.css
Typical Setup
import 'css-preflight';
import 'css-preflight/enhancements';
Preflight
Tailwind preflight (with adjustments mentioned previously). Can either do a bare
css-preflight
import, or use the more verbose option of css-preflight/preflight
.
Both are exactly the same.
Enhancements
These are small enhancements added to the main preflight:
- Adds
text-wrap: balance
on h1-h6 and blockquote. Helps prevent hanging words on newlines.
Smooth Scroll
Enables smooth scrolling to anchor points (e.g. #about). Disabled for prefers-reduced-motion
.
Rem Same Px
Sets rem equal to 1px at the root for easier design-dev handoff. This calculation is done
using %
, so the browser root font size will still affect fonts using rem
for
accessibility purposes.
License
The 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.