nx-vue cannot serve the app with Tailwind and PostCSS install

[namdien177]

Current Behavior

nx-vue workspace with TailwindCSS (postCSS) cannot compile due to postCSS version error.

Expected Behavior

NX-Vue should be able to serve the app with Tailwind and PostCSS.

Steps to Reproduce

Reproducing NX-Vue Tailwind Error:
Create NX-Vue workspace

1. npx create-nx-workspace@latest
2. pnpm install @nrwl/cypress@^13.0.0 @nrwl/jest@^13.0.0 @nrwl/linter@^13.0.0 --save-dev
3. pnpm install @nx-plus/vue --save-dev
4. nx g @nx-plus/vue:app chat-lobby (use SCSS, add Router, add TypeScript)
5. nx serve chat-lobby

Confirmed to work after this step. NX-cli is installed with newest version globally.
Adding tailwind and its components by following guides from official page

1. Create postcss.config.js at the app folder.
2. Create tailwind.config.js is placed in the root directory
3. Create index.scss at /packages/chat-lobby/src
4. import “./index.scss” in main.ts
5. nx serve chat-lobby 
(Error)

Example Repo: https://github.com/namdien177/reproduce-nx-vue-tailwind
I'm currrently doing the same setup with a nx-angular repo. While the angular app run just fine, the Vue app fail to serve with this similar error.

Failure Logs

If you need more error logs, please tell me.

Environment

Plugin name and version:

nx-vue git:(main) nx report

NX WARNING Running global Nx CLI with PNPM may have issues.

Prefer to use "pnpm" (https://pnpm.io/cli/exec) to execute commands in this workspace.
TIP create a shortcut such as: alias pnx="pnpm nx --"

NX Report complete - copy this into the issue template

Node : 17.8.0
OS : darwin x64
pnpm : 6.32.3

nx : 13.9.5
@nrwl/angular : Not Found
@nrwl/cypress : 13.9.5
@nrwl/detox : Not Found
@nrwl/devkit : 13.9.5
@nrwl/eslint-plugin-nx : 13.9.5
@nrwl/express : Not Found
@nrwl/jest : 13.9.5
@nrwl/js : 13.9.5
@nrwl/linter : 13.9.5
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : Not Found
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : Not Found
@nrwl/web : Not Found
@nrwl/workspace : 13.9.5
typescript : 4.5.5
rxjs : 6.6.7

Community plugins:
@nx-plus/vue: 13.0.0

[ZachJW34]

Looks like vue-cli@4 doesn't support postcss8 so you have have to install a compat version of tailwind css until I update vue to use vue-cli@5. I pulled down your repo and got it working by installing:

yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 @tailwindcss/aspect-ratio @tailwindcss/line-clamp @tailwindcss/typography@0.4.1

I had to pin the version of typography since it was expecting colors that don't exist for that version of tailwind, but once I had those installed it was working. Let me know if it works for you.

[namdien177]

The temporary solution is working fine, thank you. It seems like I have to wait for vue-cli@5 to use the normal Tailwind version. Looking forward to that.