\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 > p) {\n @apply capsize;\n}\n```\n\n```html\n
\n
I will not be trimmed!
\n
\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> Opting-out of trimming via `no-capsize` is also available for fluid\n> typography.\n\n```html\n\n\n Trimmed Fluid Text\n\n\n\n
\n
Trimmed
\n
Also trimmed
\n
\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","readmeFilename":"README.md","homepage":"https://github.com/asyarb/tailwind-capsize#readme","bugs":{"url":"https://github.com/asyarb/tailwind-capsize/issues"}}