{"id":13480244,"url":"https://github.com/Microwawe/tailwindcss-pseudo-selectors","last_synced_at":"2025-03-27T10:31:15.044Z","repository":{"id":65514226,"uuid":"334817915","full_name":"Microwawe/tailwindcss-pseudo-selectors","owner":"Microwawe","description":"Plugin for Tailwind CSS that adds all the different pseudo selectors to variants","archived":false,"fork":false,"pushed_at":"2021-02-01T18:15:33.000Z","size":111,"stargazers_count":38,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T22:17:19.422Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Microwawe.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-02-01T03:21:35.000Z","updated_at":"2025-01-02T04:25:41.000Z","dependencies_parsed_at":"2023-01-26T21:01:23.923Z","dependency_job_id":null,"html_url":"https://github.com/Microwawe/tailwindcss-pseudo-selectors","commit_stats":null,"previous_names":["microwawe/tailwind-pseudo-selectors"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Microwawe%2Ftailwindcss-pseudo-selectors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Microwawe%2Ftailwindcss-pseudo-selectors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Microwawe%2Ftailwindcss-pseudo-selectors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Microwawe%2Ftailwindcss-pseudo-selectors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Microwawe","download_url":"https://codeload.github.com/Microwawe/tailwindcss-pseudo-selectors/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245826826,"owners_count":20678863,"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:36.232Z","updated_at":"2025-03-27T10:31:14.755Z","avatar_url":"https://github.com/Microwawe.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"# Tailwindcss-pseudo-selectors\n\nPlugin for Tailwind CSS that adds all the different pseudo selectors as variants\n\n![GitHub package.json version](https://img.shields.io/github/package-json/v/microwawe/tailwindcss-pseudo-selectors) [![GitHub license](https://img.shields.io/github/license/Microwawe/tailwindcss-pseudo-selectors)](https://github.com/Microwawe/tailwindcss-pseudo-selectors/blob/master/LICENSE) ![npm bundle size](https://img.shields.io/bundlephobia/min/tailwindcss-pseudo-selectors) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![GitHub issues](https://img.shields.io/github/issues/Microwawe/tailwindcss-pseudo-selectors)](https://github.com/Microwawe/tailwindcss-pseudo-selectors/issues) \n[![Twitter](https://img.shields.io/twitter/url?style=social)](https://twitter.com/intent/tweet?text=Wow:\u0026url=https%3A%2F%2Fgithub.com%2FMicrowawe%2Ftailwindcss-pseudo-selectors)\n\n## Installation\n\n### NPM\n\n```sh\nnpm install tailwindcss-pseudo-selectors --save-dev\n```\n\n### Yarn\n\n```sh\nyarn add tailwindcss-pseudo-selectors -D\n```\n\n## Usage\n\n### Configuration\n\nAdd the plugin to your `tailwind.config.js` (after you've installed it as described in the [installation instructions](https://github.com/Microwawe/tailwindcss-pseudo-selectors)). And then add each of the variants from this package that you want to use to the Tailwind CSS utilities to enable them in your build.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ..\n  },\n  variants: {\n    extend: {\n      ringColor: ['valid', 'invalid'],\n    },\n  },\n  plugins: [\n    //..\n    require('tailwindcss-pseudo-selectors'),\n  ],\n};\n```\n\n### HTML\n\nThen in your HTML you can use the variants as any of the official ones like `hover:` or `dark:`\n\n```html\n\u003cdiv class=\"space-x-8\"\u003e\n  \u003cinput type=\"email\" value=\"Invalid input\" class=\"ring-2 ring-offset-2 invalid:ring-red-500\" /\u003e\n  \u003cinput type=\"text\" value=\"Valid input\" class=\"ring-2 ring-offset-2 valid:ring-green-500\" /\u003e\n\u003c/div\u003e\n```\n\nAnd the result would look like this:\n\n![Result](./pseudo-example.png)\n\n## Pseudo-classes\n\nA CSS _pseudo-class_ is a keyword added to a selector that specifies a special state of the selected element(s). For example, `:hover` can be used to change a button's color when the user's pointer hovers over it.\n\n\u003e NOTE: Tailwind already has some of the most common pseudo-classes like `:focus` and `:hover` but some of them are not enabled by default. You can check out the [Tailwind CSS documentation](https://tailwindcss.com/docs/hover-focus-and-other-states) for more detailed information about those.\n\nThe following pseudo-classes are currently supported in this package:\n\n- :any-link\n- :blank\n- :checked\n- :current\n- :default\n- :defined\n- :dir\n- :drop\n- :empty\n- :enabled\n- :first\n- :first-of-type\n- :fullscreen\n- :future\n- :host\n- :indeterminate\n- :in-range\n- :invalid\n- :lang\n- :last-of-type\n- :left\n- :link\n- :local-link\n- :only-child\n- :only-of-type\n- :optional\n- :out-of-range\n- :past\n- :picture-in-picture\n- :placeholder-shown\n- :read-only\n- :read-write\n- :required\n- :right\n- :root\n- :scope\n- :target\n- :target-within\n- :user-invalid\n- :valid\n\nFor more detailed information about which CSS properties can be used with each of these, please refer to the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes).\n\n## Pseudo-elements\n\nA CSS _pseudo-element_ is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, `::first-line` can be used to change the font of the first line of a paragraph.\n\nThe following pseudo-elements are currently supported in this package:\n\n- ::after\n- ::before\n- ::cue\n- ::cue-region\n- ::first-letter\n- ::first-line\n- ::file-selector-button\n- ::selection\n\nFor more detailed information about which CSS properties can be used with each of these, please refer to the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMicrowawe%2Ftailwindcss-pseudo-selectors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMicrowawe%2Ftailwindcss-pseudo-selectors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMicrowawe%2Ftailwindcss-pseudo-selectors/lists"}