{"id":16235009,"url":"https://github.com/asyarb/tailwind-capsize","last_synced_at":"2025-03-19T15:30:35.547Z","repository":{"id":40362854,"uuid":"305187867","full_name":"asyarb/tailwind-capsize","owner":"asyarb","description":"Tailwind plugin for integrating Capsize for trimming web typography.","archived":false,"fork":false,"pushed_at":"2024-04-01T07:15:38.000Z","size":294,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T13:41:26.211Z","etag":null,"topics":["capsize","tailwind","tailwindcss"],"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/asyarb.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":"2020-10-18T20:14:10.000Z","updated_at":"2024-10-17T16:56:23.000Z","dependencies_parsed_at":"2024-08-29T13:08:10.485Z","dependency_job_id":"a24a9a84-66c5-4252-aac2-4828a6f885dc","html_url":"https://github.com/asyarb/tailwind-capsize","commit_stats":{"total_commits":50,"total_committers":1,"mean_commits":50.0,"dds":0.0,"last_synced_commit":"072a832122febf7a7a2a67eab054adf646c58f87"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Ftailwind-capsize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Ftailwind-capsize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Ftailwind-capsize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Ftailwind-capsize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asyarb","download_url":"https://codeload.github.com/asyarb/tailwind-capsize/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244453719,"owners_count":20455269,"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":["capsize","tailwind","tailwindcss"],"created_at":"2024-10-10T13:18:27.694Z","updated_at":"2025-03-19T15:30:35.247Z","avatar_url":"https://github.com/asyarb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind Capsize \u003c!-- omit in toc --\u003e\n\nTailwindCSS plugin to generate utilities that trim the whitespace above and\nbelow web typography. Based on the great work in the\n[Capsize](https://github.com/seek-oss/capsize) library.\n\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Usage](#usage)\n  - [With @apply](#with-apply)\n  - [Trimming by default](#trimming-by-default)\n    - [Opting out of trimming](#opting-out-of-trimming)\n- [Fluid Utilities](#fluid-utilities)\n  - [Generated classes](#generated-classes)\n  - [Recommendations](#recommendations)\n- [Options](#options)\n- [Limitations](#limitations)\n- [Plain CSS Version](#plain-css-version)\n- [License](#license)\n\n## Installation\n\n```bash\n# npm\nnpm i --save-dev @asyarb/tailwind-capsize\n```\n\n## Configuration\n\nTo get started, add a `capsize` key to your Tailwind theme. The value for\n`capsize` should be an object whose keys map to the keys in `theme.fontFamily`\nwith values that are \"font metrics\".\n\nSee below for an example config:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  content: [],\n\n  theme: {\n    fontFamily: {\n      sans: ['Inter var', 'system-ui'],\n    },\n\n    capsize: {\n      metrics: {\n        sans: require('@capsizecss/metrics/inter'),\n      },\n    },\n  },\n\n  plugins: [require('@asyarb/tailwind-capsize')],\n}\n```\n\nTo learn how to get the metrics for your font, please reference the\n[Capsize Website](https://seek-oss.github.io/capsize/).\n\n## Usage\n\nUsage is best explained with an example:\n\n```html\n\u003c!-- Use on an element directly --\u003e\n\u003cp class=\"font-sans text-xl leading-normal capsize\"\u003eTrimmed Text\u003c/p\u003e\n\n\u003c!-- Or rely on the cascade --\u003e\n\u003cdiv class=\"font-sans text-xl leading-normal\"\u003e\n  \u003cp class=\"capsize\"\u003eTrimmed\u003c/p\u003e\n  \u003cp class=\"capsize\"\u003eAlso trimmed\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### With @apply\n\nUse the `@apply` directive normally:\n\n```css\np {\n  @apply capsize font-sans text-xl leading-none;\n}\n```\n\n### Trimming by default\n\nThis plugin currently does not support applying the `capsize` class by default.\nIf you wish to trim text elements by default, consider using `@apply`:\n\n```css\n:where(h1, h2, h3, h4, h5, h6, p) {\n  @apply capsize;\n}\n```\n\n#### Opting out of trimming\n\nIf you've applied trimming higher up in the cascade, you can undo trimming via\nthe `no-capsize` utility.\n\n```css\n:where(.applies-capsize \u003e p) {\n  @apply capsize;\n}\n```\n\n```html\n\u003cdiv class=\"applies-capsize\"\u003e\n  \u003cp class=\"no-capsize\"\u003eI will not be trimmed!\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## Fluid Utilities\n\nThis plugin supports \"fluid\" typography with `clamp()` as described in this\n[Smashing Magazine](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/)\npost.\n\n\u003e Opting-out of trimming via `no-capsize` is also available for fluid\n\u003e typography.\n\n```html\n\u003c!-- Use on an element directly --\u003e\n\u003cp\n  class=\"font-sans leading-normal from-text-sm to-text-2xl screen-sm-to-xl capsize-fluid\"\n\u003e\n  Trimmed Fluid Text\n\u003c/p\u003e\n\n\u003c!-- Or rely on the cascade --\u003e\n\u003cdiv class=\"font-sans leading-normal from-text-sm to-text-2xl screen-sm-to-xl\"\u003e\n  \u003cp class=\"capsize-fluid\"\u003eTrimmed\u003c/p\u003e\n  \u003cp class=\"capsize-fluid\"\u003eAlso trimmed\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### Generated classes\n\n| **Class**         |  **Theme Key**   | **Description**                                                                               |\n| ----------------- | :--------------: | --------------------------------------------------------------------------------------------- |\n| `from-text-[]`    | `theme.fontSize` | Specify a font size to start with. Must be in `px` or `rem` units. Supports arbitrary values. |\n| `to-text-[]`      | `theme.fontSize` | Specify a font size to end with. Must be in `px` or `rem` units. Supports arbitrary values.   |\n| `screen-[]-to-[]` | `theme.screens`  | Specify screen sizes from your config to fluidly scale between.                               |\n\n### Recommendations\n\nIf you are looking to scale up a font size from \"mobile\", you may wish to add a\n\"base\" screen size to your Tailwind config.\n\nCheck out the\n[Tailwind docs](https://tailwindcss.com/docs/screens#adding-smaller-breakpoints)\non adding small breakpoints.\n\n## Options\n\nThis plugin supports a couple of configuration options. You can supply them as\nshown:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  // ...rest of your theme\n  plugins: [\n    require('@asyarb/tailwind-capsize')({\n      className: 'trim',\n      rootFontSize: 10,\n      rootLineHeight: 1.5,\n      fluidUtils: true,\n    }),\n  ],\n}\n```\n\n| **Option**       | **Type**  | **Description**                                                                                                            | **Default** |\n| ---------------- | :-------: | -------------------------------------------------------------------------------------------------------------------------- | :---------: |\n| `className`      | `string`  | Class used to apply the \"trimming styles\" to an element. Also affects the `no-` and `-fluid` utilities.                    | `\"capsize\"` |\n| `rootFontSize`   | `number`  | `font-size` specified in `:root`. Used to calculate correct `rem` units.                                                   |    `16`     |\n| `rootLineHeight` | `number`  | `line-height` specified in `:root`. Used as line height in trimming calculations when a `leading-` class is not specified. |    `1.2`    |\n| `fluidUtils`     | `boolean` | Enable or disable the generation of fluid typography utilities.                                                            |   `true`    |\n\n## Limitations\n\n- Only accepts `rem`, `px`, or plain `number`s for `theme.fontSize` values in a\n  Tailwind theme.\n- Only accepts `unitless` values for `theme.lineHeight` values in a Tailwind\n  theme.\n\n## Plain CSS Version\n\nIf you are looking for a \"plain\" CSS version of this plugin, checkout these\nGists:\n\n- [Normal](https://gist.github.com/asyarb/ec0bb47ebe31f4953e3b31eedee6058f)\n- [Fluid](https://gist.github.com/asyarb/162bf0a8b5d238de01bd2832094727ad)\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasyarb%2Ftailwind-capsize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasyarb%2Ftailwind-capsize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasyarb%2Ftailwind-capsize/lists"}