How to Add a CSS reset to React app

In this tutorial, we are going to learn about how to add a css reset to the create-react-app using post css normalize.

What is CSS reset?

A css reset is a set of css rules which change the browser default styling and maintain the consistent styling in all browsers.

Adding CSS reset

This tutorial assumes that you already created a new react project using create-react-app.

Open your index.css file and add @import-normalize; at top of the file.

@import-normalize;

/*your css styling goes here*/

This import will add a normalize.css file to your project.

You can also control which parts of normalize.css need to add in your project by using browserlist.

By default create-react-app comes with this configuration in package.json file.

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Browser support

Browser support depends upon normalize.css project.

• Chrome (last 3)
• Edge (last 3)
• Firefox (last 3)
• Firefox ESR
• Opera (last 3)
• Safari (last 3)
• iOS Safari (last 2)
• Internet Explorer 9+