# Using normalize.css with Bootstrap or Tailwind CSS: A Complete Guide
> Learn how to use normalize.css with Bootstrap or Tailwind CSS. This guide explains its compatibility with other CSS frameworks for consistent browser styling.
- Repository: [Nicolas Gallagher/normalize.css](https://github.com/necolas/normalize.css)
- Tags: how-to-guide
- Published: 2026-03-07
---
**Yes, normalize.css can be safely used alongside Bootstrap, Tailwind CSS, or any other CSS framework because it only normalizes browser default styles for HTML elements without defining component classes.**
The [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) repository provides a tiny stylesheet designed to make browsers render all elements consistently while preserving useful default styling. Unlike CSS frameworks that provide utility classes or pre-built components, normalize.css focuses exclusively on cross-browser normalization of native HTML elements.
## What normalize.css Actually Does
According to the [`README.md`](https://github.com/necolas/normalize.css/blob/main/README.md) in the [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) repository, the project's sole purpose is to ensure consistent rendering across browsers while keeping useful defaults intact. It does not define `.btn`, `.grid`, or any utility classes like `bg-blue-500`.
In the [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) source file, you will find rules that target global element selectors only. For example, it sets `margin: 0` on the `body` element, normalizes `h1` font sizes, and fixes `sub`/`sup` line-box height issues. These adjustments create a clean baseline without imposing any design system or component architecture.
## Why It Works with Other Frameworks
The architectural distinction between normalize.css and frameworks like Bootstrap or Tailwind CSS allows them to coexist without conflicts. Because normalize.css only overrides browser defaults using element selectors, it avoids the specificity wars often caused by aggressive CSS resets.
**Bootstrap** and **Tailwind CSS** operate at different layers:
- **Bootstrap** provides opinionated UI components and a grid system through classes like `.btn` and `.container`
- **Tailwind CSS** offers a utility-first design system with classes like `flex`, `pt-4`, and `text-center`
- **normalize.css** adjusts the underlying browser stylesheet for elements like `button`, `input`, and `h1` without using classes
The primary risk occurs only if you load [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) *after* the framework, potentially unintentionally overriding a framework's base rule (such as resetting `button` margins that a framework deliberately set).
## Integration Methods
### Via CDN
Load normalize.css in your HTML `` before your framework's stylesheet to ensure the framework's intentional overrides take precedence:
```html
```
### Via NPM and Build Pipelines
When using a module bundler, install both packages via NPM:
```bash
npm install --save normalize.css bootstrap
# or
npm install --save normalize.css tailwindcss
```
Then import normalize.css at the top of your entry stylesheet:
```css
/* main.css (or your entry .scss) */
@import "normalize.css"; /* 1️⃣ Normalise first */
@import "bootstrap/dist/css/bootstrap.min.css"; /* 2️⃣ Bootstrap */
```
### With Tailwind CSS (PostCSS Pipeline)
For Tailwind CSS projects, place the normalize.css import before the Tailwind directives:
```css
/* src/styles.css */
@import "normalize.css"; /* Normalise the browser defaults */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
You can verify your configuration in [`tailwind.config.js`](https://github.com/necolas/normalize.css/blob/main/tailwind.config.js), though no special configuration is required since normalize.css simply runs before Tailwind's base layer:
```js
// tailwind.config.js
module.exports = {
// your existing configuration
corePlugins: {
// normalize.css operates independently of these plugins
},
}
```
## Key Files in the Repository
Understanding the source structure of [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) helps clarify its integration capabilities:
- **[`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css)** - The actual stylesheet containing detailed comments explaining each normalization rule, such as corrections for HTML5 display definitions and form element inconsistencies
- **[`README.md`](https://github.com/necolas/normalize.css/blob/main/README.md)** - Documents the design philosophy, emphasizing that it "Preserves useful defaults, unlike many CSS resets"
- **[`test.html`](https://github.com/necolas/normalize.css/blob/main/test.html)** - A UI test harness that demonstrates how the styles affect various elements, useful for verifying that integration with other frameworks does not break expected behavior
## Summary
- **Load order matters**: Always place normalize.css before Bootstrap, Tailwind CSS, or other frameworks in your stylesheet stack
- **No class conflicts**: normalize.css only uses element selectors, so it never competes with framework utility classes or component names
- **Cross-browser foundation**: It handles browser-specific quirks like inconsistent `button` styling and `h1` sizing without imposing design decisions
- **Flexible integration**: Works via CDN, NPM, or direct import in PostCSS pipelines alongside any CSS architecture
## Frequently Asked Questions
### Will normalize.css override my Bootstrap button styles?
No, normalize.css will not override Bootstrap's button styles as long as you load normalize.css first. Bootstrap uses class selectors (like `.btn`) which have higher specificity than normalize.css's element selectors. If loaded in the correct order, Bootstrap's intentional styling will naturally override any overlapping base rules set by normalize.css.
### Do I need to disable Tailwind's preflight when using normalize.css?
No, you do not need to disable Tailwind's preflight. While Tailwind includes its own normalization layer (Preflight), many developers successfully use both by importing normalize.css before the `@tailwind` directives. However, since Tailwind's Preflight is more aggressive than normalize.css, you should test thoroughly if using both, or choose one based on your baseline normalization needs.
### Can I load normalize.css after my framework instead of before?
You can, but it is not recommended. Loading normalize.css after your framework risks unintentionally resetting margins, padding, or font sizes that the framework deliberately configured. If you must load it after, audit the cascade carefully to ensure you are not breaking component layouts that depend on specific base styles.
### Is normalize.css still necessary with modern CSS frameworks?
Yes, normalize.css remains valuable even with modern frameworks. While Bootstrap and Tailwind include their own baseline styles, normalize.css provides a comprehensive, battle-tested foundation for HTML5 element consistency across legacy and modern browsers. It ensures that elements like `article`, `section`, and `main` display correctly as block elements, and normalizes form controls before framework-specific styling takes over.