or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-unocss--reset

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@unocss/reset@66.5.x

To install, run

npx @tessl/cli install tessl/npm-unocss--reset@66.5.0

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.