Skip to content

Log1x/tailwindcss-pseudo

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Tailwind CSS Pseudo Selector Plugin

Package Version Package Total Downloads

Requirements

Installation

Install via Yarn:

$ yarn add tailwindcss-pseudo

Usage

// 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:

.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 and can be ran using:

$ yarn run test

Bug Reports

If you discover a bug in Tailwind CSS Pseudo, please open an issue.

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.

About

Tailwind CSS plugin to generate pseudo selector variants.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published