{"id":13480340,"url":"https://github.com/downwindcss/text-decoration","last_synced_at":"2025-03-27T10:32:36.045Z","repository":{"id":57109528,"uuid":"348882304","full_name":"downwindcss/text-decoration","owner":"downwindcss","description":"The missing Tailwind CSS text-decoration plugin","archived":false,"fork":false,"pushed_at":"2021-12-10T15:04:10.000Z","size":600,"stargazers_count":8,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-09-19T18:18:03.937Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@downwindcss/text-decoration","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/downwindcss.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}},"created_at":"2021-03-17T23:37:33.000Z","updated_at":"2021-12-10T15:04:13.000Z","dependencies_parsed_at":"2022-08-20T17:40:47.295Z","dependency_job_id":null,"html_url":"https://github.com/downwindcss/text-decoration","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/downwindcss%2Ftext-decoration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/downwindcss%2Ftext-decoration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/downwindcss%2Ftext-decoration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/downwindcss%2Ftext-decoration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/downwindcss","download_url":"https://codeload.github.com/downwindcss/text-decoration/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222239289,"owners_count":16953912,"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":"2024-07-31T17:00:37.715Z","updated_at":"2024-10-30T14:30:21.616Z","avatar_url":"https://github.com/downwindcss.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"# @downwindcss/text-decoration\n\n**NOTE**: Deprecated for Tailwind CSS version 3.x.  \nbecause TW now provides these functionalities out of the box.\n- Text Decoration Color - https://tailwindcss.com/docs/text-decoration-color\n- Text Decoration Style - https://tailwindcss.com/docs/text-decoration-style\n- Text Decoration Thickness - https://tailwindcss.com/docs/text-decoration-thickness\n- Text Underline Offset - https://tailwindcss.com/docs/text-underline-offset\n\n---\n\n\nA [Tailwind CSS](https://tailwindcss.com/) Plugin for [text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) utility.\n\nThis plugin is composable ([Composing the Uncompsable with CSS Variables](https://adamwathan.me/composing-the-uncomposable-with-css-variables/)) thus can add multiple [decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/decoration-line) utitlies (to add under/overline and line-through together. Refer to the \"Usage\" sectrion below)\n\n## Installation\n\n```bash\nnpm install @downwindcss/text-decoration\n# for Yarn users\nyarn add @downwindcss/text-decoration\n```\n\n## Configuration\n\nAdd the plugin in `tailwind.config.js` in [Plugins section](https://tailwindcss.com/docs/configuration#plugins).\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [require('@downwindcss/text-decoration')],\n};\n```\n\n## TL;DR\n\n**Example**: https://play.tailwindcss.com/fm4Vucj6IG\n\nHere are all the available utilities\n\n| Utility Name                 | CSS Definition                                    |\n|------------------------------|---------------------------------------------------|\n| text-decoration              | N/A: Needed to apply text decoration              |\n| text-decoration-underline    | text-decoration-line: underline                   |\n| text-decoration-overline     | text-decoration-line: overline                    |\n| text-decoration-line-through | text-decoration-line: line-through                |\n| text-decoration-solid        | text-decoration-style: solid                      |\n| text-decoration-double       | text-decoration-style: double                     |\n| text-decoration-dotted       | text-decoration-style: dotted                     |\n| text-decoration-dashed       | text-decoration-style: dashed                     |\n| text-decoration-wavy         | text-decoration-style: wavy                       |\n| text-decoration-1            | text-decoration-thickness: 1px;                   |\n| text-decoration-2            | text-decoration-thickness: 2px;                   |\n| text-decoration-4            | text-decoration-thickness: 4px;                   |\n| text-decoration-8            | text-decoration-thickness: 8px;                   |\n| text-decoration-$color       | `$color`: All Tailwind CSS and your custom colors |\n\n\n## Utilities\n\n### Usage\n\nTo enable `text-decoration` utilities, you need to add `.text-decoration` class.\n\nBy itself it doesn't apply any style similar to how built-in [Transform](https://tailwindcss.com/docs/transform) utility doesn't apply any transformations.\n\n```html\n\u003ch2 class=\"text-decoration\"\u003eHeader\u003c/h2\u003e\n```\n\n### text-decoration-line\n\nUtilities for applying lines.  \nMDN: [decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/decoration-line)\n\nUse Tailwind CSS's [no-underline](https://tailwindcss.com/docs/text-decoration#no-underline) to remove text decoration.\n\n**ATTRIBUTION:** Screenshots on [decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/decoration-line) by [Mozilla Contributrors](https://developer.mozilla.org/en-US/docs/MDN/About/contributors.txt) is licensed under [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/)\n\n#### underline.\n\n```html\n\u003cp\u003e\n  I'd far rather be\n  \u003cspan class=\"text-decoration text-decoration-underline\"\u003e\n    happy than right\n  \u003c/span\u003e\n  any day.\n\u003c/p\u003e\n```\n\n![rendered](.images/underline.png)\n\n#### overline.\n\n```html\n\u003cp\u003e\n  I'd far rather be\n  \u003cspan class=\"text-decoration text-decoration-overline\"\u003e\n    happy than right\n  \u003c/span\u003e\n  any day.\n\u003c/p\u003e\n```\n\n![rendered](.images/overline.png)\n\n#### line-through.\n\n```html\n\u003cp\u003e\n  I'd far rather be\n  \u003cspan class=\"text-decoration text-decoration-through\"\u003e\n    happy than right\n  \u003c/span\u003e\n  any day.\n\u003c/p\u003e\n```\n\n![rendered](.images/line-through.png)\n\n**NOTE**: It's not `decoration-line-line-through` even though CSS applied is `decoration-line: line-through;`\n\n#### underline + overline + line-through\n\n```html\n\u003cp\u003e\n  I'd far rather be\n  \u003cspan\n    class=\"\n        text-decoration \n        text-decoration-overline \n        text-decoration-underline \n        text-decoration-line-through\"\n  \u003e\n    happy than right\n  \u003c/span\u003e\n  any day.\n\u003c/p\u003e\n```\n\n![rendered](.images/underline+overline+line-through.png)\n\n### text-decoration-color\n\nAll Tailwind CSS colors AND your extended colors are available.\n\nYou can extend decoration colors and by extending `textDecorationPlugin.colors`.\n\nExtend colors in \u003ccode\u003etailwind.config.js\u003c/code\u003e\n\n```js\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n  theme: {\n    extend: {\n      textDecorationPlugin: {\n        colors: {\n          primary: 'tomato',\n          secondary: 'gold',\n        },\n      },    },\n  },\n  variants: {},\n  plugins: [textDecorationPlugin],\n}\n```\n\nAnd use them in your HTML markup.\n\n```html\n\u003ch1 class=\"\n    text-decoration \n    text-decoration-underline \n    text-decoration-overline \n    text-decoration-line-through \n    text-decoration-wavy\n    text-decoration-primary\n    text-decoration-2\"\u003e\n    Header\n\u003c/h1\u003e\n```\n\nIf you extend `colors`, extended colors will be available for the plugin.\n\n```js\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        'light-blue': colors.lightBlue,\n      },\n      textDecorationPlugin: {\n        colors: {\n          primary: 'tomato',\n        },\n      },\n    },\n  },\n  variants: {},\n  plugins: [textDecorationPlugin],\n}\n```\n\nAnd use them in your HTML markup.\n\n```html\n\u003ch1 class=\"\n    text-decoration \n    text-decoration-underline \n    text-decoration-overline \n    text-decoration-line-through \n    text-decoration-wavy\n    text-decoration-light-blue-300\n    text-decoration-2\"\u003e\n    Header\n\u003c/h1\u003e\n```\n\n\n### text-decoration-style\n\nYou can use following [text-decoration-style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style)s.\n\n\n| CSS                    | Applied Style                 |\n|------------------------|-------------------------------|\n| text-decoration-solid  | text-decoration-style: solid  |\n| text-decoration-double | text-decoration-style: double |\n| text-decoration-dotted | text-decoration-style: dotted |\n| text-decoration-dashed | text-decoration-style: dashed |\n| text-decoration-wavy   | text-decoration-style: wavy   |\n\n\n### text-decoration-thickness\n\nWhen you type `decoration-{thickness: number}`, [text-decoration-thickness](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness) will be applied.\n\nAs an example, `decoration-2` will apply `2px` thickness\n\n```html\n\u003ch1 class=\"\n    text-decoration \n    text-decoration-underline \n    text-decoration-overline \n    text-decoration-line-through \n    text-decoration-wavy\n    text-decoration-primary\n    text-decoration-2\"\u003e\n    Header\n\u003c/h1\u003e\n```\n\nAvailable values are,\n\n\n| CSS               | Applied Style                   |\n|-------------------|---------------------------------|\n| text-decoration-1 | text-decoration-thickness: 1px; |\n| text-decoration-2 | text-decoration-thickness: 2px; |\n| text-decoration-4 | text-decoration-thickness: 4px; |\n| text-decoration-8 | text-decoration-thickness: 8px; |\n\nYou can extend the thickness by updating configuration, `textDecorationPlugin.thicknesses` property.\n\n```js\nmodule.exports = {\n  theme: {\n    extend: {\n      textDecorationPlugin: {\n        thicknesses: {\n          '0.2rem': '0.2rem',\n        },\n      },\n    },\n  },\n  variants: {},\n  plugins: [textDecorationPlugin],\n}\n```\n\nAnd use it as `decoration-0.2rem`.\n\n\n### Clearing Deocration\n\nUse `decoration-none`.\n\n### Duplicate Utilities\n\nFollowing `text-decoration` can be done with native [Tailwind CSS utilities](https://tailwindcss.com/docs/text-decoration) but also added in this plugin to enable composability.\n\n1. underline: `text-decoration: underline;`\n2. line-through: `text-decoration: line-through;`\n3. no-underline: `text-decoration: none;`\n\n## Resource\n\n- Source: [downwindcss/text-decoration](https://github.com/downwindcss/text-decoration)\n- NPM: https://www.npmjs.com/package/@downwindcss/text-decoration\n\n## Context\n\nBased on idea post in Tailwind CSS dicussion, https://github.com/tailwindlabs/tailwindcss/discussions/3749\n\nThis plugin provides missing Tailwind CSS `text-decoration*` properties as a plugin.\n\n## Build\n\nThis project uses [PNPM](https://pnpm.io/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdownwindcss%2Ftext-decoration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdownwindcss%2Ftext-decoration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdownwindcss%2Ftext-decoration/lists"}