nuxt-modules / tailwindcss

Tailwind CSS module for Nuxt
https://tailwindcss.nuxtjs.org
MIT License
1.66k stars 179 forks source link

Cannot find any path matching /_tailwind/, when using baseUrl: "/dev/". Tailwind Config Viewer route bug. #883

Closed richardevcom closed 1 month ago

richardevcom commented 2 months ago

Environment

I've only tested this on development environment, but I'm sure this can be replicated on production environment as well.

Here is my nuxt.config.ts:

export default defineNuxtConfig({
    compatibilityDate: "2024-04-03",
    css: ["~/assets/scss/main.scss"],
    modules: ["@nuxtjs/fontaine", "@tresjs/nuxt", "@nuxtjs/tailwindcss"],
    $development: {
        app: {
            baseURL: "/dev/",
        },
    },
})

Reproduction

Here is a live example: https://stackblitz.com/edit/github-1kxyp4?file=nuxt.config.ts. If you visit /dev/_tailwindcss in preview, you'll see that it works, but not the embedded config viewer in devtools.

Describe the bug

Whenever you set baseUrl (see config example in "Environment" above) to something other than / (for example, /dev/), Tailwind Config Viewer route for iframe within Nuxt DevTools uses /_tailwind/, but should be /dev/_tailwind/.

If I visit http://localhost:3000/dev/_tailwind/, it shows the config correctly, but the embedded Tailwind Config Viewer returns:

Cannot find any path matching /_tailwind/.

Additional context

Here is my package.json:

{
  "name": "nuxt-project",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxtjs/fontaine": "latest",
    "@nuxtjs/tailwindcss": "latest",
    "@tresjs/nuxt": "^3.0.2",
    "nuxt": "^3.12.4",
    "three": "^0.167.0",
    "vue": "latest"
  },
  "devDependencies": {
    "sass": "^1.77.8"
  }
}

Logs

richardevcom:~/nuxt-project$ bun run dev
$ nuxt dev
Nuxt 3.12.4 with Nitro 2.9.7

  ➜ Local:    http://localhost:3000/dev/
  ➜ Network:  use --host to expose

ℹ Using default Tailwind CSS file
  ➜ DevTools: press Shift + Alt + D in the browser (v1.3.9)

ℹ Tailwind Viewer: http://localhost:3000/dev/_tailwind/
✔ Vite client built in 55ms
✔ Vite server built in 1024ms

✔ Nuxt Nitro server built in 639 ms
ℹ Vite client warmed up in 0ms
ℹ Vite server warmed up in 852ms

 WARN  [Vue Router warn]: No match found for location with path "/_tailwind/"
 WARN  [Vue Router warn]: No match found for location with path "/_tailwind/"
richardevcom commented 1 month ago

Tested the #885 hotfix and it works on both environments with / and /dev/ or /dev as baseURL. Perhaps using ufo's cleanDoubleSlashes() is a shorter solution, when merging two strings.