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 convert from px to rem.

<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

You can configure some options by using those properties in theme object:

• remDivider (default - 20)
• fontSizeLimit (default - 100)
• spacingLimit (default - 1920)
• borderRadiusLimit (default - 500)

// tailwind.config.js
theme: {
  remDivider: 20,
  fontSizeLimit: 50,
  spacingLimit: 100,
  borderRadiusLimit: 30
}