Package Exports

tailwindcss-jit-px-to-rem
tailwindcss-jit-px-to-rem/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-jit-px-to-rem) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwind CSS JIT px-to-rem Converter

Installation

npm install @chan/tailwindcss-jit-px-to-rem
# or
yarn add @chan/tailwindcss-jit-px-to-rem

Configuration

Add the plugin to your tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    tailwindPxToRemPlugin({
      // Maximum px value to convert
      maxPxValue: 1500,

      // Property aliases configuration
      propertyAliases: {
        // 'mt': 'margin-top',
        // 'mb': 'margin-bottom',
      },

      // Breakpoint settings
      breakpoints: {
        // sm: 640,
        // md: 768,
        // lg: 1024,
        // xl: 1280,
      },
      full: false // default
    })
  ],
}

Usage

The plugin automatically converts dynamic classes that match the maxPxValue, propertyAliases, and breakpoints configurations to rem units.

Examples

<!-- 16px will be converted to 1rem -->
<div class="mt-[16px]">Hello World!</div>

<!-- 2px will be converted to 0.125rem -->
<div class="-top-[2px]">Hello World!</div>