https://github.com/Log1x/tailwindcss-pseudo

Tailwind CSS plugin to generate pseudo selector variants.
https://github.com/Log1x/tailwindcss-pseudo

tailwindcss tailwindcss-plugin

Last synced: 3 months ago
JSON representation

Tailwind CSS plugin to generate pseudo selector variants.

• Host: GitHub
• URL: https://github.com/Log1x/tailwindcss-pseudo
• Owner: Log1x
• License: mit
• Created: 2019-04-28T16:41:33.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T20:27:55.000Z (over 1 year ago)
• Last Synced: 2024-02-18T22:45:49.172Z (4 months ago)
• Topics: tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Size: 1.15 MB
• Stars: 41
• Watchers: 4
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Lists

• awesome-tailwindcss - Pseudo - Adds custom variants to Tailwind CSS's configuration. (Plugins)
• awesome-stars - tailwindcss-pseudo

README

        
# Tailwind CSS Pseudo Selector Plugin

![Package Version](https://img.shields.io/npm/v/tailwindcss-pseudo?style=flat-square)

![Package Total Downloads](https://img.shields.io/npm/dt/tailwindcss-pseudo?style=flat-square)

## Requirements

- [Tailwind CSS](https://tailwindcss.com/) >= v1.0.0

## Installation

Install via Yarn:

```sh

$ yarn add tailwindcss-pseudo

```

## Usage

```js

// tailwind.config.js

{

  theme: {

    backgroundColor: {

      'black': 'black',

    },

    pseudo: { // defaults to {'before': 'before', 'after': 'after'}

      'before': 'before',

      'after': 'after',

      'not-first': 'not(:first-child)',

    }

  },

  variants: {

    backgroundColor: ['not-first'],

    empty: ['before', 'after'], // defaults to []

  },

  plugins: [

    require('tailwindcss-pseudo')({

      empty: true, // defaults to true

    }),

  ],

}

```

This plugin generates the following utilities:

```css

.bg-black {

  background-color: black;

}

.not-first\:bg-black:not(:first-child) {

  background-color: black;

}

.empty {

  content: '';

}

.before\:empty::before {

  content: '';

}

.after\:empty::after {

  content: '';

}

```

## Testing

Tests are handled with [Jest](https://github.com/facebook/jest) and can be ran using:

```sh

$ yarn run test

```

## Bug Reports

If you discover a bug in Tailwind CSS Pseudo, please [open an issue](https://github.com/log1x/tailwindcss-pseudo/issues).

## Contributing

Contributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated.

## License

Tailwind CSS Pseudo provided under the [MIT License](https://github.com/log1x/tailwindcss-pseudo/blob/master/LICENSE.md).