---
title: "Viewport unit classes"
description: "The `vw` classes that turn Tailwind’s spacing scale fluid, and `spacing-reset`."
url: https://docs.systhema.app/next/reference/utilities/viewport-units
version: unreleased (main)
docs_index: https://docs.systhema.app/next/llms.txt
---

<!-- generated by pnpm docs:generate; do not edit -->

Tailwind’s spacing utilities (`p-4`, `gap-6`, `w-24`) multiply `--spacing`. These classes redefine `--spacing` for an element and its children, so every spacing utility inside scales with the viewport relative to a design width. `--screen-current` is the design width of the active breakpoint.

| Class           | Styles                                                |
| --------------- | ----------------------------------------------------- |
| `vw`            | `--spacing: calc(4 / var(--screen-current) * 100vw);` |
| `vw-1`          | `--spacing: calc(1 / var(--screen-current) * 100vw);` |
| `vw-px`         | `--spacing: calc(1 / var(--screen-current) * 100vw);` |
| `spacing-reset` | `--spacing: 4px;`                                     |
| `vw-1-2xl`      | `--spacing: calc(1 / 1920 * 100vw);`                  |
| `vw-1-3xl`      | `--spacing: calc(1 / 2560 * 100vw);`                  |
| `vw-1-lg`       | `--spacing: calc(1 / 1192 * 100vw);`                  |
| `vw-1-md`       | `--spacing: calc(1 / 768 * 100vw);`                   |
| `vw-1-sm`       | `--spacing: calc(1 / 390 * 100vw);`                   |
| `vw-1-xl`       | `--spacing: calc(1 / 1440 * 100vw);`                  |
| `vw-2xl`        | `--spacing: calc(4 / 1920 * 100vw);`                  |
| `vw-3xl`        | `--spacing: calc(4 / 2560 * 100vw);`                  |
| `vw-lg`         | `--spacing: calc(4 / 1192 * 100vw);`                  |
| `vw-md`         | `--spacing: calc(4 / 768 * 100vw);`                   |
| `vw-px-2xl`     | `--spacing: calc(1 / 1920 * 100vw);`                  |
| `vw-px-3xl`     | `--spacing: calc(1 / 2560 * 100vw);`                  |
| `vw-px-lg`      | `--spacing: calc(1 / 1192 * 100vw);`                  |
| `vw-px-md`      | `--spacing: calc(1 / 768 * 100vw);`                   |
| `vw-px-sm`      | `--spacing: calc(1 / 390 * 100vw);`                   |
| `vw-px-xl`      | `--spacing: calc(1 / 1440 * 100vw);`                  |
| `vw-sm`         | `--spacing: calc(4 / 390 * 100vw);`                   |
| `vw-xl`         | `--spacing: calc(4 / 1440 * 100vw);`                  |