---
baseClass: 'ppe-landing'
---
{% extends "layouts/base.njk" %}

{% block content %}
	<main>
		<div class="ppe-landing-hero">
			<div class="ppe-landing-container">
				<h1 class="ppe-landing-title">Start using modern CSS today</h1>
				<div class="ppe-hero-cards">
					<div class="ppe-hero-card">
						<p class="ppe-hero-card-title">Modern CSS</p>
						{% highlight "css" %}
:root {
  --mainColor: #12345678;
}

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

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

  &:hover {
    color: rebeccapurple;
  }

  > span {
    color: color-mix(in oklch, cyan, green 25%);
  }
}

:is(input, button):is(:hover, :focus) {
  color: oklch(40% 0.268735435 34.568626);
}{% endhighlight %}
					</div>
					<div class="ppe-hero-card">
						<p class="ppe-hero-card-title">Becomes...</p>
						{% highlight "css" %}
: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 {
    color: rgb(0, 222, 199);
  }

@media (color-gamut: p3) {
  a  > span {
    color: color(display-p3 0.33498 0.86864 0.78466);
  }
}

input:hover, input:focus, button:hover, button:focus {
  color: rgb(131, 27, 0);
}

@media (color-gamut: p3) {
  input:hover, input:focus, button:hover, button:focus {
    color: color(display-p3 0.49362 0.10739 0);
  }
}{% endhighlight %}
					</div>
				</div>
			</div>
		</div>
		<section class="ppe-landing-getting-started">
			<div class="ppe-landing-container">
				<h2 class="ppe-getting-started-title">Getting Started</h2>
				<ol>
					<li>Install <code>postcss-preset-env</code> from npm.</li>
					<li>Add postcss-preset-env to your configuration.</li>
				</ol>
				<p>Here's an example with a <code>postcss.config.js</code> file:</p>
				{% highlight "js" %}
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv(),
  ]
}{% endhighlight %}
				<p>You can <a href="https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env#usage">read more on how to use and install PostCSS Preset Env</a>.</p>
			</div>
		</section>

		<section class="ppe-landing-section">
			<div class="ppe-landing-container">
				<div class="ppe-section-text">
					<h2>Tomorrow's CSS features are already available. Start using them today</h2>
					<p>With <code>postcss-preset-env</code> you can use modern features such as alpha hex color, break properties,... Check out the full <a href="https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md">features list</a>.</p>

					<p><code>postcss-preset-env</code> will provide fallbacks and polyfills for CSS features to make your projects work in as many browsers as possible.</p>
				</div>
				<div class="ppe-section-decoration">
					<ul class="ppe-word-rotate">
						<li>mixins</li>
						<li>cascade layers</li>
						<li>media query ranges</li>
						<li>nesting rules</li>
						<li><code>oklab()</code> function</li>
						<li>custom selectors</li>
						<li><code>light-dark()</code></li>
						<li><code>color-mix()</code> function</li>
					</ul>
				</div>
			</div>
		</section>
		<section class="ppe-landing-section">
			<div class="ppe-landing-container">
				<div class="ppe-section-text">
					<h2>Select the stage of CSS Specs</h2>
					<p>You can select which <a href="https://cssdb.org/#the-staging-process">stage</a> of CSS Specification you want to use. Or use the default and PostCSS Preset Env will enable Stage 2 features.</p>
					<p>There are also lots of <a href="https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env#options">options</a> you can tweak!</p>
				</div>
				<div class="ppe-section-decoration">
					<img src="{{ "/static/images/options.svg" | addHash }}" loading="lazy" alt="Person staring at some sliders" width="744.79921" height="449.14098" />
				</div>
			</div>
		</section>
		<section class="ppe-landing-section">
			<div class="ppe-landing-container">
				<div class="ppe-section-text">
					<h2>Works with PostCSS</h2>
					<p><a href="https://postcss.org/">PostCSS</a> is <em>the</em> 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!</p>
				</div>
				<div class="ppe-section-decoration">
					<img class="ppe-postcss-logo" src="{{ "/static/images/postcss.svg" | addHash }}" loading="lazy" alt="PostCSS Logo" width="79" height="78" />
				</div>
			</div>
		</section>
		<section class="ppe-landing-section">
			<div class="ppe-landing-container">
				<div class="ppe-section-text">
					<h2>Trusted by millions</h2>
					<p>PostCSS Preset Env is downloaded more than 7 million times a week from NPM. Found a bug? <a href="https://github.com/csstools/postcss-plugins/issues/new/choose">Let us know on GitHub</a>!</p>
				</div>
				<div class="ppe-section-decoration">
					<img class="ppe-postcss-logo" src="{{ "/static/images/websites.svg" | addHash }}" loading="lazy" alt="People building a website" width="876.27165" height="661.47277" />
				</div>
			</div>
		</section>

		<div class="ppe-landing-container">
			<p class="ppe-latest-version">
				Latest version: <strong>{{ presetVersion }}</strong> <br/>
				See <a href="https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/CHANGELOG.md">CHANGELOG</a>
			</p>
		</div>

		<p class="ppe-deploys">
			<a href="https://www.netlify.com" target="_blank" rel="noreferrer" class="ppe-deploys__logo">
				<img src="https://www.netlify.com/assets/badges/netlify-badge-dark.svg" alt="Deploys by Netlify" loading="lazy" decoding="async" width="114" height="51" />
			</a>
		</p>
	</main>
{% endblock %}
