@Tailwind utilities throwing error

[northrn]

I am trying to use Tailwind inside a NextJS project and whenever it tries to compile, I get this error:

Variant cannot be generated because selector contains no classes.

 2 | /* purgecss start ignore */
  3 | @tailwind components;
> 4 | @tailwind utilities;
    | ^
  5 | /* purgecss end ignore */

Here is my tailwind.config.js:

module.exports = {
  future: {
    purgeLayersByDefault: true,
    applyComplexClasses: true,
  },
  purge: {
    content: [
      './components/TailwindProduct.{js,ts,jsx,tsx}',
      './pages/**/*.{js,ts,jsx,tsx}',
      './blocks/**/*.{js,ts,jsx,tsx}',
      './components/**/*.{js,ts,jsx,tsx}',
    ],
  },
  theme: {
    extend: {
      maxWidth: {
        '8xl': '1920px',
      },
      colors: {
        primary: 'var(--primary)',
        'primary-2': 'var(--primary-2)',
        secondary: 'var(--secondary)',
        'secondary-2': 'var(--secondary-2)',
        hover: 'var(--hover)',
        'hover-1': 'var(--hover-1)',
        'hover-2': 'var(--hover-2)',
        'accents-0': 'var(--accents-0)',
        'accents-1': 'var(--accents-1)',
        'accents-2': 'var(--accents-2)',
        'accents-3': 'var(--accents-3)',
        'accents-4': 'var(--accents-4)',
        'accents-5': 'var(--accents-5)',
        'accents-6': 'var(--accents-6)',
        'accents-7': 'var(--accents-7)',
        'accents-8': 'var(--accents-8)',
        'accents-9': 'var(--accents-9)',
        violet: 'var(--violet)',
        'violet-light': 'var(--violet-light)',
        pink: 'var(--pink)',
        cyan: 'var(--cyan)',
        blue: 'var(--blue)',
        green: 'var(--green)',
        red: 'var(--red)',
      },
      textColor: {
        base: 'var(--text-base)',
        primary: 'var(--text-primary)',
        secondary: 'var(--text-secondary)',
      },
      boxShadow: {
        'outline-2': '0 0 0 2px var(--accents-2)',
        magical:
          'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
      },
      lineHeight: {
        'extra-loose': '2.2',
      },
      scale: {
        120: '1.2',
      },
      gridTemplateRows: {
        '[auto,auto,1fr]': 'auto auto 1fr',
      },
    },
  },
  plugins: [require('@tailwindcss/ui'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/forms')],
}

postcss.config.js:

module.exports = {
  plugins: [
    'postcss-nested',
    'tailwindcss',
    'postcss-nesting',
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 2,
        features: {
          'custom-properties': false,
        },
      },
    ],
  ],
}

This happens only when I import "./tailwind.css" into a file and attempt to save the file. I tried importing "./utilities.css" on its own, but this throws the same error.

I am using v1.9.6

I can only find one instance of this issue in Google and it was unresolved. Any help would be greatly appreciated.

[northrn]

Bumping this... tried everything and can't get Tailwind to work.

[imangi]

Prefix your path with tilde ~

@import "~tailwindcss/base";
@import "~tailwindcss/components";
@import "~tailwindcss/utilities";

[fredrick-mwaura]

perfectly worked