Nuxt3 Tailwind Viewer don't work #459

ilovesusu · 2022-04-19T15:13:08Z

nuxt3 use "@nuxtjs/tailwindcss": "^5.0.2"

Tailwind Viewer don't work

Canvas.vue:120 GET http://localhost:3000/_tailwind/config.json 404 (Not Found)

florian-lefebvre · 2022-04-19T18:06:32Z

I'm facing the same issue

atinux · 2022-04-20T22:09:39Z

It works on my end, do you have a reproduction?

yk-sgr · 2022-04-21T13:49:59Z

"@nuxtjs/tailwindcss": "^5.0.3"
"nuxt": "3.0.0-rc.1"

asen23 · 2022-04-21T15:35:42Z

It works on my end, do you have a reproduction?

https://codesandbox.io/s/smoosh-moon-oloppv
Navigate to https://oloppv.sse.codesandbox.io/_tailwind/
See network tab

BulgarianHealer · 2022-04-22T12:41:21Z

On fresh install

[Vue Router warn]: No match found for location with path "/_tailwind/"
[Vue Router warn]: No match found for location with path "/_tailwind/"
[Vue Router warn]: No match found for location with path "/_tailwind/"
[Vue Router warn]: No match found for location with path "/_tailwind/"
[Vue Router warn]: No match found for location with path "/_tailwind/css/app.aac7915f.css"
[Vue Router warn]: No match found for location with path "/_tailwind/css/app.aac7915f.css"
[Vue Router warn]: No match found for location with path "/_tailwind/css/app.aac7915f.css"
[Vue Router warn]: No match found for location with path "/_tailwind/css/app.aac7915f.css"
[Vue Router warn]: No match found for location with path "/_tailwind/js/app.eb7ca967.js"
[Vue Router warn]: No match found for location with path "/_tailwind/js/app.eb7ca967.js"
[Vue Router warn]: No match found for location with path "/_tailwind/js/app.eb7ca967.js"
[Vue Router warn]: No match found for location with path "/_tailwind/js/app.eb7ca967.js"
[Vue Router warn]: No match found for location with path "/_tailwind/js/chunk-vendors.d4b2e20c.js"
[Vue Router warn]: No match found for location with path "/_tailwind/js/chunk-vendors.d4b2e20c.js"
[Vue Router warn]: No match found for location with path "/_tailwind/js/chunk-vendors.d4b2e20c.js"
[Vue Router warn]: No match found for location with path "/_tailwind/js/chunk-vendors.d4b2e20c.js"
[Vue Router warn]: No match found for location with path "/_tailwind/js/chunk-vendors.d4b2e20c.js.map"
[Vue Router warn]: No match found for location with path "/_tailwind/js/chunk-vendors.d4b2e20c.js.map"
[Vue Router warn]: No match found for location with path "/_tailwind/js/chunk-vendors.d4b2e20c.js.map"
[Vue Router warn]: No match found for location with path "/_tailwind/js/chunk-vendors.d4b2e20c.js.map"
[Vue Router warn]: No match found for location with path "/_tailwind/config.json"
[Vue Router warn]: No match found for location with path "/_tailwind/config.json"
[Vue Router warn]: No match found for location with path "/_tailwind/js/app.eb7ca967.js.map"
[Vue Router warn]: No match found for location with path "/_tailwind/js/app.eb7ca967.js.map"
[Vue Router warn]: No match found for location with path "/_tailwind/js/app.eb7ca967.js.map"
[Vue Router warn]: No match found for location with path "/_tailwind/js/app.eb7ca967.js.map"
[Vue Router warn]: No match found for location with path "/_tailwind/favicon.ico"
[Vue Router warn]: No match found for location with path "/_tailwind/favicon.ico"
[Vue Router warn]: No match found for location with path "/_tailwind/favicon.ico"
[Vue Router warn]: No match found for location with path "/_tailwind/favicon.ico"

maxdzin · 2022-04-23T09:27:43Z

Same for me on the fresh Nuxt v3.0.0-rc1 app.
No match found for location with path... and the errors in console.

aresgun · 2022-04-23T11:55:40Z

There is a problem in here, the viewer isn't working with Nuxt v3.0.0-rc1

Butch78 · 2022-04-26T16:19:58Z

I'm getting the same errors..

If you run tailwind viewer with this command:

npx tailwind-config-viewer

It will work but It will take over the http://localhost:3000 port

goshku · 2022-05-01T16:14:12Z

Same error here, on fresh install.

jiblett1000 · 2022-05-01T18:01:51Z

Same here

aacassandra · 2022-05-03T17:42:58Z

Same here, can't open /_tailwind

/_tailwind/...css 404 not found
maybe config.json not found

sometime only show github logo,
somtime only show toggle switch for darkmode
sometime white screen

gluktd · 2022-05-10T05:41:33Z

Any updates on this?

jiblett1000 · 2022-05-10T06:33:40Z

There's a pull request for it

StanleyMasinde · 2022-05-10T07:42:23Z

There's a pull request for it

Could you please link it here?

StanleyMasinde · 2022-05-10T07:44:51Z

NVM i've seen it #460

fabis94 · 2022-05-17T08:27:35Z

Great that there's a fix for this :) Any estimates for when this will be merged?

jpgupta · 2022-05-18T23:50:09Z

If you run tailwind viewer with this command:

npx tailwind-config-viewer

It will work but It will take over the http://localhost:3000 port

@Butch78 - Thanks for the tip!

Seems like a fix is coming out soon but in the meantime I've found that you can use npx tailwind-config-viewer --port to start it on a different port, so you can run it in parallel with the nuxt app

eg $ npx tailwind-config-viewer --port 3002

lustremedia · 2022-06-03T13:48:35Z

I just tried to install tailwind with nuxt3 but the viewer did not work and out of the box no config was loaded etc. So it does not seem to work with nuxt3 without manual installation. The documentation is also still showing videos with nuxt2 ...

DesKevinMendez · 2022-06-03T15:39:41Z

Issue has been fixed with the versión 1.7.1 for tailwind-config-viewer

It has been merged and publish 3 days ago.
rogden/tailwind-config-viewer#58 (comment)

We need open a new PR for nuxt with the new version package.

If you need to know what version of tailwind-config-view you have, you must run the next command.

yarn list | grep tailwind-config-viewer in my case: I have 1.7.0

kieuminhcanh · 2022-08-27T03:32:23Z

404 again on http://localhost:3000/_tailwind/

"nuxt": "3.0.0-rc.8",
"@nuxtjs/tailwindcss": "^5.3.2",

lnfel · 2022-09-03T07:29:56Z

Same here.

"nuxt": "3.0.0-rc.8",
"@nuxtjs/tailwindcss": "^5.3.2",
"tailwindcss": "^3.1.8"

I was able to make this work with this config.

// nuxt.config.ts
export default defineNuxtConfig({
    css: ['~/assets/css/tailwind.css'],
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            },
        },
    },
    modules: [
        '@nuxtjs/tailwindcss'
    ]
})

And in my app.vue

<script lang="ts" setup>
    import './assets/css/tailwind.css'
</script>

But my extended color is not being read by tailwind viewer:

At this point I can ditch out @nuxtjs/tailwindcss and have minimal config in nuxt.config.ts:

export default defineNuxtConfig({
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            },
        },
    },
})

While still keeping the import './assets/css/tailwind.css' in app.vue.

broose-goose · 2022-10-15T17:35:28Z

Looks like a version bump broke it. 1.7.2 fails, but 1.71 works. per @DesKevinMendez

$ npm install --save-dev [email protected]

fernandolangaro · 2022-11-01T22:05:06Z

Same here, I'm getting this warns when tryinto to access http:localhost:3000/_tailwind

This path works, and displays all tailwind viewer data, but the warn is annoying.

StefanFlaschko · 2023-04-26T08:55:44Z

I needet to set "ssr: true" to make it work.

andreidmour · 2023-08-29T09:19:38Z

This problem persists in the latest version of nuxt 3 and tailwind module. Please open this again.

ineshbose · 2023-08-29T10:38:10Z

This problem persists in the latest version of nuxt 3 and tailwind module. Please open this again.

Do you have ssr: false? If yes, it could be #561, and if no, could you provide a reproduction please?

rob-kristie-mach · 2023-08-31T18:14:59Z

I have same issue with fresh install. Just shows a blank page, no viewer. Don't have SSR:false or anything. Install, add to nuxt.config as module run dev and try to go to /_tailwind.

`Nuxt 3.7.0 with Nitro 2.6.2 11:06:08 AM
11:06:09 AM
➜ Local: http://localhost:3000/
➜ Network: use --host to expose

ℹ Using default Tailwind CSS file nuxt:tailwindcss 11:06:09 AM
✔ Nuxt DevTools is enabled v0.8.2 (experimental) 11:06:09 AM
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/ nuxt:tailwindcss 11:06:09 AM

WARN 11:06:10 AM

[11:06:10 AM] WARN warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.

WARN warn - https://tailwindcss.com/docs/content-configuration 11:06:10 AM

ℹ Vite client warmed up in 825ms 11:06:11 AM
✔ Nitro built in 337 ms nitro 11:06:11 AM
^C
robkristie@Robs-MacBook-Pro-2 attentity-revamp % npm run dev

dev
nuxt dev

Nuxt 3.7.0 with Nitro 2.6.2 11:08:35 AM
11:08:35 AM
➜ Local: http://localhost:3000/
➜ Network: use --host to expose

ℹ Using default Tailwind CSS file nuxt:tailwindcss 11:08:36 AM
ℹ hmr update /pages/index.vue, /node_modules/tailwindcss/tailwind.css 11:10:53 AM
✔ Vite server hmr 8 files in 393.678ms
[Vue Router warn]: No match found for location with path "/_tailwind"
[Vue Router warn]: No match found for location with path "/_tailwind"
[Vue Router warn]: No match found for location with path "/_tailwind"
[Vue Router warn]: No match found for location with path "/_tailwind"
[Vue Router warn]: No match found for location with path "/css/app.aac7915f.css"
[Vue Router warn]: No match found for location with path "/css/app.aac7915f.css"
[Vue Router warn]: No match found for location with path "/css/app.aac7915f.css"
[Vue Router warn]: No match found for location with path "/css/app.aac7915f.css"
[Vue Router warn]: No match found for location with path "/js/app.487587de.js"
[Vue Router warn]: No match found for location with path "/js/app.487587de.js"
[Vue Router warn]: No match found for location with path "/js/app.487587de.js"
[Vue Router warn]: No match found for location with path "/js/app.487587de.js"
[Vue Router warn]: No match found for location with path "/js/chunk-vendors.d4b2e20c.js"
[Vue Router warn]: No match found for location with path "/js/chunk-vendors.d4b2e20c.js"
[Vue Router warn]: No match found for location with path "/js/chunk-vendors.d4b2e20c.js"
[Vue Router warn]: No match found for location with path "/js/chunk-vendors.d4b2e20c.js"
[Vue Router warn]: No match found for location with path "/_tailwind"
[Vue Router warn]: No match found for location with path "/_tailwind"
[Vue Router warn]: No match found for location with path "/_tailwind"
[Vue Router warn]: No match found for location with path "/_tailwind"`

fabis94 · 2023-08-31T18:46:04Z

@rob-kristie-mach Did you maybe open /_tailwind not /_tailwind/? There's been a weird bug for a while where if you don't add that trailing slash, it's just gonna show a blank page

pepongucte266 · 2023-10-16T13:55:55Z

I'm facing the same issue
"@nuxtjs/tailwindcss": "^6.8.0",

blowsie · 2023-10-26T08:54:30Z

Same issue with latest packages

  "dependencies": {
    "@pinia/nuxt": "^0.5.1",
    "@vueuse/nuxt": "^10.5.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/tailwindcss": "^6.8.0",
    "@pinia-plugin-persistedstate/nuxt": "^1.1.2",
    "nuxt": "^3.8.0",
    "vue": "^3.3.6",
    "vue-router": "^4.2.5"
  }

lustremedia · 2023-10-26T23:46:15Z

Same issue with latest packages

  "dependencies": {
    "@pinia/nuxt": "^0.5.1",
    "@vueuse/nuxt": "^10.5.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/tailwindcss": "^6.8.0",
    "@pinia-plugin-persistedstate/nuxt": "^1.1.2",
    "nuxt": "^3.8.0",
    "vue": "^3.3.6",
    "vue-router": "^4.2.5"
  }

"devDependencies": {
"@nuxt/devtools": "latest",
"@nuxtjs/color-mode": "^3.3.0",
"@nuxtjs/tailwindcss": "^6.8.0",
"@pinia-plugin-persistedstate/nuxt": "^1.1.2",
"@pinia/nuxt": "^0.5.1",
"nuxt": "^3.8.0",
"sass": "^1.69.4",
"vue": "^3.3.6",
"vue-router": "^4.2.5"
}

I have the same setup and it is working for me ....
¯_(ツ)_/¯ what is your OS?

wJoenn · 2023-11-03T21:22:10Z

Same issue on a fresh install

  "devDependencies": {
    "@nuxt/devtools": "^1.0.0",
    "@nuxtjs/tailwindcss": "^6.9.4",
    "nuxt": "^3.8.0",
    "vue": "^3.3.7",
    "vue-router": "^4.2.5"
  }

The viewer works fine when launched from http://localhost:3000/_tailwind/ but it won't work in the devtool itself
@atinux could it be an issue with the devtool ?

I created a reproduction on stackblitz to make sure it wasn't coming from WSL or my setup
https://stackblitz.com/edit/nuxt-starter-jwoekj?file=nuxt.config.ts

ineshbose · 2023-11-03T21:54:41Z

Same issue on a fresh install
  "devDependencies": {
    "@nuxt/devtools": "^1.0.0",
    "@nuxtjs/tailwindcss": "^6.9.4",
    "nuxt": "^3.8.0",
    "vue": "^3.3.7",
    "vue-router": "^4.2.5"
  }
The viewer works fine when launched from http://localhost:3000/_tailwind/ but it won't work in the devtool itself
could it be an issue with the devtool ?

I created a reproduction on stackblitz to make sure it wasn't coming from WSL or my setup
https://stackblitz.com/edit/nuxt-starter-jwoekj?file=nuxt.config.ts

You navigated to /modules/_tailwind. Please go to /_tailwind and it should work.

ineshbose · 2023-11-03T21:55:13Z

Can I please get a confirmation if this is only happening in ssr: false? (thumbs up or down)

wJoenn · 2023-11-03T22:49:46Z

@ineshbose I don't get to choose what I navigate to within the devtool.
I just click on the tailwind viewer button and that's what I'm redirected to.

Feel free to have a look at the stackblitz I shared and tell me if you see anything I've done wrong in nuxt.config.ts

dhait · 2023-11-05T19:03:21Z

@fabis94 Solution above worked for me -- you NEED the trailing slash. This was on a fresh install.

ineshbose · 2023-11-05T19:10:29Z

I'm able to see the issues with the viewer..

You need a trailing slash, but it shouldn't be (we put the redirect in the middleware)
When you do have the trailing slash, tailwind-config-viewer gets 404 while fetching /_tailwind/config.json
(I'm still investigating what happens in ssr: false)

Please lets continue discussing this issue in #561

ilovesusu added the bug Something isn't working label Apr 19, 2022

This was referenced Apr 19, 2022

Add Prefix for Router rogden/tailwind-config-viewer#58

Merged

fix: add prefix for tailwind viewer route #460

Merged

danielroe mentioned this issue Apr 21, 2022

http://localhost:9901/_tailwind/config.json 404 (Not Found) nuxt/nuxt#13781

Closed

harlan-zw mentioned this issue May 26, 2022

feat: add tailwind.config.ts support #483

Merged

7 tasks

tobiasdiez mentioned this issue Jun 24, 2022

Issues depending on external libraries JabRef/JabRefOnline#770

Open

51 tasks

atinux closed this as completed Jul 7, 2022

nuxt-modules locked and limited conversation to collaborators Nov 5, 2023

Nuxt3 Tailwind Viewer don't work #459

Nuxt3 Tailwind Viewer don't work #459

Comments

ilovesusu commented Apr 19, 2022

florian-lefebvre commented Apr 19, 2022

atinux commented Apr 20, 2022

yk-sgr commented Apr 21, 2022

asen23 commented Apr 21, 2022

BulgarianHealer commented Apr 22, 2022 • edited Loading

maxdzin commented Apr 23, 2022

aresgun commented Apr 23, 2022

Butch78 commented Apr 26, 2022 • edited Loading

goshku commented May 1, 2022

jiblett1000 commented May 1, 2022

aacassandra commented May 3, 2022

gluktd commented May 10, 2022

jiblett1000 commented May 10, 2022

StanleyMasinde commented May 10, 2022

StanleyMasinde commented May 10, 2022

fabis94 commented May 17, 2022

jpgupta commented May 18, 2022 • edited Loading

lustremedia commented Jun 3, 2022

DesKevinMendez commented Jun 3, 2022

kieuminhcanh commented Aug 27, 2022

lnfel commented Sep 3, 2022

broose-goose commented Oct 15, 2022

fernandolangaro commented Nov 1, 2022

StefanFlaschko commented Apr 26, 2023

andreidmour commented Aug 29, 2023

ineshbose commented Aug 29, 2023 • edited Loading

rob-kristie-mach commented Aug 31, 2023 • edited Loading

fabis94 commented Aug 31, 2023 • edited Loading

pepongucte266 commented Oct 16, 2023

blowsie commented Oct 26, 2023

lustremedia commented Oct 26, 2023 • edited Loading

wJoenn commented Nov 3, 2023 • edited Loading

ineshbose commented Nov 3, 2023

ineshbose commented Nov 3, 2023

wJoenn commented Nov 3, 2023 • edited Loading

dhait commented Nov 5, 2023

ineshbose commented Nov 5, 2023

BulgarianHealer commented Apr 22, 2022 •

edited

Loading

Butch78 commented Apr 26, 2022 •

edited

Loading

jpgupta commented May 18, 2022 •

edited

Loading

ineshbose commented Aug 29, 2023 •

edited

Loading

rob-kristie-mach commented Aug 31, 2023 •

edited

Loading

fabis94 commented Aug 31, 2023 •

edited

Loading

lustremedia commented Oct 26, 2023 •

edited

Loading

wJoenn commented Nov 3, 2023 •

edited

Loading

wJoenn commented Nov 3, 2023 •

edited

Loading