Migration Guide for tailwindcss pseudo elements v1.x.x to v2.0.0

1. Plugin Options

The location where customPseudoElements and customPseudoClasses are written changes.

module.exports = {
  // customPseudoElements: ['foo'],
  // customPseudoElements: ['bar'],
  plugins: [
    require('tailwindcss-pseudo-elements')({
      customPseudoClasses: ['foo'],
      customPseudoElements: ['bar'],
    }),
  ],
}

2. Variant Name

The underbar-delimited naming convention is deprecated and is more intuitive.

module.exports = {
  variants: {
    extend: {
      textColor: [
        // 'hover_before',
        // 'foo_bar',
        'hover::before',
        'hover::after',
        'foo::bar',
        'checked:hover::before'
      ],
    },
  },
}

/* @variants hover_after */
@variants hover::after {
}