Control Backdrop Opacity variants

[alvaaz]

According to the documentation, you can control Variants with Backdrop Opacity utilities.

When I follow the example, the browser show this error:

I tried same conf in tailwind play and show this error:

this is the code I've attempted:

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      sans: ['DM Sans', 'sans-serif'],
      serif: ['DM Serif Display', 'serif'],
    },
    extend: {
      colors: {
        primary: { DEFAULT: '#FE5245', dark: '#FE4638' },
        gray: { DEFAULT: '#1C2C2D' },
        oil: { DEFAULT: '#435448' },
        pink: { DEFAULT: '#FACFB0' },
      },
    },
  },
  variants: {
    extend: {
      cursor: ['disabled'],
      opacity: ['disabled'],
      textOpacity: ['disabled'],
      backdropOpacity: ['hover'],
    },
  },
  plugins: [],
};

If TailwindCSS doesn't support this control, we should remove this section en the doc.

[adamwathan]

This is a bug in the framework, whoops! Will be fixed in the next release, probably tomorrow or Tuesday.

In the mean time, you can fix it in your project by just not using extend for backdrop opacity:

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      sans: ['DM Sans', 'sans-serif'],
      serif: ['DM Serif Display', 'serif'],
    },
    extend: {
      colors: {
        primary: { DEFAULT: '#FE5245', dark: '#FE4638' },
        gray: { DEFAULT: '#1C2C2D' },
        oil: { DEFAULT: '#435448' },
        pink: { DEFAULT: '#FACFB0' },
      },
    },
  },
  variants: {
    backdropOpacity: ['responsive', 'hover'],
    extend: {
      cursor: ['disabled'],
      opacity: ['disabled'],
      textOpacity: ['disabled'],
    },
  },
  plugins: [],
};