{"id":29129756,"url":"https://github.com/harshmandan/tailwind-linear-scale","last_synced_at":"2025-06-30T03:37:54.235Z","repository":{"id":299234544,"uuid":"1002451388","full_name":"harshmandan/tailwind-linear-scale","owner":"harshmandan","description":"Linear scale system for tailwind v4 \u0026 tailwind v3","archived":false,"fork":false,"pushed_at":"2025-06-15T17:33:43.000Z","size":11,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-23T19:51:55.560Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/harshmandan.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,"zenodo":null}},"created_at":"2025-06-15T14:04:26.000Z","updated_at":"2025-06-15T17:33:46.000Z","dependencies_parsed_at":"2025-06-15T14:19:28.330Z","dependency_job_id":"c8b577ef-fb98-49e8-9e4f-867cbb902594","html_url":"https://github.com/harshmandan/tailwind-linear-scale","commit_stats":null,"previous_names":["harshmandan/tailwind-linear-scale"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/harshmandan/tailwind-linear-scale","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmandan%2Ftailwind-linear-scale","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmandan%2Ftailwind-linear-scale/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmandan%2Ftailwind-linear-scale/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmandan%2Ftailwind-linear-scale/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/harshmandan","download_url":"https://codeload.github.com/harshmandan/tailwind-linear-scale/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmandan%2Ftailwind-linear-scale/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262705869,"owners_count":23351323,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-06-30T03:37:53.449Z","updated_at":"2025-06-30T03:37:54.221Z","avatar_url":"https://github.com/harshmandan.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind Linear Scale\n\nA more intuitive and predictable scaling system for Tailwind CSS v4 \u0026 v3. This configuration replaces Tailwind's default scaling system with a linear scale that makes it easier to work with design systems.\n\n## Version Support\n\nThis repository supports both Tailwind CSS v4 and v3:\n\n- [`main`](https://github.com/harshmandan/tailwind-linear-scale) branch: CSS configuration for Tailwind CSS v4\n- [`v3` branch](https://github.com/harshmandan/tailwind-linear-scale/tree/v3): JavaScript configuration for Tailwind CSS v3\n\nBoth versions implement the same linear scale system, just in different formats to match their respective Tailwind versions.\n\n## Why Linear Scale?\n\nTailwind's default scaling system can be unintuitive:\n\n- Class names like `text-xl`, `text-2xl` don't immediately tell you the actual size\n- Spacing values like `p-4` mean 16px (1rem) by default, which isn't immediately clear\n- Border radius and breakpoint values follow a similar pattern\n\nThis configuration implements a linear scale where:\n\n- Numbers directly correspond to pixel values at the _base_ font size\n- All values are calculated using the same consistent scale factor as tailwind's default system\n- Class names are more predictable and easier to understand\n- Makes it very easy to work with design systems (Figma)\n\n## Example:\n\n```html\n\u003cdiv class=\"p-4 text-16 rounded-4\"\u003e\n  \u003c!-- 4px padding, 16px text, 4px border radius --\u003e\n\u003c/div\u003e\n```\n\n## Usage\n\n1. Copy the CSS files from this repository\n2. Import them into your Tailwind configuration\n3. Use the new class names in your HTML\n\n## Features\n\n### Typography Scale\n\n| Vanilla Tailwind | Linear Scale | Pixel Value (at base scale) |\n| ---------------- | ------------ | --------------------------- |\n| `text-xs`        | `text-12`    | 12px                        |\n| `text-sm`        | `text-14`    | 14px                        |\n| `text-base`      | `text-16`    | 16px                        |\n| `text-lg`        | `text-18`    | 18px                        |\n| `text-xl`        | `text-20`    | 20px                        |\n| `text-2xl`       | `text-24`    | 24px                        |\n| `text-3xl`       | `text-30`    | 30px                        |\n| `text-4xl`       | `text-36`    | 36px                        |\n| `text-5xl`       | `text-48`    | 48px                        |\n| `text-6xl`       | `text-60`    | 60px                        |\n| `text-7xl`       | `text-72`    | 72px                        |\n| `text-8xl`       | `text-96`    | 96px                        |\n| `text-9xl`       | `text-128`   | 128px                       |\n\n### Spacing Scale\n\n| Vanilla Tailwind | Linear Scale | Pixel Value (at base scale) |\n| ---------------- | ------------ | --------------------------- |\n| `p-0`            | `p-0`        | 0px                         |\n| `p-1`            | `p-4`        | 4px                         |\n| `p-2`            | `p-8`        | 8px                         |\n| `p-3`            | `p-12`       | 12px                        |\n| `p-4`            | `p-16`       | 16px                        |\n\n### Border Radius Scale\n\n| Vanilla Tailwind | Linear Scale   | Pixel Value (at base scale) |\n| ---------------- | -------------- | --------------------------- |\n| `rounded-none`   | `rounded-0`    | 0px                         |\n| `rounded-sm`     | `rounded-2`    | 2px                         |\n| `rounded`        | `rounded-4`    | 4px                         |\n| `rounded-md`     | `rounded-8`    | 8px                         |\n| `rounded-lg`     | `rounded-12`   | 12px                        |\n| `rounded-xl`     | `rounded-16`   | 16px                        |\n| `rounded-2xl`    | `rounded-24`   | 24px                        |\n| `rounded-full`   | `rounded-full` | 9999px                      |\n\n### Breakpoints\n\n| Vanilla Tailwind | Linear Scale | Pixel Value (at base scale) |\n| ---------------- | ------------ | --------------------------- |\n| `sm`             | `640`        | 640px                       |\n| `md`             | `768`        | 768px                       |\n| `lg`             | `1024`       | 1024px                      |\n| `xl`             | `1280`       | 1280px                      |\n| `2xl`            | `1536`       | 1536px                      |\n\nContainer sizes follow the same pattern:\n\n| Vanilla Tailwind | Linear Scale | Pixel Value (at base scale) |\n| ---------------- | ------------ | --------------------------- |\n| `@sm`            | `@256`       | 256px                       |\n| `@md`            | `@384`       | 384px                       |\n| `@lg`            | `@512`       | 512px                       |\n| `@xl`            | `@640`       | 640px                       |\n| `@2xl`           | `@768`       | 768px                       |\n| `@3xl`           | `@1024`      | 1024px                      |\n| `@4xl`           | `@1280`      | 1280px                      |\n\n## How It Works\n\nThe system uses a base scale factor (`--spacing-scale: 0.0625em`) to calculate all values. This means:\n\n- At the default font size (16px), 1 unit = 1px\n- All values scale proportionally with the font size\n- The system remains responsive while being more predictable\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshmandan%2Ftailwind-linear-scale","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharshmandan%2Ftailwind-linear-scale","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshmandan%2Ftailwind-linear-scale/lists"}