{"id":28510094,"url":"https://github.com/odestry/tailwindcss-rem-to-px","last_synced_at":"2026-03-02T17:33:35.853Z","repository":{"id":184747393,"uuid":"637501560","full_name":"odestry/tailwindcss-rem-to-px","owner":"odestry","description":"A Tailwind CSS plugin that automatically converts all REM units to PX units in your Tailwind styles.","archived":false,"fork":false,"pushed_at":"2024-08-11T12:36:23.000Z","size":119,"stargazers_count":22,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-08T02:00:04.140Z","etag":null,"topics":["rem-to-px","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/odestry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-07T18:42:41.000Z","updated_at":"2026-01-28T14:23:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"cc4a7a05-fa45-493d-ad43-eb1cd808b842","html_url":"https://github.com/odestry/tailwindcss-rem-to-px","commit_stats":null,"previous_names":["odestry/tailwindcss-rem-to-px"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/odestry/tailwindcss-rem-to-px","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odestry%2Ftailwindcss-rem-to-px","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odestry%2Ftailwindcss-rem-to-px/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odestry%2Ftailwindcss-rem-to-px/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odestry%2Ftailwindcss-rem-to-px/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/odestry","download_url":"https://codeload.github.com/odestry/tailwindcss-rem-to-px/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odestry%2Ftailwindcss-rem-to-px/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30011965,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T17:00:27.440Z","status":"ssl_error","status_checked_at":"2026-03-02T17:00:03.402Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rem-to-px","tailwindcss","tailwindcss-plugin"],"created_at":"2025-06-08T22:38:00.600Z","updated_at":"2026-03-02T17:33:35.828Z","avatar_url":"https://github.com/odestry.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss-rem-to-px plugin\n\n[![NPM version](https://img.shields.io/npm/v/tailwindcss-rem-to-px?color=informational\u0026label=)](https://www.npmjs.com/package/tailwindcss-rem-to-px)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?color=informational)](/.github/CONTRIBUTING.md)\n\n[Installation](#installation) |\n[Usage](#usage) |\n[Examples](#examples) |\n[Contributing](#contributing) |\n[About](#about) |\n[License](#license)\n\nA Tailwind CSS plugin automatically converts all REM units to PX units in your Tailwind styles. It's particularly useful for projects that require pixel-based measurements.\n\n## Installation\n\nTo install the plugin, run the following command in your project directory:\n\n```bash\nnpm install tailwindcss-rem-to-px # or pnpm add tailwindcss-rem-to-px\n```\n\n## Usage\n\nThe plugin works by intercepting all Tailwind utility classes and custom styles that use REM units, converting them to their pixel equivalent based on a configurable base font size (default is 16px). This conversion happens at build time, ensuring that your final CSS output contains only pixel values.\n\n1. Import the plugin in your Tailwind configuration file (`tailwind.config.js` or `tailwind.config.ts`):\n\n```typescript\nimport remToPx from 'tailwindcss-rem-to-px';\n```\n\n2. Add the plugin to your Tailwind configuration:\n\n```typescript\nimport type { Config } from 'tailwindcss'\nimport remToPx from 'tailwindcss-rem-to-px';\n\nexport default {\n  content: [\n    // ...\n  ],\n  theme: {\n    // ...\n  },\n  plugins: [\n    remToPx(),\n  ],\n} satisfies Config\n```\n\n3. (Optional) Configure the base font size:\n\nIf you want to use a base font size other than the default 16px, you can pass it as an option to the plugin:\n\n```typescript\nplugins: [\n  remToPx({ baseFontSize: 14 }),\n],\n```\n\nThis will use 14px as the base for REM to PX conversions.\n\n## Examples\n\nWith this plugin, Tailwind classes like:\n\n```html\n\u003cp class=\"text-2xl p-4 m-2\"\u003eHello, World!\u003c/p\u003e\n```\n\nWhich would normally compile to:\n\n```css\n.text-2xl {\n  font-size: 1.5rem;\n}\n\n.p-4 {\n  padding: 1rem;\n}\n\n.m-2 {\n  margin: 0.5rem;\n}\n```\n\nWill instead compile to:\n\n```css\n.text-2xl {\n  font-size: 24px;\n}\n\n.p-4 {\n  padding: 16px;\n}\n\n.m-2 {\n  margin: 8px;\n}\n```\n\nThis ensures that all your styles are consistent and precise, using pixel values throughout your project.\n\n## Contributing\n\nWe'd love your help! Please read our [contributing guide](https://github.com/odestry/.github/blob/main/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements.\n\n## About\n\nOdestry isn't just a community; it's a group of dedicated folks all aiming to build better commerce together. Our mission is to create a supportive and open space where anyone, regardless of experience, can connect, learn, and grow. Here, you'll get inspired, have real talks, and find plenty of resources and open source tools to help you build. Whether you're looking to network, find opportunities, or just have meaningful conversations, join us and be part of a community that values authenticity, collaboration, and innovation. [Learn more](https://odestry.com).\n\n## License\n\nCopyright (c) 2024-present Odestry. See [LICENSE](/LICENSE.md) for further details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodestry%2Ftailwindcss-rem-to-px","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fodestry%2Ftailwindcss-rem-to-px","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodestry%2Ftailwindcss-rem-to-px/lists"}