How To Add PostCSS Autoprefixer in Nuxt.js

A utility from Nuxt.js out of the box that really useful for browser prefixes

Photo by Chris Yang on Unsplash

Autoprefixer is a PostCSS plugin for adding browser prefixes to your CSS so you don’t have to add a prefix every time you update CSS properties that have prefixes, especially for browser compatibility. There are some CSS properties that in other browser needs to have prefixes on them.

.col {
   display: flex;
}

Into:

.col {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

PostCSS autoprefixer plugins already reserved in Nuxt.js project, this is how to add PostCSS autoprefixer to your Nuxt.js projects. Open up your package.json file in the text editor, and add a browserslist objects to the very bottom of the package.json file. You can customize the browser list for your purpose.

Browserslist:

"browserslist": [
    ">0.3%",
    "not ie 11",
    "not dead",
    "not op_mini all",
    "last 3 version",
    "Chrome >= 35",
    "Firefox >= 38",
    "Edge >= 10",
    "Explorer >= 10",
    "ie >= 10",
    "iOS >= 8",
    "Safari >= 8",
    "Android 2.3",
    "Android >= 4",
    "Opera >= 12"
  ]

After updating your package.json:

{
  "name": "nuxtjs-tailwind-website",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style"
  },
  "lint-staged": {
    "*.{js,vue}": "eslint",
    "*.{css,vue}": "stylelint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "nuxt": "^2.15.3",
    "prism-themes": "^1.7.0"
  },
  "devDependencies": {
    "@nuxt/content": "^1.11.1",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "4.0.0",
    "@nuxtjs/tailwindcss": "^3.4.2",
    "babel-eslint": "10.1.0",
    "eslint": "^7.17.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "husky": "^4.3.7",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "stylelint": "13.8.0",
    "stylelint-config-prettier": "8.0.2",
    "stylelint-config-standard": "20.0.0"
  },
  "browserslist": [
    ">0.3%",
    "not ie 11",
    "not dead",
    "not op_mini all",
    "last 3 version",
    "Chrome >= 35",
    "Firefox >= 38",
    "Edge >= 10",
    "Explorer >= 10",
    "ie >= 10",
    "iOS >= 8",
    "Safari >= 8",
    "Android 2.3",
    "Android >= 4",
    "Opera >= 12"
  ]
}

The difference will be displayed on the CSS after you inspect the property. Hope this will help you in the future, thanks for stopping by, happy coding.