tailwindcss-preset-px-to-rem

Tailwind CSS Px To Rem Preset

About

A Tailwind CSS preset that automates the conversion of pixel values to rem units. Enhance your responsive design workflow with customizable rem dividers and easy integration into your Tailwind CSS configuration.

Installation

npm i tailwindcss-preset-px-to-rem

Usage

// tailwind.config.js
module.exports = {
  presets: [require("tailwindcss-preset-px-to-rem")],
};

As an example, the classes applied below become available right away. Those classes will calculate and use the rem for you. You can use up to 100px in the font-size property and up to 1920px in the spacing property.

<div class="mt-25 p-15 max-w-640">
  <h1 class="text-28">...</h1>
  <p class="text-20">...</p>
  <p class="text-17">...</p>
</div>

Configuration

The default rem divider is 16. you can easily change it by using remDivider in theme like so:

// tailwind.config.js
theme: {
  remDivider: "20";
}

Changelog

1.0.3

Patch Changes

• 83f5a69: improve performance