A Guide to Adding PostCSS Autoprefixer in Nuxt.js

July 02, 2021 • Dykraf

A utility in Nuxt.js out of the box that really useful for older browser prefixes from PostCSS with autoprefixer.

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, and you are really concerned about it. 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 project. Open up your package.json file in the text editor, and add a browserlist to the very bottom of the page:

Browserlists:

"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.

Original Post