# Vue designer tailwind styling problem
**URL:** https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961
**Category:** Vue Designer
**Tags:** bug, tailwind, vue-designer
**Created:** [June 24, 2024, 5:18am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961 "2024-06-24T05:18:57Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@hasan](https://forum.pinegrow.com/u/hasan)
#### Post date: [June 24, 2024, 5:18am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/1 "2024-06-24T05:18:57Z")
I just setup some Vue project with tailwind module, but i got problem every time when edit some element styling example color text, the changed not refresh automatically, I need to perform ALT+S to see the changes, is different when using sample project is automatically changed, I
attach my nuxt.config.ts file if there any wrong
```auto
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
modules:['@pinegrow/nuxt-module', "@nuxtjs/tailwindcss"],
pinegrow: {
liveDesigner: {
startupPage: 'app.vue',
tailwindcss: {
/* Please ensure that you update the filenames and paths to accurately match those used in your project. */
configPath: 'tailwind.config.js',
cssPath: '@/assets/css/tailwind.css',
// themePath: false, // Set to false so that Design Panel is not used
// restartOnConfigUpdate: true,
restartOnThemeUpdate: true,
},
//... existing config
},
},
})
```
and this is my terminal log when i perform changes
```auto
Pinegrow: Connected to http://127.0.0.1:40001/livedesigner
ℹ Vite client warmed up in 3125ms 11.56.50
ℹ Vite server warmed up in 2934ms 11.56.51
✔ Nuxt Nitro server built in 1267 ms nitro 11.56.52
ERROR [unhandledRejection] read ECONNRESET 11.57.13
at TCP.onStreamRead (node:internal/stream_base_commons:217:20)
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct 11.57.13
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x2) 11.57.24
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x3) 11.57.31
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x4) 11.57.36
ℹ nuxt.config.ts updated. Restarting Nuxt... 11.59.34
ℹ Using default Tailwind CSS file nuxt:tailwindcss 11.59.36
➜ DevTools: press Shift + Alt + D in the browser (v1.3.6) 11.59.36
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/ nuxt:tailwindcss 11.59.36
[11.59.38] Pinegrow: As configPath at D:\Data IT Development\Hasan (Frontend Programmer)\Data Hasan\WEB\garansi\tailwind.config.js was missing and D:\Data IT Development\Hasan (Frontend Programmer)\Data Hasan\WEB\garansi\tailwind.config.ts (different extension) was found, the later shall be used.
Pinegrow: Disconnected! 11.59.38
11.59.39
Pinegrow: Connected to http://127.0.0.1:40001/livedesigner
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css 11.59.41
ℹ Vite client warmed up in 3678ms 11.59.42
ℹ Vite server warmed up in 2962ms 11.59.42
✔ Nuxt Nitro server built in 1363 ms nitro 11.59.43
✔ Vite server hmr 7 files in 347.204ms
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct 11.59.58
✔ Vite server hmr 9 files in 193.043ms
ERROR [unhandledRejection] read ECONNRESET 12.25.37
at TCP.onStreamRead (node:internal/stream_base_commons:217:20)
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x2) 12.25.46
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x3) 12.25.49
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x4) 12.25.54
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x5) 12.26.00
ERROR [unhandledRejection] read ECONNRESET 12.26.04
at TCP.onStreamRead (node:internal/stream_base_commons:217:20)
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x6) 12.26.10
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x7) 12.26.13
```
---
### Author:  [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [June 24, 2024, 5:44am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/2 "2024-06-24T05:44:12Z")
Hi Hasan,
There are some HMR issues that the Nuxt team are still fixing with Nuxt CLI. Please refer to Daniel Roe’s response here - [ERROR [unhandledRejection] read ECONNRESET · Issue #23832 · nuxt/nuxt · GitHub](https://github.com/nuxt/nuxt/issues/23832#issuecomment-2152044678).
Meanwhile can you pin nuxi in your package.json like below, run `npm install`, re-open the project in Vue Designer, and try again. Let me know how you go!
```auto
"pnpm": {
"overrides": {
"nuxi": "3.8.4"
}
},
"overrides": {
"nuxi": "3.8.4"
},
```
---
### Author:  [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [June 24, 2024, 5:53am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/3 "2024-06-24T05:53:36Z")
If you still have this issue, please share your tailwind config file. Thanks!
---
### Author:  [@hasan](https://forum.pinegrow.com/u/hasan)
#### Post date: [June 24, 2024, 6:51am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/4 "2024-06-24T06:51:13Z")
There no any code inside my tailwind config file
---
### Author:  [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [June 24, 2024, 6:54am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/5 "2024-06-24T06:54:05Z")
If you haven’t yet, please open the config panel (clicking the nuxt/vue icon in the toolbar.
Scroll down to the section that shows instructions about installing the pinegrow tailwindcss plugin and other info. This is a required step for tailwind.
---
### Author:  [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [June 24, 2024, 6:56am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/6 "2024-06-24T06:56:15Z")
Refer to the tailwind config file in our sample apps if you want to understand how it looks like - [happy-paws-with-nuxt-tailwindcss/tailwind.config.ts at main · Pinegrow/happy-paws-with-nuxt-tailwindcss · GitHub](https://github.com/Pinegrow/happy-paws-with-nuxt-tailwindcss/blob/main/tailwind.config.ts).
---
### Author:  [@hasan](https://forum.pinegrow.com/u/hasan)
#### Post date: [June 24, 2024, 7:05am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/7 "2024-06-24T07:05:20Z")
i did but i got another error
```auto
'nuxt' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code 1
npm ERR! path D:\Data IT Development\Hasan (Frontend Programmer)\Data Hasan\WEB\garansi
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c nuxt prepare
npm ERR! A complete log of this run can be found in: C:\Users\PC IT-Server\AppData\Local\npm-cache\_logs\2024-06-24T06_52_17_417Z-debug-0.log
```
---
### Author:  [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [June 24, 2024, 7:09am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/8 "2024-06-24T07:09:44Z")
Please try deleting you `node_modules` folder, and `package-lock.json` file, and run `npm run install` again, and start your dev-server (`npm run dev`) and try again.
If you could push your project to github or give access to your github project (if private), then I can have a quick look.
---
### Author:  [@hasan](https://forum.pinegrow.com/u/hasan)
#### Post date: [June 24, 2024, 7:16am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/9 "2024-06-24T07:16:26Z")
ok is sucessful, but is still same, i need press ALT+S when i make changes, pls wait i will configure myproject for github
---
### Author:  [@hasan](https://forum.pinegrow.com/u/hasan)
#### Post date: [June 24, 2024, 7:26am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/11 "2024-06-24T07:26:32Z")
sorry for waiting [GitHub - BoneDeath/garansi](https://github.com/BoneDeath/garansi)
---
### Author:  [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [June 24, 2024, 7:30am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/12 "2024-06-24T07:30:05Z")
No worries. As per my original comment, pinning `nuxi` is required for now (I have added it below for you). So, replace your package.json with the below, `npm install` and try again.
```auto
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@nuxtjs/tailwindcss": "^6.12.0",
"nuxt": "^3.12.2",
"vue": "^3.4.29",
"vue-router": "^4.3.3"
},
"devDependencies": {
"@pinegrow/nuxt-module": "^3.0.56",
"@pinegrow/tailwindcss-plugin": "^3.0.20"
},
"pnpm": {
"overrides": {
"nuxi": "3.8.4"
}
},
"overrides": {
"nuxi": "3.8.4"
}
}
```
I will clone you repo when Im back home and test it out 👍🏽
---
### Author:  [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [June 24, 2024, 7:34am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/13 "2024-06-24T07:34:11Z")
Also, your `tailwind.config.ts` file shouldn’t be empty.
Add the below to it, and follow the config panel to complete the rest.
```auto
export default {
darkMode: 'class',
plugins: [
require('@pinegrow/tailwindcss-plugin').default(),
],
get content() {
const _content = [
'{.,app,*-layer}/components/**/*.{js,vue,ts}',
'{.,app,*-layer}/layouts/**/*.vue',
'{.,app,*-layer}/pages/**/*.vue',
'{.,app,*-layer}/plugins/**/*.{js,ts}',
'{.,app,*-layer}/app.vue',
'{.,app,*-layer}/*.{mjs,js,ts}',
'{.,*-layer}/nuxt.config.{js,ts}',
]
return process.env.NODE_ENV === 'production'
? _content
: [..._content, './_pginfo/**/*.{html,js}'] // used by Vue Desginer for live-designing during development
},
}
```
---
### Author:  [@hasan](https://forum.pinegrow.com/u/hasan)
#### Post date: [June 24, 2024, 7:37am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/14 "2024-06-24T07:37:27Z")
ok, I will wait for the result thankyou
---
### Author:  [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [June 24, 2024, 7:42am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/15 "2024-06-24T07:42:40Z")
Sure! Meanwhile try the above two files and share your experience from your end. The above two should ideally fix the HMR issue you were experiencing.
---
### Author:  [@hasan](https://forum.pinegrow.com/u/hasan)
#### Post date: [June 24, 2024, 7:44am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/16 "2024-06-24T07:44:29Z")
Yes the HMR issue was resolved
---
### Author:  [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [June 24, 2024, 7:51am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/17 "2024-06-24T07:51:22Z")
Cool, glad it works fine now. It was just the wiring 🙂
---
### Author:  [@hasan](https://forum.pinegrow.com/u/hasan)
#### Post date: [June 26, 2024, 3:18am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/18 "2024-06-26T03:18:16Z")
How update of this topic do you resolve the problem??
---
### Author:  [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [June 26, 2024, 3:50am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/19 "2024-06-26T03:50:23Z")
> [@hasan](#):
>
> Yes the HMR issue was resolved
Hi Hasan,
You confirmed that the HMR issue was resolved and it worked fine at your end. Did you have any other issues, for eg, the need to use Alt+S for HMR updates to be applied on the page?
Our config panel detects packages and provides instructions to make sure the appropriate wiring is established to ensure the app integrates with our design panel via the `@pinegrow/tailwindcss-plugin` and additionally provide intellisense as well. Please refer to the numbered list in the highlighted section.
I would like to understand where in the workflow you had issues following the config panel? Was it when you had to create a new `tailwind.config.ts` file? If you could provide more information, it would be helpful to understand the expected resolution. Thanks.
---
### Author:  [@hasan](https://forum.pinegrow.com/u/hasan)
#### Post date: [June 26, 2024, 7:23am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/20 "2024-06-26T07:23:13Z")
The HMR issue was resolved, but is still sometime to need press ALT+S after perform any changes
---
### Author:  [@hasan](https://forum.pinegrow.com/u/hasan)
#### Post date: [June 26, 2024, 7:33am UTC](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961/21 "2024-06-26T07:33:11Z")
No im just joking its work perfect like a charm 🙂
[Next page](https://forum.pinegrow.com/t/vue-designer-tailwind-styling-problem/8961.md?page=2)