Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Microwawe/tailwindcss-pseudo-selectors
Plugin for Tailwind CSS that adds all the different pseudo selectors to variants
https://github.com/Microwawe/tailwindcss-pseudo-selectors
Last synced: 4 months ago
JSON representation
Plugin for Tailwind CSS that adds all the different pseudo selectors to variants
- Host: GitHub
- URL: https://github.com/Microwawe/tailwindcss-pseudo-selectors
- Owner: Microwawe
- License: mit
- Created: 2021-02-01T03:21:35.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-02-01T18:15:33.000Z (about 4 years ago)
- Last Synced: 2024-10-27T15:37:24.504Z (4 months ago)
- Language: JavaScript
- Size: 108 KB
- Stars: 39
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwindcss-pseudo-selectors
Plugin for Tailwind CSS that adds all the different pseudo selectors as variants
 [](https://github.com/Microwawe/tailwindcss-pseudo-selectors/blob/master/LICENSE)  [](https://github.com/semantic-release/semantic-release) [](https://github.com/Microwawe/tailwindcss-pseudo-selectors/issues)
[](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2FMicrowawe%2Ftailwindcss-pseudo-selectors)
## Installation
### NPM
```sh
npm install tailwindcss-pseudo-selectors --save-dev
```
### Yarn
```sh
yarn add tailwindcss-pseudo-selectors -D
```
## Usage
### Configuration
Add 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.
```js
// tailwind.config.js
module.exports = {
theme: {
// ..
},
variants: {
extend: {
ringColor: ['valid', 'invalid'],
},
},
plugins: [
//..
require('tailwindcss-pseudo-selectors'),
],
};
```
### HTML
Then in your HTML you can use the variants as any of the official ones like `hover:` or `dark:`
```html
```
And the result would look like this:
## Pseudo-classes
A 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.
> 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.
The following pseudo-classes are currently supported in this package:
- :any-link
- :blank
- :checked
- :current
- :default
- :defined
- :dir
- :drop
- :empty
- :enabled
- :first
- :first-of-type
- :fullscreen
- :future
- :host
- :indeterminate
- :in-range
- :invalid
- :lang
- :last-of-type
- :left
- :link
- :local-link
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :picture-in-picture
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
For 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).
## Pseudo-elements
A 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.
The following pseudo-elements are currently supported in this package:
- ::after
- ::before
- ::cue
- ::cue-region
- ::first-letter
- ::first-line
- ::file-selector-button
- ::selection
For 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).
### License
MIT