Question 1

How to use sanitize.css with a React app?

Accepted Answer

Import sanitize.css in your main JavaScript file using 'import sanitize.css' or include it via a link tag in public/index.html. For modular components like forms.css, import them similarly, and ensure your build tool handles CSS imports correctly.

Question 2

What's the difference between sanitize.css and normalize.css?

Accepted Answer

Sanitize.css extends normalize.css by adding opinionated defaults like border-box sizing and uses zero-specificity :where() selectors. Normalize.css only focuses on cross-browser consistency without extra opinions, as explained in the README's differences section.

Question 3

Does sanitize.css work with Tailwind CSS?

Accepted Answer

Yes, but integration requires care. Sanitize.css's low specificity helps avoid conflicts, but Tailwind's preflight reset might overlap. Load sanitize.css first, then Tailwind, and adjust as needed, especially for form styles.

Question 4

How to override sanitize.css default styles?

Accepted Answer

Write custom CSS rules after importing sanitize.css, taking advantage of its zero-specificity selectors for easy overrides. For example, to change fonts, simply define new font-family properties in your own stylesheet.

Question 5

Is sanitize.css good for performance?

Accepted Answer

It's lightweight and efficient, but the modular approach can lead to multiple HTTP requests if not bundled. Use build tools to combine files or a CDN with minification to optimize load times.

Question 6

Can I use sanitize.css for email templates?

Accepted Answer

Not recommended, as email clients have limited CSS support and sanitize.css relies on modern features like :where(). For emails, stick to inline styles and simpler, email-specific resets.

Sanitize.css

What is Sanitize.css?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions