Could not compile templates ui.colors.mjs & ui.colors.d.ts

[ChamperNet]

Version

@nuxtjs/tailwindcss: 6.11.2
nuxt: 3.10.0
node: 18.17.1

Steps to reproduce

Clean project with nuxt & tailwind module.
Just install Tailwind module with pnpm, run pnpm dev and got that errors.
No tailwind.config.{js|ts} provided
In nuxt.config.ts module '@nuxtjs/tailwindcss' is included in modules array.

package.json:

"devDependencies": {
    "@nuxt/image": "^1.3.0",
    "@nuxtjs/apollo": "5.0.0-alpha.11",
    "@nuxtjs/eslint-config-typescript": "^12.1.0",
    "@nuxtjs/eslint-module": "^4.1.0",
    "@nuxtjs/google-fonts": "^3.1.3",
    "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge",
    "@nuxtjs/seo": "^2.0.0-rc.7",
    "@nuxtjs/tailwindcss": "^6.11.2",
    "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
    "@pinia/nuxt": "^0.5.1",
    "@vueuse/core": "^10.7.2",
    "@vueuse/nuxt": "^10.7.2",
    "eslint": "^8.56.0",
    "nuxt": "^3.10.0",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@nuxt/ui": "^2.13.0",
    "graphql-tag": "^2.12.6",
    "nuxt-swiper": "^1.2.2"
  }

What is Expected?

Compile without errors.

What is actually happening?

Could not compile template ui.colors.mjs. 
Could not compile template ui.colors.d.ts. 

[ineshbose]

Seems like a @nuxt/ui thing - you should rather specify that in your modules without @nuxtjs/tailwindcss as it'll install it for you.

Feel free to share more context, such as your nuxt.config contents, etc.

[ChamperNet]

Seems like a @nuxt/ui thing - you should rather specify that in your modules without @nuxtjs/tailwindcss as it'll install it for you.

Feel free to share more context, such as your nuxt.config contents, etc.

Does @nuxt/ui include a tailwind module?

my nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({

  // DevTools
  devtools: {
    enabled: true
  },

  // SSR
  ssr: true,

  // Modules
  modules: [
    '@nuxtjs/apollo',
    '@nuxtjs/eslint-module',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/i18n',
    '@nuxt/image',
    '@nuxtjs/google-fonts',
    '@nuxtjs/seo',
    '@nuxt/ui',
    ['@pinia/nuxt',
      {
        autoImports: ['defineStore', 'acceptHMRUpdate']
      }
    ],
    '@pinia-plugin-persistedstate/nuxt',
    '@vueuse/nuxt',
    'nuxt-swiper'
  ],

  // Apollo
  apollo: {
    clients: {
      default: {
        httpEndpoint:
          process.env.STRAPI_GRAPHQL || 'http://127.0.0.1:1337/graphql',
        httpLinkOptions: {
          credentials: 'same-origin'
        },
        authType: 'Bearer',
        authHeader: 'Authorization',
        tokenName: 'strapi_jwt'
      }
    }
  },

  // Pinia
  piniaPersistedstate: {
    storage: 'localStorage',
    debug: process.env.ENV === 'development'
  },
  imports: {
    dirs: ['stores']
  },

  // Tailwind
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config'
    // exposeConfig: false,
    // config: {},
    // injectPosition: 0,
    // viewer: true,
  },

  // i18n
  i18n: {
    lazy: true,
    langDir: 'locales',
    locales: [
      {code: 'en', iso: 'en', file: 'en.json'},
      {code: 'ru', iso: 'ru', file: 'ru.json'}
    ],
    defaultLocale: 'en',
    strategy: 'no_prefix',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root'
    }
  },

  // Eslint
  eslint: {
    cache: process.env.ENV === 'development'
  },

  sourcemap: {
    server: process.env.ENV === 'development',
    client: process.env.ENV === 'development'
  },

  // Google Fonts
  googleFonts: {
    display: 'swap',
    prefetch: true,
    useStylesheet: true,
    preload: true,
    preconnect: true,
    download: true,
    families: {
      Questrial: [400, 500, 700]
    }
  },

  image: {
    strapi: {
      baseURL: process.env.APP_URL ?? 'http://localhost:1337/uploads/'
    }
  }
})

tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

[ineshbose]

Does @nuxt/ui include a tailwind module?

Yes.

my nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config



export default defineNuxtConfig({



  // DevTools

  devtools: {

    enabled: true

  },



  // SSR

  ssr: true,



  // Modules

  modules: [

    '@nuxtjs/apollo',

    '@nuxtjs/eslint-module',

    '@nuxtjs/tailwindcss',

    '@nuxtjs/i18n',

    '@nuxt/image',

    '@nuxtjs/google-fonts',

    '@nuxtjs/seo',

    '@nuxt/ui',

    ['@pinia/nuxt',

      {

        autoImports: ['defineStore', 'acceptHMRUpdate']

      }

    ],

    '@pinia-plugin-persistedstate/nuxt',

    '@vueuse/nuxt',

    'nuxt-swiper'

  ],



  // Apollo

  apollo: {

    clients: {

      default: {

        httpEndpoint:

          process.env.STRAPI_GRAPHQL || 'http://127.0.0.1:1337/graphql',

        httpLinkOptions: {

          credentials: 'same-origin'

        },

        authType: 'Bearer',

        authHeader: 'Authorization',

        tokenName: 'strapi_jwt'

      }

    }

  },



  // Pinia

  piniaPersistedstate: {

    storage: 'localStorage',

    debug: process.env.ENV === 'development'

  },

  imports: {

    dirs: ['stores']

  },



  // Tailwind

  tailwindcss: {

    cssPath: '~/assets/css/tailwind.css',

    configPath: 'tailwind.config'

    // exposeConfig: false,

    // config: {},

    // injectPosition: 0,

    // viewer: true,

  },



  // i18n

  i18n: {

    lazy: true,

    langDir: 'locales',

    locales: [

      {code: 'en', iso: 'en', file: 'en.json'},

      {code: 'ru', iso: 'ru', file: 'ru.json'}

    ],

    defaultLocale: 'en',

    strategy: 'no_prefix',

    detectBrowserLanguage: {

      useCookie: true,

      cookieKey: 'i18n_redirected',

      redirectOn: 'root'

    }

  },



  // Eslint

  eslint: {

    cache: process.env.ENV === 'development'

  },



  sourcemap: {

    server: process.env.ENV === 'development',

    client: process.env.ENV === 'development'

  },



  // Google Fonts

  googleFonts: {

    display: 'swap',

    prefetch: true,

    useStylesheet: true,

    preload: true,

    preconnect: true,

    download: true,

    families: {

      Questrial: [400, 500, 700]

    }

  },



  image: {

    strapi: {

      baseURL: process.env.APP_URL ?? 'http://localhost:1337/uploads/'

    }

  }

})

tailwind.css:

@tailwind base;

@tailwind components;

@tailwind utilities;

You'd definitely want to remove @nuxtjs/tailwindcss from there as @nuxt/ui installs it with some configuration and hooks that integrate it with this module. Let me know if the issue still persists after doing so and I'll reopen.

[ChamperNet]

Thank you! Deleting @nuxtjs/tailwindcss - was the key.