nuxt3 tailwind content-include throwing error

[bennet-esyoil]

Hey,

I'm getting the following error:

 22:25:01 [vite] Internal server error: /home/bennet/source/xxx/packages/dashboard/assets/css/tailwind.css:71:1: The dark: class does not exist. If dark: is a custom class, make sure it is defined within a @layer directive.
  Plugin: vite:css
  File: /home/bennet/source/xxx/packages/dashboard/assets/css/tailwind.css

tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  safelist: [{
    pattern: /(bg|text|font|max)-*/
  }],
  content: [
    `components/**/*.{vue,js,ts}`,
    `layouts/**/*.vue`,
    `pages/**/*.vue`,
    `plugins/**/*.{js,ts}`,
    "node_modules/tailvue/dist/tailvue.es.js",
  ],
  darkMode: 'class', // or 'media' or false
  theme: {
    extend: {
      fontFamily: {
        sans: ['cairo', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        light: 'var(--light)',
        dark: 'var(--dark)',
        darker: 'var(--darker)',
        primary: {
          DEFAULT: 'var(--color-primary)',
          50: 'var(--color-primary-50)',
          100: 'var(--color-primary-100)',
          light: 'var(--color-primary-light)',
          lighter: 'var(--color-primary-lighter)',
          dark: 'var(--color-primary-dark)',
          darker: 'var(--color-primary-darker)',
        },
        secondary: {
          DEFAULT: colors.fuchsia[600],
          50: colors.fuchsia[50],
          100: colors.fuchsia[100],
          light: colors.fuchsia[500],
          lighter: colors.fuchsia[400],
          dark: colors.fuchsia[700],
          darker: colors.fuchsia[800],
        },
        success: {
          DEFAULT: colors.green[600],
          50: colors.green[50],
          100: colors.green[100],
          light: colors.green[500],
          lighter: colors.green[400],
          dark: colors.green[700],
          darker: colors.green[800],
        },
        warning: {
          DEFAULT: colors.orange[600],
          50: colors.orange[50],
          100: colors.orange[100],
          light: colors.orange[500],
          lighter: colors.orange[400],
          dark: colors.orange[700],
          darker: colors.orange[800],
        },
        danger: {
          DEFAULT: colors.red[600],
          50: colors.red[50],
          100: colors.red[100],
          light: colors.red[500],
          lighter: colors.red[400],
          dark: colors.red[700],
          darker: colors.red[800],
        },
        info: {
          DEFAULT: colors.cyan[600],
          50: colors.cyan[50],
          100: colors.cyan[100],
          light: colors.cyan[500],
          lighter: colors.cyan[400],
          dark: colors.cyan[700],
          darker: colors.cyan[800],
        },
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: ['checked', 'disabled'],
      opacity: ['dark'],
      overflow: ['hover'],
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

tailwind.css in assets has the following on line 71:

@tailwind components;

When I take out the "node_modules/tailvue/dist/tailvue.es.js", in the content section my project builds again.

Any more information needed?

[acidjazz]

This might be because tailvue has dark-mode classes added to its components .. maybe you have to turn dark mode on?

[tcampbPPU]

Which version of tailwind are you using?

[bennet-esyoil]

Which version of tailwind are you using?

Currently in my package.json I have "@nuxtjs/tailwindcss": "^5.1.3",

This might be because tailvue has dark-mode classes added to its components .. maybe you have to turn dark mode on?

I do have darkmode turned on, I even have a toggle for that.

If I remove every occurence with ":dark" that's in the compiled file the project at least builds again - but theres still a big overlay that does not get the classes applied.

[tcampbPPU]

Did you import the module in correct order inside your nuxt.config.ts?

  modules: [
    '@nuxtjs/tailwindcss',
    '@tailvue/nuxt',
  ],

So you want to make sure the '@nuxtjs/tailwindcss' is before '@tailvue/nuxt'.

I put together a quick demo that converts to Tailwind from WindiCSS let me know if that is any help.

[bennet-esyoil]

It sadly does not really.

I've created a very very very minmal repo here: https://github.com/bennet-esyoil/tailvue-nuxt3

To run, just npm ci and npm run dev and the build error appears. I'll be debugging this further but at the moment, I have no clue what's happening. In your main.css there's no @tailwind so maybe that has something to do with it. When I take it out I get no build errors, but am also loosing all styling

[tcampbPPU]

What is the dark refer to here

[tcampbPPU]

I think that class you are adding is conflicting with Tailwind

[tcampbPPU]

If I remove that then I see the following

tmp/testing/tailvue-nuxt3/assets/css/main.css:2:1: The ring-danger-light: class does not exist. If ring-danger-light: is a custom class, make sure it is defined within a @layer directive.

so I am not sure these are getting used properly

[bennet-esyoil]

I see what you mean.

Autoformatter is breaking that for me. When I remove the whitespace it at least throws me another error.

So I guess my problem is not related to this lib at all, but somehow made the error first appear. I've been using it that way for at least a month now without any issues.

Feel free to close.

[tcampbPPU]

Yea I would check on those classes you are adding and make sure they are not conflicting with the base tailwind classes which is where I think the issue with the TailVue lib was it needed those dark class directives.

Not related but in it nuxt config you can just use modules instead of buildModules when using Nuxt 3 according to their docs.