tailwindcss-preset-px-to-rem
v1.2.1
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.
0/weekUpdated 1 years agoMITUnpacked: 4.3 KB
Published by Or Jerby
npm install 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
``bash`
npm i tailwindcss-preset-px-to-rem
Usage
`js`
// 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.
` ... ...html`
...
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)
`js``
// tailwind.config.js
theme: {
remDivider: 20,
fontSizeLimit: 50,
spacingLimit: 100,
borderRadiusLimit: 30
}