Launches with broken link for viewer and viewer does not work.

[michaelpumo]

Version

@nuxtjs/tailwindcss: 6.8.1
nuxt: 3.8.0

What is Expected?

Tailwind viewer should be linked correctly and work.

What is actually happening?

Link when starting dev server is broken (missing slash) and even if navigating to _tailwind, it results in a 404.

[ineshbose]

Hi, can you share your Nuxt config please?

[michaelpumo]

Sure thing, it's as follows:

import svgLoader from 'vite-svg-loader'

export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: {
        lang: 'en-GB'
      },
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      meta: [
        { name: 'author', content: 'Site' },
        { name: 'revisit-after', content: '1 day' },
        { name: 'msapplication-TileColor', content: '#ffffff' },
        { name: 'theme-color', content: '#ffffff' }
      ],
      link: [
        { rel: 'preconnect', href: 'https://a2.storyblok.com' },
        {
          rel: 'apple-touch-icon',
          sizes: '180x180',
          href: '/apple-touch-icon.png'
        },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '32x32',
          href: '/favicon-32x32.png'
        },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '16x16',
          href: '/favicon-16x16.png'
        },
        { rel: 'manifest', href: '/site.webmanifest' },
        { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#000000' }
      ]
    },
    pageTransition: { name: 'page', mode: 'out-in' },
    layoutTransition: false
  },
  devtools: {
    enabled: false
  },
  gtag: {
    id: ''
  },
  modules: [
    '@nuxt/devtools',
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
    [
      '@nuxtjs/tailwindcss',
      {
        cssPath: '@/assets/css/app.css',
        configPath: 'tailwind.config.ts'
      }
    ],
    ['@storyblok/nuxt', { accessToken: process.env.NUXT_STORYBLOK_TOKEN }],
    '@vue-macros/nuxt',
    'nuxt-gtag',
    'nuxt-simple-sitemap'
  ],
  postcss: {
    plugins: {
      'tailwindcss/nesting': {},
      tailwindcss: {},
      autoprefixer: {}
    }
  },
  runtimeConfig: {
    public: {
      SSR: process.env.NUXT_SSR,
      STORYBLOK_TOKEN: process.env.NUXT_STORYBLOK_TOKEN,
      STORYBLOK_VERSION: process.env.NUXT_STORYBLOK_VERSION
    }
  },
  sitemap: {
    siteUrl: 'https://example.com'
  },
  ssr: process.env.NUXT_SSR === 'true' ? true : false,
  typescript: {
    strict: true
  },
  vite: {
    plugins: [
      svgLoader({
        svgo: false
      })
    ],
    vue: {
      script: {
        defineModel: true,
        propsDestructure: true
      }
    }
  }
})

I tried to create a minimal reproduction but Codesandbox just was not working. I can try again later if it's needed?

[ineshbose]

Thanks. We've got an active issue regarding the viewer, and I was mostly looking if you had SSR enabled. Can I ask you to look at https://github.com/nuxt-modules/tailwindcss/issues/561 and all issues linked to it please? I'll reopen the issue if you don't believe it's a separate issue and we can be provided with a reproduction please. 🙂