### Install PostCSS PX to Unit Plugin

Source: https://github.com/sadwood/postcss-px-to-unit/blob/master/README.md

Install the plugin using npm, yarn, or pnpm. This is a development dependency.

```shell
# npm
npm install postcss-px-to-unit -D
```

```shell
# yarn
yarn add postcss-px-to-unit -D
```

```shell
# pnpm
pnpm add postcss-px-to-unit -D
```

--------------------------------

### PxToUnit Configuration Options

Source: https://github.com/sadwood/postcss-px-to-unit/blob/master/README.md

Example of initializing PxToUnit with various configuration options. Ensure all options are correctly set according to the documentation.

```javascript
PxToUnit({
  targetUnit: "vw",
  ignoreThreshold: 1,
  viewportWidth: 375,
  viewportHeight: 667,
  htmlFontSize: 37.5,
  unitPrecision: 5,
  excludeFiles: [],
  excludeSelectors: [],
  excludeProperties: [],
  cacheSize: 100,
  debug: false,
});
```

--------------------------------

### VH Mode Conversion Example

Source: https://github.com/sadwood/postcss-px-to-unit/blob/master/README.md

Demonstrates how to use the 'vh' target unit for scaling values against viewport height. This is useful for elements that should adjust based on the screen's height.

```css
/* Input */
.test {
  height: 66.7px;
}

/* Output */
.test {
  height: 10vh;
}
```

--------------------------------

### VW&REM Mode Conversion Example

Source: https://github.com/sadwood/postcss-px-to-unit/blob/master/README.md

Illustrates the 'vw&rem' mode for responsive design, providing a fallback to 'rem' for browsers that do not support 'vw'. This ensures broader compatibility for layout elements.

```css
/* Input */
.test {
  border: 3.75px solid #fff;
}

/* Output */
.test {
  border: 0.1rem solid #fff;
  border: 1vw solid #fff;
}
```

--------------------------------

### Configure PostCSS PX to Unit in Vite

Source: https://github.com/sadwood/postcss-px-to-unit/blob/master/README.md

Add the PxToUnit plugin to your Vite configuration. Import the plugin and place it within the css.postcss.plugins array.

```javascript
// vite.config.js
import PxToUnit from "postcss-px-to-unit";

export default defineConfig(() => ({
  // ...
  css: {
    postcss: {
      plugins: [
        PxToUnit({
          // options
        }),
      ],
    },
  },
  // ...
}));
```

--------------------------------

### Configure PostCSS PX to Unit in Webpack

Source: https://github.com/sadwood/postcss-px-to-unit/blob/master/README.md

Integrate the PxToUnit plugin into your Webpack configuration. Ensure you import the plugin and include it in the postcss-loader plugins array.

```javascript
// webpack.config.js
import PxToUnit from 'postcss-px-to-unit';

...
{
  loader: 'postcss-loader',
  plugins: [
    PxToUnit({
      // options
    })
  ]
}
...
```

--------------------------------

### PX Case Sensitivity for Exclusion

Source: https://github.com/sadwood/postcss-px-to-unit/blob/master/README.md

Shows how to prevent conversion of 'px' units by using uppercase 'PX'. This is useful for specific cases where 'px' should be preserved.

```css
/* Input */
.test {
  padding: 3.75px 3.75PX;
}

/* Output */
.test {
  padding: 1vw 3.75PX;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.