{"id":18557195,"url":"https://github.com/croutonn/tailwindcss-pseudo-elements","last_synced_at":"2025-10-10T18:12:32.361Z","repository":{"id":42703661,"uuid":"178653326","full_name":"croutonn/tailwindcss-pseudo-elements","owner":"croutonn","description":"TailwindCSS Plugin that adds variants of pseudo elements.","archived":false,"fork":false,"pushed_at":"2023-03-05T13:12:56.000Z","size":697,"stargazers_count":119,"open_issues_count":12,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T10:04:18.863Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/croutonn.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":"2019-03-31T06:53:53.000Z","updated_at":"2024-06-06T09:31:53.000Z","dependencies_parsed_at":"2024-06-18T15:44:19.110Z","dependency_job_id":null,"html_url":"https://github.com/croutonn/tailwindcss-pseudo-elements","commit_stats":{"total_commits":338,"total_committers":6,"mean_commits":"56.333333333333336","dds":"0.20118343195266275","last_synced_commit":"d3da7afe6e570f83dbd48e0da80218aa4f5d76ed"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croutonn%2Ftailwindcss-pseudo-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croutonn%2Ftailwindcss-pseudo-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croutonn%2Ftailwindcss-pseudo-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croutonn%2Ftailwindcss-pseudo-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/croutonn","download_url":"https://codeload.github.com/croutonn/tailwindcss-pseudo-elements/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648976,"owners_count":20972945,"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-11-06T21:34:54.022Z","updated_at":"2025-10-10T18:12:32.282Z","avatar_url":"https://github.com/croutonn.png","language":"JavaScript","readme":"# tailwindcss-pseudo-elements \u003c!-- omit in toc --\u003e\n\nTailwindCSS Plug-in that adds variants of pseudo elements (`::before`, `::after`, `::first-letter`, etc.).\n\n---\n\n- [Getting Started](#getting-started)\n  - [Install](#install)\n    - [NPM](#npm)\n    - [Yarn](#yarn)\n  - [Write the configuration for the plug-in](#write-the-configuration-for-the-plug-in)\n  - [Set the variants](#set-the-variants)\n  - [Write the HTML](#write-the-html)\n    - [Content Property Utilities](#content-property-utilities)\n    - [Empty Property Utility](#empty-property-utility)\n- [Options](#options)\n  - [`customPseudoClasses` and `customPseudoElements`](#custompseudoclasses-and-custompseudoelements)\n  - [`contentUtilities`](#contentutilities)\n  - [`emptyContent`](#emptycontent)\n  - [`classNameReplacer`](#classnamereplacer)\n- [Recommended](#recommended)\n  - [tailwindcss-aspect-ratio](#tailwindcss-aspect-ratio)\n\n---\n\n## Getting Started\n\n### Install\n\n#### NPM\n\n```sh\nnpm install tailwindcss-pseudo-elements --save-dev\n```\n\n#### Yarn\n\n```sh\nyarn add tailwindcss-pseudo-elements -D\n```\n\n### Write the configuration for the plug-in\n\nPass [the option](#options) object to the plug-in as follows:\n\n```js\nmodule.exports = {\n  plugins: [\n    require('tailwindcss-pseudo-elements')({\n      customPseudoClasses: ['foo'],\n      customPseudoElements: ['bar'],\n      contentUtilities: false,\n      emptyContent: false,\n      classNameReplacer: {\n        'hover:before:text-black': 'hbt',\n      },\n    }),\n  ],\n}\n```\n\n### Set the variants\n\nNaming convention of the variants is like `pseudo-class:pseudo-class::pseudo-element`.  \nAn example configuration is shown below.\n\n```js\nmodule.exports = {\n  variants: {\n    extend: {\n      textColor: [\n        'responsive',\n        'hover',\n        'focus',\n        'before',\n        'after',\n        'hover::before',\n        'hover::after',\n        'focus::before',\n        'checked:hover',\n        'checked:hover::before',\n      ],\n    },\n  },\n}\n```\n\n### Write the HTML\n\n```html\n\u003cdiv\n  class=\"relative\n    before:aspect-ratio-4/3\n    hover:before:aspect-ratio-1/1\n    before:empty-content\"\n\u003e\n  \u003cimg class=\"absolute pin w-full h-full\" src=\"...\" /\u003e\n\u003c/div\u003e\n```\n\n#### Content Property Utilities\n\nThere are utilities that set the attributes of HTML elements to the content property.\n\nMark it up as follows:\n\n```html\n\u003cp\n  class=\"content-before content-after content-hover-before\"\n  tw-content-before=\"🧡\"\n  tw-content-hover-before=\"💖\"\n  tw-content-after=\"💙️\"\n\u003e\n  Tailwind CSS\n\u003c/p\u003e\n```\n\n**NOTE:** If you encounter problems with **AMP** Validation, you can work around them by setting the `prefix` with the `contentUtilities` option.\n\n#### Empty Property Utility\n\nThere is a utility class that sets `{ content: \"\" }` in the `::before`.\n\n```html\n\u003cp class=\"before:empty-content\"\u003e\u003c/p\u003e\n```\n\n## Options\n\n### `customPseudoClasses` and `customPseudoElements`\n\nYou can set up your own pseudo-classes and pseudo-elements.\n\ntype: `string[]`  \ndefault: `[]`\n\n### `contentUtilities`\n\nConfiguration of [the Content Property Utilities](#content-property-utilities).\n\ntype: `boolean | { \"prefix\": string }`  \ndefault: `{ \"prefix\": \"tw-content\" }`\n\n### `emptyContent`\n\nWhether to generate [the Empty Property Utility](#empty-property-utility).\n\ntype: `boolean`\ndefault: `true`\n\n### `classNameReplacer`\n\nYou can replace frequently used class names with different names.\n\ntype: `Record\u003cstring, string\u003e`  \ndefault: `{}`\n\n## Recommended\n\n### tailwindcss-aspect-ratio\n\n```js\n  plugins: [\n    require('tailwindcss-pseudo-elements')(pseudoOptions),\n    require('tailwindcss-aspect-ratio')({\n      ratios: {\n        '16/9': [16, 9],\n        '4/3': [4, 3],\n        '3/2': [3, 2],\n        '1/1': [1, 1],\n      },\n      variants: ['before', 'hover::before', 'responsive'],\n    }),\n  ],\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcroutonn%2Ftailwindcss-pseudo-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcroutonn%2Ftailwindcss-pseudo-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcroutonn%2Ftailwindcss-pseudo-elements/lists"}