0
# @unocss/reset
1

2
@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.
3

4
## Package Information
5

6
- **Package Name**: @unocss/reset
7
- **Package Type**: npm
8
- **Language**: CSS
9
- **Installation**: `npm install @unocss/reset`
10

11
## Core Imports
12

13
CSS imports (recommended):
14

15
```css
16
@import '@unocss/reset/eric-meyer.css';
17
@import '@unocss/reset/tailwind.css';
18
@import '@unocss/reset/tailwind-compat.css';
19
```
20

21
Bundle imports:
22

23
```javascript
24
import '@unocss/reset/eric-meyer.css';
25
import '@unocss/reset/tailwind.css';
26
import '@unocss/reset/tailwind-compat.css';
27
```
28

29
## Basic Usage
30

31
```css
32
/* Simple reset using Eric Meyer's classic reset */
33
@import '@unocss/reset/eric-meyer.css';
34

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

38
:root {
39
  --un-default-border-color: #e5e7eb; /* Customize border color */
40
}
41
```
42

43
## Capabilities
44

45
### Eric Meyer CSS Reset
46

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

49
```css { .api }
50
/* Eric Meyer's CSS Reset v2.0 (Public Domain) */
51
/* Resets: margin, padding, border, font-size, font, vertical-align */
52
/* 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 */
53
```
54

55
**Import:**
56
```css
57
@import '@unocss/reset/eric-meyer.css';
58
```
59

60
### Tailwind CSS Reset
61

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

64
```css { .api }
65
/* Key reset features: */
66
/* - box-sizing: border-box for all elements */
67
/* - Border normalization with CSS variable support */
68
/* - Typography baseline settings */
69
/* - Form element styling normalization */
70
/* - HTML5 element display fixes */
71

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

77
**Import:**
78
```css
79
@import '@unocss/reset/tailwind.css';
80
```
81

82
**Customization:**
83
```css
84
@import '@unocss/reset/tailwind.css';
85

86
:root {
87
  --un-default-border-color: #374151; /* Custom border color */
88
}
89
```
90

91
### Tailwind CSS Reset (UI Framework Compatible)
92

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

95
```css { .api }
96
/* Same as tailwind.css but with these changes: */
97
/* - Removes button background-color override to prevent UI framework conflicts */
98
/* - Maintains all other Tailwind preflight functionality */
99
/* - Uses same CSS custom properties as tailwind.css */
100
```
101

102
**Import:**
103
```css
104
@import '@unocss/reset/tailwind-compat.css';
105
```
106

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

110
### Generated Reset Files
111

112
Additional reset files available after running the build process:
113

114
#### Normalize.css Reset
115

116
```css { .api }
117
/* @csstools/normalize.css - Standards-based CSS reset */
118
/* Preserves useful defaults while fixing browser inconsistencies */
119
```
120

121
**Import:**
122
```css
123
@import '@unocss/reset/normalize.css';
124
```
125

126
#### Sanitize.css Collection
127

128
```css { .api }
129
/* sanitize.css library collection with modular CSS files: */
130
/* - sanitize/sanitize.css: Main sanitize reset */
131
/* - sanitize/forms.css: Form element normalization */
132
/* - sanitize/assets.css: Media and embedded content */
133
/* - sanitize/typography.css: Typography normalization */
134
/* - sanitize/reduce-motion.css: Accessibility motion preferences */
135
/* - sanitize/system-ui.css: System UI font stack */
136
/* - sanitize/ui-monospace.css: Monospace font stack */
137
```
138

139
**Import:**
140
```css
141
@import '@unocss/reset/sanitize/sanitize.css';
142
@import '@unocss/reset/sanitize/forms.css';
143
@import '@unocss/reset/sanitize/typography.css';
144
/* Include other sanitize modules as needed */
145
```
146

147
## Build Process
148

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

151
```bash
152
npm run build
153
```
154

155
This runs the build script that copies CSS files from external dependencies:
156
- Copies `@csstools/normalize.css` to `normalize.css`
157
- Copies all sanitize.css variants to `sanitize/` directory
158

159
## Reset File Comparison
160

161
| Reset File | Browser Reset Level | Modern CSS Features | UI Framework Safe | Best For |
162
|------------|-------------------|------------------|--------------------|----------|
163
| eric-meyer.css | Complete | None | Yes | Legacy browser support, complete clean slate |
164
| tailwind.css | Selective | Yes (CSS variables) | No (button conflicts) | Modern web apps, full Tailwind compatibility |
165
| tailwind-compat.css | Selective | Yes (CSS variables) | Yes | Modern web apps with UI frameworks |
166
| normalize.css | Minimal | Some | Yes | Preserving useful defaults while fixing inconsistencies |
167
| sanitize/*.css | Modular | Yes | Yes | Granular control over specific reset areas |
168
169
## Types
170

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