{"id":13449765,"url":"https://github.com/benface/tailwindcss-typography","last_synced_at":"2025-03-22T22:33:50.232Z","repository":{"id":44844315,"uuid":"132368009","full_name":"benface/tailwindcss-typography","owner":"benface","description":"Tailwind CSS plugin to generate typography utilities and text style components","archived":true,"fork":false,"pushed_at":"2022-02-22T12:48:19.000Z","size":1376,"stargazers_count":245,"open_issues_count":19,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-08-01T06:22:11.523Z","etag":null,"topics":["tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benface.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-06T19:09:34.000Z","updated_at":"2024-06-06T09:31:30.000Z","dependencies_parsed_at":"2022-09-13T08:40:52.937Z","dependency_job_id":null,"html_url":"https://github.com/benface/tailwindcss-typography","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-typography","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-typography/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-typography/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-typography/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benface","download_url":"https://codeload.github.com/benface/tailwindcss-typography/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221840724,"owners_count":16889854,"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":["tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-31T06:00:55.550Z","updated_at":"2024-10-28T14:31:54.328Z","avatar_url":"https://github.com/benface.png","language":"JavaScript","readme":"# ⛔️ DEPRECATED\n\nTailwind CSS has an official [`typography` plugin](https://tailwindcss.com/docs/typography-plugin) that you should use instead of this one. It may not support _all_ the features that this one has (its main use case is styling “vanilla HTML”), but it works with the latest versions of Tailwind, which also support a lot more typography utilities ([`indent`](https://tailwindcss.com/docs/text-indent), [`font-variant-numeric`](https://tailwindcss.com/docs/font-variant-numeric), text decoration color, style, and thickness, etc.).\n\n# Typography Plugin for Tailwind CSS\n\n## Requirements\n\nThis plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 2.x version of this plugin (`npm install tailwindcss-typography@2.x`).\n\n## Installation\n\n```bash\nnpm install tailwindcss-typography\n```\n\n## Usage\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    textIndent: { // defaults to {}\n      '1': '0.25rem',\n      '2': '0.5rem',\n    },\n    textShadow: { // defaults to {}\n      'default': '0 2px 5px rgba(0, 0, 0, 0.5)',\n      'lg': '0 2px 10px rgba(0, 0, 0, 0.5)',\n    },\n    textDecorationStyle: { // defaults to these values\n      'solid': 'solid',\n      'double': 'double',\n      'dotted': 'dotted',\n      'dashed': 'dashed',\n      'wavy': 'wavy',\n    },\n    textDecorationColor: { // defaults to theme =\u003e theme('colors')\n      'red': '#f00',\n      'green': '#0f0',\n      'blue': '#00f',\n    },\n    fontVariantCaps: { // defaults to these values\n      'normal': 'normal',\n      'small': 'small-caps',\n      'all-small': 'all-small-caps',\n      'petite': 'petite-caps',\n      'unicase': 'unicase',\n      'titling': 'titling-caps',\n    },\n    fontVariantNumeric: { // defaults to these values\n      'normal': 'normal',\n      'ordinal': 'ordinal',\n      'slashed-zero': 'slashed-zero',\n      'lining': 'lining-nums',\n      'oldstyle': 'oldstyle-nums',\n      'proportional': 'proportional-nums',\n      'tabular': 'tabular-nums',\n      'diagonal-fractions': 'diagonal-fractions',\n      'stacked-fractions': 'stacked-fractions',\n    },\n    fontVariantLigatures: { // defaults to these values\n      'normal': 'normal',\n      'none': 'none',\n      'common': 'common-ligatures',\n      'no-common': 'no-common-ligatures',\n      'discretionary': 'discretionary-ligatures',\n      'no-discretionary': 'no-discretionary-ligatures',\n      'historical': 'historical-ligatures',\n      'no-historical': 'no-historical-ligatures',\n      'contextual': 'contextual',\n      'no-contextual': 'no-contextual',\n    },\n    textRendering: { // defaults to these values\n      'rendering-auto': 'auto',\n      'optimize-legibility': 'optimizeLegibility',\n      'optimize-speed': 'optimizeSpeed',\n      'geometric-precision': 'geometricPrecision'\n    },\n    textStyles: theme =\u003e ({ // defaults to {}\n      heading: {\n        output: false, // this means there won't be a \"heading\" component in the CSS, but it can be extended\n        fontWeight: theme('fontWeight.bold'),\n        lineHeight: theme('lineHeight.tight'),\n      },\n      h1: {\n        extends: 'heading', // this means all the styles in \"heading\" will be copied here; \"extends\" can also be an array to extend multiple text styles\n        fontSize: theme('fontSize.5xl'),\n        '@screen sm': {\n          fontSize: theme('fontSize.6xl'),\n        },\n      },\n      h2: {\n        extends: 'heading',\n        fontSize: theme('fontSize.4xl'),\n        '@screen sm': {\n          fontSize: theme('fontSize.5xl'),\n        },\n      },\n      h3: {\n        extends: 'heading',\n        fontSize: theme('fontSize.4xl'),\n      },\n      h4: {\n        extends: 'heading',\n        fontSize: theme('fontSize.3xl'),\n      },\n      h5: {\n        extends: 'heading',\n        fontSize: theme('fontSize.2xl'),\n      },\n      h6: {\n        extends: 'heading',\n        fontSize: theme('fontSize.xl'),\n      },\n      link: {\n        fontWeight: theme('fontWeight.bold'),\n        color: theme('colors.blue.400'),\n        '\u0026:hover': {\n          color: theme('colors.blue.600'),\n          textDecoration: 'underline',\n        },\n      },\n      richText: {\n        fontWeight: theme('fontWeight.normal'),\n        fontSize: theme('fontSize.base'),\n        lineHeight: theme('lineHeight.relaxed'),\n        '\u003e * + *': {\n          marginTop: '1em',\n        },\n        'h1': {\n          extends: 'h1',\n        },\n        'h2': {\n          extends: 'h2',\n        },\n        'h3': {\n          extends: 'h3',\n        },\n        'h4': {\n          extends: 'h4',\n        },\n        'h5': {\n          extends: 'h5',\n        },\n        'h6': {\n          extends: 'h6',\n        },\n        'ul': {\n          listStyleType: 'disc',\n        },\n        'ol': {\n          listStyleType: 'decimal',\n        },\n        'a': {\n          extends: 'link',\n        },\n        'b, strong': {\n          fontWeight: theme('fontWeight.bold'),\n        },\n        'i, em': {\n          fontStyle: 'italic',\n        },\n      },\n    }),\n  },\n  variants: { // all the following default to ['responsive']\n    textIndent: ['responsive'],\n    textShadow: ['responsive'],\n    textDecorationStyle: ['responsive'],\n    textDecorationColor: ['responsive'],\n    ellipsis: ['responsive'],\n    hyphens: ['responsive'],\n    kerning: ['responsive'],\n    textUnset: ['responsive'],\n    fontVariantCaps: ['responsive'],\n    fontVariantNumeric: ['responsive'],\n    fontVariantLigatures: ['responsive'],\n    textRendering: ['responsive'],\n  },\n  plugins: [\n    require('tailwindcss-typography')({\n      // all these options default to the values specified here\n      ellipsis: true,         // whether to generate ellipsis utilities\n      hyphens: true,          // whether to generate hyphenation utilities\n      kerning: true,          // whether to generate kerning utilities\n      textUnset: true,        // whether to generate utilities to unset text properties\n      componentPrefix: 'c-',  // the prefix to use for text style classes\n    }),\n  ],\n};\n```\n\nThis plugin generates the following utilities:\n\n```css\n/* configurable with the \"textIndent\" theme object */\n.indent-[key] {\n  text-indent: [value];\n}\n\n/* configurable with the \"textShadow\" theme object */\n/* note: the \"default\" key generates a simple \"text-shadow\" class (instead of \"text-shadow-default\") */\n.text-shadow-[key] {\n  text-shadow: [value];\n}\n\n/* configurable with the \"textDecorationStyle\" theme object */\n.line-[key] {\n  text-decoration-style: [value];\n}\n\n/* configurable with the \"textDecorationColor\" theme object */\n.line-[key] {\n  text-decoration-color: [value];\n}\n\n/* generated when the \"ellipsis\" option is set to true */\n.ellipsis {\n  text-overflow: ellipsis;\n}\n.no-ellipsis {\n  text-overflow: clip;\n}\n\n/* generated when the \"hyphens\" option is set to true */\n.hyphens-none {\n  hyphens: none;\n}\n.hyphens-manual {\n  hyphens: manual;\n}\n.hyphens-auto {\n  hyphens: auto;\n}\n\n/* generated when the \"kerning\" option is set to true */\n.kerning {\n  font-kerning: normal;\n}\n.kerning-none {\n  font-kerning: none;\n}\n.kerning-auto {\n  font-kerning: auto;\n}\n\n/* generated when the \"textUnset\" option is set to true */\n.font-family-unset {\n  font-family: inherit;\n}\n.font-weight-unset {\n  font-weight: inherit;\n}\n.font-style-unset {\n  font-style: inherit;\n}\n.text-size-unset {\n  font-size: inherit;\n}\n.text-align-unset {\n  text-align: inherit;\n}\n.leading-unset {\n  line-height: inherit;\n}\n.tracking-unset {\n  letter-spacing: inherit;\n}\n.text-color-unset {\n  color: inherit;\n}\n.text-transform-unset {\n  text-transform: inherit;\n}\n\n/* configurable with the \"fontVariantCaps\" theme object */\n.caps-normal {\n  font-variant-caps: normal;\n}\n.caps-small {\n  font-variant-caps: small-caps;\n}\n.caps-all-small {\n  font-variant-caps: all-small-caps;\n}\n.caps-petite {\n  font-variant-caps: petite-caps;\n}\n.caps-unicase {\n  font-variant-caps: unicase;\n}\n.caps-titling {\n  font-variant-caps: titling-caps;\n}\n\n/* configurable with the \"fontVariantNumeric\" theme object */\n.nums-normal {\n  font-variant-numeric: normal;\n}\n.nums-ordinal {\n  font-variant-numeric: ordinal;\n}\n.nums-slashed-zero {\n  font-variant-numeric: slashed-zero;\n}\n.nums-lining {\n  font-variant-numeric: lining-nums;\n}\n.nums-oldstyle {\n  font-variant-numeric: oldstyle-nums;\n}\n.nums-proportional {\n  font-variant-numeric: proportional-nums;\n}\n.nums-tabular {\n  font-variant-numeric: tabular-nums;\n}\n.nums-diagonal-fractions {\n  font-variant-numeric: diagonal-fractions;\n}\n.nums-stacked-fractions {\n  font-variant-numeric: stacked-fractions;\n}\n\n/* configurable with the \"fontVariantLigatures\" theme object */\n.ligatures-normal {\n  font-variant-ligatures: normal;\n}\n.ligatures-none {\n  font-variant-ligatures: none;\n}\n.ligatures-common {\n  font-variant-ligatures: common-ligatures;\n}\n.ligatures-no-common {\n  font-variant-ligatures: no-common-ligatures;\n}\n.ligatures-discretionary {\n  font-variant-ligatures: discretionary-ligatures;\n}\n.ligatures-no-discretionary {\n  font-variant-ligatures: no-discretionary-ligatures;\n}\n.ligatures-historical {\n  font-variant-ligatures: historical-ligatures;\n}\n.ligatures-no-historical {\n  font-variant-ligatures: no-historical-ligatures;\n}\n.ligatures-contextual {\n  font-variant-ligatures: contextual;\n}\n.ligatures-no-contextual {\n  font-variant-ligatures: no-contextual;\n}\n\n/* configurable with the \"textRendering\" theme object */\n.text-rendering-auto {\n  text-rendering: auto;\n}\n.text-optimize-legibility {\n  text-rendering: optimizeLegibility;\n}\n.text-optimize-speed {\n  text-rendering: optimizeSpeed;\n}\n.text-geometric-precision {\n  text-rendering: geometricPrecision;\n}\n```\n\nThe plugin also generates components for text styles. The above config example would generate something like this:\n\n```css\n.c-h1 {\n  font-weight: 700;\n  line-height: 1.25;\n  font-size: 3rem;\n}\n@media (min-width: 640px) {\n  .c-h1 {\n    font-size: 4rem;\n  }\n}\n.c-h2 {\n  font-weight: 800;\n  line-height: 1.25;\n  font-size: 2.25rem;\n}\n@media (min-width: 640px) {\n  .c-h2 {\n    font-size: 3rem;\n  }\n}\n.c-h3 {\n  font-weight: 700;\n  line-height: 1.25;\n  font-size: 2.25rem;\n}\n.c-h4 {\n  font-weight: 700;\n  line-height: 1.25;\n  font-size: 1.875rem;\n}\n.c-h5 {\n  font-weight: 700;\n  line-height: 1.25;\n  font-size: 1.5rem;\n}\n.c-h6 {\n  font-weight: 700;\n  line-height: 1.25;\n  font-size: 1.25rem;\n}\n\n.c-link {\n  font-weight: 700;\n  color: #63b3ed;\n}\n.c-link:hover {\n  color: #3182ce;\n  text-decoration: underline;\n}\n\n.c-rich-text {\n  font-weight: 400;\n  font-size: 1rem;\n  line-height: 1.625;\n}\n.c-rich-text \u003e * + * {\n  margin-top: 1em;\n}\n.c-rich-text h1 {\n  font-weight: 700;\n  line-height: 1.25;\n  font-size: 3rem;\n}\n@media (min-width: 640px) {\n  .c-rich-text h1 {\n    font-size: 4rem;\n  }\n}\n.c-rich-text h2 {\n  font-weight: 800;\n  line-height: 1.25;\n  font-size: 2.25rem;\n}\n@media (min-width: 640px) {\n  .c-rich-text h2 {\n    font-size: 3rem;\n  }\n}\n.c-rich-text h3 {\n  font-weight: 700;\n  line-height: 1.25;\n  font-size: 2.25rem;\n}\n.c-rich-text h4 {\n  font-weight: 700;\n  line-height: 1.25;\n  font-size: 1.875rem;\n}\n.c-rich-text h5 {\n  font-weight: 700;\n  line-height: 1.25;\n  font-size: 1.5rem;\n}\n.c-rich-text h6 {\n  font-weight: 700;\n  line-height: 1.25;\n  font-size: 1.25rem;\n}\n.c-rich-text ul {\n  list-style-type: disc;\n}\n.c-rich-text ol {\n  list-style-type: decimal;\n}\n.c-rich-text a {\n  font-weight: 700;\n  color: #63b3ed;\n}\n.c-rich-text a:hover {\n  color: #3182ce;\n  text-decoration: underline;\n}\n.c-rich-text b, .c-rich-text strong {\n  font-weight: 700;\n}\n.c-rich-text i, .c-rich-text em {\n  font-style: italic;\n}\n```\n","funding_links":[],"categories":["Plugins","Running the update"],"sub_categories":["By Popularity"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenface%2Ftailwindcss-typography","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenface%2Ftailwindcss-typography","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenface%2Ftailwindcss-typography/lists"}