{"id":24554632,"url":"https://github.com/cedericprivat/tailwindcss-base-font-size","last_synced_at":"2025-04-16T02:38:14.172Z","repository":{"id":183223165,"uuid":"657955842","full_name":"CedericPrivat/tailwindcss-base-font-size","owner":"CedericPrivat","description":"A Tailwind CSS plugin to set the base font size in proportion to Tailwind's default utility values.","archived":false,"fork":false,"pushed_at":"2025-04-07T17:41:34.000Z","size":365,"stargazers_count":28,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T18:42:35.122Z","etag":null,"topics":["base-font-size","font","font-size","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwindcss-base-font-size","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/CedericPrivat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-06-24T10:14:55.000Z","updated_at":"2025-04-07T17:41:36.000Z","dependencies_parsed_at":"2024-03-20T12:29:17.587Z","dependency_job_id":"cce1c426-85e5-4dbc-947b-2512a0510089","html_url":"https://github.com/CedericPrivat/tailwindcss-base-font-size","commit_stats":null,"previous_names":["cedericprivat/tailwindcss-base-font-size"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CedericPrivat%2Ftailwindcss-base-font-size","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CedericPrivat%2Ftailwindcss-base-font-size/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CedericPrivat%2Ftailwindcss-base-font-size/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CedericPrivat%2Ftailwindcss-base-font-size/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CedericPrivat","download_url":"https://codeload.github.com/CedericPrivat/tailwindcss-base-font-size/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249185124,"owners_count":21226520,"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":["base-font-size","font","font-size","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"created_at":"2025-01-23T03:19:49.088Z","updated_at":"2025-04-16T02:38:14.149Z","avatar_url":"https://github.com/CedericPrivat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss-base-font-size\n\nA Tailwind CSS plugin to set the base font size in proportion to Tailwind's default utility values.\n\n## Why Use This Plugin?\n\nThe purpose of this plugin is to allow you to easily set the base font size to `10px`, which is equivalent to `1rem`. By doing so, all rem values become easier to read and work with. Setting a base font size of `10px` simplifies calculations with rem values, making it more convenient to use arbitrary values or adding custom theme values.\n\nBy using this plugin, you can customize the base font size and ensure that all utility classes in Tailwind CSS retain their relative proportions.\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install tailwindcss-base-font-size\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-base-font-size'),\n    // ...\n  ],\n};\n```\n\n## Usage\n\nCustomize the base font size by passing an optional baseFontSize parameter to the plugin:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-base-font-size')({\n      baseFontSize: 12,\n    }),\n    // ...\n  ],\n};\n```\n\nThe default value is `10`.\n\n## Tailwind CSS IntelliSense Extension\n\nIf you are using the Tailwind CSS IntelliSense extension in Visual Studio Code, it's recommended to update your `settings.json` file to ensure that the preview correctly reflects the base font size. Add the following configuration to your `settings.json`:\n\n```js\n{\n  // ...\n  \"tailwindCSS.rootFontSize\": 10,\n}\n```\n\nThis configuration sets the root font size to `10px`, matching the base font size specified by this plugin. With this setting, the IntelliSense extension will provide accurate and consistent previews for Tailwind CSS utility classes.\n\n## How It Works\n\nThe plugin modifies the base font size of your HTML elements and adjusts the values of Tailwind CSS utility classes to maintain their relative sizes.\n\nIt adds a CSS rule for the `html` element, setting its font size to the specified `baseFontSize` value.\n\n```css\nhtml: {\n  font-size: 10px;\n}\n```\n\nAdditionally, it extends the Tailwind CSS theme by updating the rem values in the theme configuration scaled proportionally with respect to the given `baseFontSize`. This ensures that utility classes like `text-lg`, `p-4`, etc., continue to have the same relative sizes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedericprivat%2Ftailwindcss-base-font-size","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcedericprivat%2Ftailwindcss-base-font-size","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedericprivat%2Ftailwindcss-base-font-size/lists"}