Start using modern CSS today

Modern CSS

:root {
  --mainColor: #12345678;
}

body {
  color: var(--mainColor);
  font-family: system-ui;
}

a {
  color: rgb(0 0 100% / 90%);

  &:hover {
    color: rebeccapurple;
  }

	& span {
		font-weight: bold;
	}
}

:is(input, button):is(:hover, :focus) {
	color: oklch(40% 0.268735435 34.568626);
}

Becomes...

:root {
	--mainColor: rgba(18,52,86,0.47059);
}

body {
	color: rgba(18,52,86,0.47059);
	color: var(--mainColor);
	font-family: system-ui,
							-apple-system,
							Segoe UI,
							Roboto,
							Ubuntu,
							Cantarell,
							Noto Sans,
							sans-serif;
}

a {
	color: rgba(0, 0, 255, 0.9)
}

a:hover {
		color: #639;
	}

a span {
		font-weight: bold;
	}

input:hover {
	color: rgb(143, 0, 0);
	color: color(display-p3 0.52929 0.00000 0.00000);
}

input:focus {
	color: rgb(143, 0, 0);
	color: color(display-p3 0.52929 0.00000 0.00000);
}

button:hover {
	color: rgb(143, 0, 0);
	color: color(display-p3 0.52929 0.00000 0.00000);
}

button:focus {
	color: rgb(143, 0, 0);
	color: color(display-p3 0.52929 0.00000 0.00000);
}

Getting Started

Install postcss-preset-env from npm.
Add postcss-preset-env to your configuration.

Here's an example with a postcss.config.js file:

module.exports = {
  plugins: [
    [
      'postcss-preset-env',
      {
        // Options
      },
    ],
  ]
}

Tomorrow's CSS features are already available. Start using them today

With postcss-preset-env you can use last features such as alpha hex color, break properties and other modern CSS functions. Check out the full features list.

custom properties
:is pseudo class
media query ranges
nesting rules
lab() function
system-ui font family
custom selectors
color() function

Select stage of CSS Specs

You can select which stage of CSS Specification you want to use. Or if you won't configure, PostCSS Preset Env will enable Stage 2 features and supports all browsers.

There are also lots of options you can tweak!

Works with PostCSS

PostCSS is the tool for transforming CSS with JavaScript with over 60 million downloads every week. If PostCSS is enabled, adding PostCSS Preset Env is just a breeze!

Trusted by millions

PostCSS Preset Env is downloaded more than 6 million times a week from NPM. Found a bug? Let us know on GitHub!

Latest version: 7.5.0
See CHANGELOG