CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-unocss--reset

Collection of CSS reset stylesheets for normalizing browser default styles and providing consistent cross-browser styling foundations

—

Pending
Overview
Eval results
Files

index.mddocs/

@unocss/reset

@unocss/reset provides a collection of standardized CSS reset stylesheets designed to normalize browser default styles and provide consistent cross-browser styling foundations. The package includes multiple reset variants from popular CSS libraries and frameworks, distributed as static CSS files with zero runtime dependencies.

Package Information

  • Package Name: @unocss/reset
  • Package Type: npm
  • Language: CSS
  • Installation: npm install @unocss/reset

Core Imports

CSS imports (recommended):

@import '@unocss/reset/eric-meyer.css';
@import '@unocss/reset/tailwind.css';
@import '@unocss/reset/tailwind-compat.css';

Bundle imports:

import '@unocss/reset/eric-meyer.css';
import '@unocss/reset/tailwind.css';
import '@unocss/reset/tailwind-compat.css';

Basic Usage

/* Simple reset using Eric Meyer's classic reset */
@import '@unocss/reset/eric-meyer.css';

/* Or use Tailwind-style reset with customization */
@import '@unocss/reset/tailwind.css';

:root {
  --un-default-border-color: #e5e7eb; /* Customize border color */
}

Capabilities

Eric Meyer CSS Reset

Classic CSS reset that removes default margins, padding, and styling from all HTML elements.

/* Eric Meyer's CSS Reset v2.0 (Public Domain) */
/* Resets: margin, padding, border, font-size, font, vertical-align */
/* Targets: html, body, div, span, applet, object, iframe, h1-h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video */

Import:

@import '@unocss/reset/eric-meyer.css';

Tailwind CSS Reset

Modern CSS reset based on Tailwind's preflight styles, providing consistent cross-browser base styles with modern CSS practices.

/* Key reset features: */
/* - box-sizing: border-box for all elements */
/* - Border normalization with CSS variable support */
/* - Typography baseline settings */
/* - Form element styling normalization */
/* - HTML5 element display fixes */

/* CSS Custom Properties: */
--un-default-border-color: #e5e7eb; /* Default border color (customizable) */
--un-content: ''; /* Used for ::before and ::after pseudo-elements */

Import:

@import '@unocss/reset/tailwind.css';

Customization:

@import '@unocss/reset/tailwind.css';

:root {
  --un-default-border-color: #374151; /* Custom border color */
}

Tailwind CSS Reset (UI Framework Compatible)

Modified version of the Tailwind reset with improved compatibility for UI component libraries.

/* Same as tailwind.css but with these changes: */
/* - Removes button background-color override to prevent UI framework conflicts */
/* - Maintains all other Tailwind preflight functionality */
/* - Uses same CSS custom properties as tailwind.css */

Import:

@import '@unocss/reset/tailwind-compat.css';

Use Case: Recommended when working with UI frameworks like Ant Design, Material-UI, or Bootstrap to avoid button styling conflicts.

Generated Reset Files

Additional reset files available after running the build process:

Normalize.css Reset

/* @csstools/normalize.css - Standards-based CSS reset */
/* Preserves useful defaults while fixing browser inconsistencies */

Import:

@import '@unocss/reset/normalize.css';

Sanitize.css Collection

/* sanitize.css library collection with modular CSS files: */
/* - sanitize/sanitize.css: Main sanitize reset */
/* - sanitize/forms.css: Form element normalization */
/* - sanitize/assets.css: Media and embedded content */
/* - sanitize/typography.css: Typography normalization */
/* - sanitize/reduce-motion.css: Accessibility motion preferences */
/* - sanitize/system-ui.css: System UI font stack */
/* - sanitize/ui-monospace.css: Monospace font stack */

Import:

@import '@unocss/reset/sanitize/sanitize.css';
@import '@unocss/reset/sanitize/forms.css';
@import '@unocss/reset/sanitize/typography.css';
/* Include other sanitize modules as needed */

Build Process

To generate the additional reset files (normalize.css and sanitize/*):

npm run build

This runs the build script that copies CSS files from external dependencies:

  • Copies @csstools/normalize.css to normalize.css
  • Copies all sanitize.css variants to sanitize/ directory

Reset File Comparison

Reset FileBrowser Reset LevelModern CSS FeaturesUI Framework SafeBest For
eric-meyer.cssCompleteNoneYesLegacy browser support, complete clean slate
tailwind.cssSelectiveYes (CSS variables)No (button conflicts)Modern web apps, full Tailwind compatibility
tailwind-compat.cssSelectiveYes (CSS variables)YesModern web apps with UI frameworks
normalize.cssMinimalSomeYesPreserving useful defaults while fixing inconsistencies
sanitize/*.cssModularYesYesGranular control over specific reset areas

Types

This package contains only CSS files and has no TypeScript definitions. All functionality is accessed through CSS imports.

Install with Tessl CLI

npx tessl i tessl/npm-unocss--reset

docs

index.md

tile.json