We offer PostCSS on CodePen, and the purpose of using it is like anywhere else: you use plugins that do potentially useful preprocessing to your CSS. We do not currently have a way for you to use whatever plugin you want for PostCSS, we only offer a select few. To use them, you have to declare you are going to use them through code. For example:

@use postcss-triangle;

.isosceles-triangle {
  triangle: pointing-right;
  width: 150px;
  height: 115px;
  background-color: red;
}

The complete list of them is in the app, in the Pen Settings area:

Notice you can search/filter for what you are looking for, and we have a one-click Add button.

We just did a round of upgrades, so I figured, for the interested, we'd show off exactly what we're offering. Here's the actual part of the package.json file for the Node machine that processes our PostCSS:

  "dependencies": {
    "postcss": "^5.2.6",
    "postcss-use": "^2.3.0",
    "autoprefixer": "^6.5.3",
    "cssnext": "^1.8.4",
    "postcss-cssnext": "^2.9.0",
    "lost": "^7.1.1",
    "postcss-conditionals": "^2.0.3",
    "postcss-custom-media": "^5.0.1",
    "postcss-discard-comments": "^2.0.4",
    "postcss-each": "^0.9.3",
    "postcss-for": "^2.1.1",
    "postcss-media-minmax": "^2.1.2",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0",
    "postcss-transform-shortcut": "^2.0.0",
    "postcss-flexbox": "^1.0.2",
    "postcss-color-function": "^2.0.1",
    "postcss-triangle": "^1.0.1",
    "postcss-apply": "^0.4.0",
    "postcss-mixins": "^5.4.0",
    "postcss-extend": "^1.0.5",
    "postcss-reverse-media": "^0.1.2"
  },

And here's a single Pen using every single one of them (very basic uses):

See the Pen All PostCSS Plugins we offer (December 2016) by Chris Coyier (@chriscoyier) on CodePen.