Porsche Design System

Media Query

The Porsche Design System Tailwind theme customizes the Tailwind variable --breakpoint-*, which affect multiple Tailwind classes including .sm:*, .max-sm:*, .sm:max-md:* and others.

Media Query Min:

Media Query Max:

Media Query Min Max:

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<div class="grid gap-fluid-md prose-text-sm">
  <p class="xs:after:content-['.xs:'] sm:after:content-['.sm:'] md:after:content-['.md:'] lg:after:content-['.lg:'] xl:after:content-['.xl:'] 2xl:after:content-['.2xl:']">
    Media Query Min: 
  </p>
  <p class="max-xs:after:content-['.max-xs:'] max-sm:after:content-['.max-sm:'] max-md:after:content-['.max-md:'] max-lg:after:content-['.max-lg:'] max-xl:after:content-['.max-xl:'] max–2xl:after:content-['.max-2xl:']">
    Media Query Max: 
  </p>
  <p class="xs:max-sm:after:content-['.xs:max-sm:'] sm:max-md:after:content-['.sm:max-md:'] md:max-lg:after:content-['.md:max-lg:'] lg:max-xl:after:content-['.lg:max-xl:'] xl:max-2xl:after:content-['.xl:max-2xl:']">
    Media Query Min Max: 
  </p>
</div>
<script>

</script>
</body>
</html>