Skip to content
Tailwind CSS plugin to generate pseudo selector variants.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig
.gitignore
README.md
index.js
package.json
test.js
yarn.lock

README.md

Pseudo Selector Plugin for Tailwind CSS

Installation

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: '';
}
You can’t perform that action at this time.