Porsche Design System

Spacing

Table of Contents

Fluid
Static

The Porsche Design System Tailwind theme customizes the Tailwind variable --spacing-*, which affect multiple Tailwind classes including .m-fluid-*, .m-static-*, .p-fluid-*, .p-static-*, .w-fluid-*, .w-static-*, .h-fluid-*, .h-static-* and others.

Fluid#

Spacing scales dynamically based on the viewport width, within defined minimum and maximum limits. Mainly intended for vertical spacing between elements.

.w-fluid-xs .h-fluid-xs
.w-fluid-sm .h-fluid-sm
.w-fluid-md .h-fluid-md
.w-fluid-lg .h-fluid-lg
.w-fluid-xl .h-fluid-xl
.w-fluid-2xl .h-fluid-2xl

Open in Stackblitz

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

<ul class="grid gap-fluid-md prose-text-sm">
  <li class="flex items-center gap-static-md">
    <div class="w-fluid-xs h-fluid-xs bg-red-100"></div>
    .w-fluid-xs .h-fluid-xs
  </li>
  <li class="flex items-center gap-static-md">
    <div class="w-fluid-sm h-fluid-sm bg-red-100"></div>
    .w-fluid-sm .h-fluid-sm
  </li>
  <li class="flex items-center gap-static-md">
    <div class="w-fluid-md h-fluid-md bg-red-100"></div>
    .w-fluid-md .h-fluid-md
  </li>
  <li class="flex items-center gap-static-md">
    <div class="w-fluid-lg h-fluid-lg bg-red-100"></div>
    .w-fluid-lg .h-fluid-lg
  </li>
  <li class="flex items-center gap-static-md">
    <div class="w-fluid-xl h-fluid-xl bg-red-100"></div>
    .w-fluid-xl .h-fluid-xl
  </li>
  <li class="flex items-center gap-static-md">
    <div class="w-fluid-2xl h-fluid-2xl bg-red-100"></div>
    .w-fluid-2xl .h-fluid-2xl
  </li>
</ul>
<script>

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

Static#

Spacing uses static, pixel-based values. Primarily used for horizontal spacing between elements.

.w-static-xs .h-static-xs
.w-static-sm .h-static-sm
.w-static-md .h-static-md
.w-static-lg .h-static-lg
.w-static-xl .h-static-xl
.w-static-2xl .h-static-2xl

Open in Stackblitz

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

<ul class="grid gap-fluid-md prose-text-sm">
  <li class="flex items-center gap-static-md">
    <div class="w-static-xs h-static-xs bg-red-100"></div>
    .w-static-xs .h-static-xs
  </li>
  <li class="flex items-center gap-static-md">
    <div class="w-static-sm h-static-sm bg-red-100"></div>
    .w-static-sm .h-static-sm
  </li>
  <li class="flex items-center gap-static-md">
    <div class="w-static-md h-static-md bg-red-100"></div>
    .w-static-md .h-static-md
  </li>
  <li class="flex items-center gap-static-md">
    <div class="w-static-lg h-static-lg bg-red-100"></div>
    .w-static-lg .h-static-lg
  </li>
  <li class="flex items-center gap-static-md">
    <div class="w-static-xl h-static-xl bg-red-100"></div>
    .w-static-xl .h-static-xl
  </li>
  <li class="flex items-center gap-static-md">
    <div class="w-static-2xl h-static-2xl bg-red-100"></div>
    .w-static-2xl .h-static-2xl
  </li>
</ul>
<script>

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