prettier-plugin-tailwindcss-px-to-rem
v1.0.3
Published
A Prettier plugin that converts pixel (px) values to rem units in Tailwind CSS classes with arbitrary values, ensuring scalable and responsive design.
Downloads
9
Maintainers
Readme
Prettier Plugin Tailwind CSS PX to REM
A Prettier plugin that converts pixel (px) values to rem units in Tailwind CSS classes with arbitrary value, ensuring scalable and responsive design.
Currently, it works only with JSX.
Table of Contents
Installation
You can install the plugin via npm or yarn:
npm install --save-dev prettier-plugin-tailwindcss-px-to-rem
or
yarn add --dev prettier-plugin-tailwindcss-px-to-rem
Usage
Add the plugin to your Prettier configuration file (.prettierrc or prettier.config.js):
{
"plugins": ["prettier-plugin-tailwindcss-px-to-rem"]
}
Limitations
Currently, it works only with JSX.
Example
React.js
Input:
import React from 'react';
const Greeting = () => {
return (
<h1 className="p-[5px] m-[10px] shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">Hello, world!</h1>
);
};
export default Greeting;
Output:
import React from 'react';
const Greeting = () => {
return (
<h1 className="p-[0.3125rem] m-[0.625rem] shadow-[0_2.1875rem_3.75rem_-0.9375rem_rgba(0,0,0,0.3)]">Hello, world!</h1>
);
};
export default Greeting;
Now, when you run Prettier, the plugin will automatically convert px values to rem units in your Tailwind CSS classes with arbitrary value.
Configuration
By default, the plugin uses a base pixel value of 16px for conversion. If you want to change the base value, you can add a configuration option to your Prettier config:
{
"plugins": ["prettier-plugin-tailwindcss-px-to-rem"],
"tailwindcssPxToRemBaseValue": 16
}
License
This project is licensed under the MIT License.