{"_id":"@carloitaben/tailwindcss-scale","_rev":"1-3b1d45f397e9f0016cb6b21382005777","name":"@carloitaben/tailwindcss-scale","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.0":{"name":"@carloitaben/tailwindcss-scale","version":"0.0.0","keywords":["tailwindcss","plugin"],"author":{"url":"https://carlo.works","name":"Carlo Domínguez","email":"hello@carlo.works"},"license":"MIT","_id":"@carloitaben/tailwindcss-scale@0.0.0","maintainers":[{"name":"carloitaben","email":"hello@carlo.works"}],"dist":{"shasum":"5604ba86c520840fafb4249bc89a902779dc1f77","tarball":"https://registry.npmjs.org/@carloitaben/tailwindcss-scale/-/tailwindcss-scale-0.0.0.tgz","fileCount":6,"integrity":"sha512-0cBuubivn5ESQ3ol6dIm1i8tENHgO2VXZvgPPGBylYTw145qkAOEwbpTLXJhbhMAkyglh6Ecr7CHBfwCTS7AKg==","signatures":[{"sig":"MEYCIQDguYz8aFVmIK3aCRy8es3Ox22ale/ze84sJ/saKo13fQIhAPuuNYN8Omlu9PcKYihvkuyx6uakiH4TYOfdWqDKBgv4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12286},"main":"dist/index.js","type":"module","_from":"file:carloitaben-tailwindcss-scale-0.0.0.tgz","types":"dist/index.d.ts","module":"dist/index.js","private":false,"scripts":{"dev":"tsup --watch","test":"echo \"Error: no test specified\" && exit 1","build":"tsup"},"_npmUser":{"name":"carloitaben","email":"hello@carlo.works"},"_resolved":"/private/var/folders/4_/6spgcbb10b71fwx_nvx_0q4h0000gp/T/02ab121fd552d054012724e5a79849eb/carloitaben-tailwindcss-scale-0.0.0.tgz","_integrity":"sha512-0cBuubivn5ESQ3ol6dIm1i8tENHgO2VXZvgPPGBylYTw145qkAOEwbpTLXJhbhMAkyglh6Ecr7CHBfwCTS7AKg==","_npmVersion":"10.5.0","description":"I should explain what this does","directories":{},"sideEffects":false,"_nodeVersion":"21.7.1","_hasShrinkwrap":false,"devDependencies":{"tsup":"^7.1.0","typescript":"^5.1.6","@types/node":"^20.4.2","tailwindcss":"^3.3.3","@navith/tailwindcss-plugin-author-types":"1.8.1-0.1"},"peerDependencies":{"tailwindcss":"^3"},"peerDependenciesMeta":{"tailwindcss":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-scale_0.0.0_1723763336892_0.24041822681793112","host":"s3://npm-registry-packages"}},"0.0.1":{"name":"@carloitaben/tailwindcss-scale","version":"0.0.1","license":"MIT","private":false,"sideEffects":false,"type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","keywords":["tailwindcss","plugin"],"author":{"name":"Carlo Domínguez","email":"hello@carlo.works","url":"https://carlo.works"},"peerDependencies":{"tailwindcss":"^3"},"peerDependenciesMeta":{"tailwindcss":{"optional":false}},"devDependencies":{"@navith/tailwindcss-plugin-author-types":"1.8.1-0.1","@types/node":"^20.4.2","prettier":"^3.3.3","tailwindcss":"^3.3.3","tsup":"^7.1.0","typescript":"^5.1.6"},"scripts":{"dev":"tsup --watch","build":"tsup","test":"echo \"Error: no test specified\" && exit 1"},"description":"I should explain what this does","_id":"@carloitaben/tailwindcss-scale@0.0.1","_integrity":"sha512-t85QmFWhWKKWbRl2MJ7h+qyZR6IMdsLcyMmwNsw5znRT3Ldz6bK6gKXEAl3P94OESLIfUwcJjgaWY+S4rzIZBg==","_resolved":"/private/var/folders/4_/6spgcbb10b71fwx_nvx_0q4h0000gp/T/936b6f07adb030e6381156deca3398f2/carloitaben-tailwindcss-scale-0.0.1.tgz","_from":"file:carloitaben-tailwindcss-scale-0.0.1.tgz","_nodeVersion":"21.7.1","_npmVersion":"10.5.0","dist":{"integrity":"sha512-t85QmFWhWKKWbRl2MJ7h+qyZR6IMdsLcyMmwNsw5znRT3Ldz6bK6gKXEAl3P94OESLIfUwcJjgaWY+S4rzIZBg==","shasum":"bc6129fe3a14414ccf352217f554dd99e7f5fd6c","tarball":"https://registry.npmjs.org/@carloitaben/tailwindcss-scale/-/tailwindcss-scale-0.0.1.tgz","fileCount":6,"unpackedSize":12411,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB83qI7CCpHYRSLG7X2ZDRa1+LLnK6BeegxRzBtHN5MkAiASdBNbKNZ3yhBEeAwuRVe5kKPMWTvCEtJqHxDdGaUN6w=="}]},"_npmUser":{"name":"carloitaben","email":"hello@carlo.works"},"directories":{},"maintainers":[{"name":"carloitaben","email":"hello@carlo.works"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tailwindcss-scale_0.0.1_1723791803925_0.7713796562481992"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-15T23:08:56.809Z","modified":"2024-08-16T07:03:24.245Z","0.0.0":"2024-08-15T23:08:57.098Z","0.0.1":"2024-08-16T07:03:24.056Z"},"author":{"name":"Carlo Domínguez","email":"hello@carlo.works","url":"https://carlo.works"},"license":"MIT","keywords":["tailwindcss","plugin"],"description":"I should explain what this does","maintainers":[{"name":"carloitaben","email":"hello@carlo.works"}],"readme":"# tailwindcss-scale\n\nI should explain what this does\n\n## Installation\n\n```bash\nnpm i @carloitaben/tailwindcss-scale\n```\n\n## Requirements\n\n- `tailwindcss >= 3.3`\n- ESM Tailwind config\n\n## Usage\n\nThe minimum configuration for this plugin is the following:\n\n```ts\nimport type { Config } from \"tailwindcss\"\nimport { scalePlugin } from \"@carloitaben/tailwindcss-scale\"\n\nexport default {\n  // ...\n  plugins: [\n    // ...\n    scalePlugin({\n      unit: \"vw\",\n      // Scale with viewport width\n      values: [16, 360],\n      // The root font size is 16px at 360vw\n    }),\n  ],\n} satisfies Config\n```\n\nBy default, the plugin generates an `scale` variant that proportionally resizes any spacing class:\n\n```html\n<div className=\"w-12\">When my root font size is 16px, my width is 48px.</div>\n\n<div className=\"scale:w-12\">\n  When my root font size is 16px, my width is 48px on a screen 360px wide. I'll proportionally scale up on wider\n  screens, and down on narrow ones.\n</div>\n```\n\nWith the previous configuration, the scaled element measures:\n\n| Screen width | Element width |\n| ------------ | ------------- |\n| 120px        | 16px          |\n| 240px        | 32px          |\n| 360px (base) | 48px (base)   |\n| 480px        | 64px          |\n| 720px        | 96px          |\n\n## Configuration\n\n### `prefix`\n\nThe generated variant name. Defaults to `\"scale\"`.\n\n```ts\ntype Config = {\n  prefix?: string\n}\n```\n\n```ts\nscalePlugin({\n  prefix: \"fluid\",\n  // ...\n})\n```\n\n```html\n<div className=\"fluid:w-12\"></div>\n```\n\n### `unit`\n\nA viewport unit to use in calculations.\n\n```ts\ntype Config = {\n  unit: \"vw\" | \"vh\" | \"vmin\" | \"vmax\"\n}\n```\n\n```ts\nscalePlugin({\n  unit: \"vmax\",\n  // ...\n})\n```\n\n### `values`\n\nThe magic numbers for scaling.\n\n```ts\n/**\n * A valid screen from your Tailwind configuration.\n */\ntype Screen: string\n\ntype Value = [\n  rootFontSize: number,\n  viewportSize: number\n]\n\ntype Config = {\n  values: Value | { [K: Screen]: Value }\n}\n```\n\nThe simplest `values` definition is a tuple:\n\n```ts\nscalePlugin({\n  values: [16, 360], // 16px @ 360vw\n  // ...\n})\n```\n\nYou can also map scaling factors to your Tailwind screens using an object:\n\n```ts\nscalePlugin({\n  // ...\n  screens: {\n    sm: \"640px\",\n    // @media (min-width: 640px) { ... }\n    xl: \"1280px\",\n    // @media (min-width: 1280px) { ... }\n  },\n  // ...\n  values: {\n    DEFAULT: [16, 360],\n    // 16px @ 360 units\n    sm: [16, 1920],\n    // @media (min-width: 640px): 16px @ 1920 units\n    xl: [32, 2560],\n    // @media (min-width: 1280px): 32px @ 2560 units\n  },\n})\n```\n\nSo this element\n\n```html\n<div className=\"scale:w-12\"></div>\n```\n\nwill have the following measurements:\n\n| Screen width | Element width |\n| ------------ | ------------- |\n| 120px (base) | 16px (base)   |\n| 240px (base) | 32px (base)   |\n| 360px (base) | 48px (base)   |\n| 480px (sm)   | 64px (sm)     |\n| 720px (sm)   | 18px (sm)     |\n| 1920px (xl)  | 72px (xl)     |\n| 2240px (xl)  | 84px (xl)     |\n| 2560px (xl)  | 96px (xl)     |\n\nYou can use Tailwind screen variants to opt-out of scaling on specific breakpoints or modify the property size:\n\n```html\n<div className=\"w-12 sm:scale:w-12 lg:w-24 xl:scale-w-24\"></div>\n```\n\n## Caveats\n\n- Currently breaks when the document root font size is changed (i.e. with zoom)\n- There's probably a better way of doing this\n- Not tested\n\n## License\n\n[MIT](../../LICENSE)\n","readmeFilename":"README.md"}