[Bug]: not showing any css effect on Vite created Vue3

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.4.1

What browser are you using?

Chrome

Reproduction repository

create a vue-ts project with latest version of vite, and use @headlessui/vue Dialog component

Describe your issue

The component itself works. But not as expect. It’s like there’s no layout at all, pure text lay below the content on the upper code.

Here’s my dependencies:

"dependencies": {
    "@headlessui/vue": "^1.4.1",
    "@heroicons/vue": "^1.0.5",
    "@metamask/detect-provider": "^1.2.0",
    "@vue/cli": "^4.5.14",
    "autoprefixer": "^10.3.7",
    "ethers": "^5.5.1",
    "global": "^4.4.0",
    "markdown-it": "^12.2.0",
    "postcss": "^8.3.11",
    "secure-ls": "^1.2.6",
    "tailwindcss": "^2.2.17",
    "vite-svg-loader": "^2.2.0",
    "vue": "^3.2.16",
    "vue-i18n": "^9.2.0-beta.15",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@types/markdown-it": "^12.2.3",
    "@typescript-eslint/eslint-plugin": "^5.1.0",
    "@typescript-eslint/parser": "^5.1.0",
    "@vitejs/plugin-vue": "^1.9.3",
    "eslint": "^8.1.0",
    "eslint-plugin-vue": "^7.20.0",
    "rollup-plugin-visualizer": "^5.5.2",
    "typescript": "^4.4.3",
    "vite": "^2.6.4",
    "vue-tsc": "^0.3.0"
  },

[minarc]

@bitweedx64 I’m having same problem with Vite. Can you tell me what I need to setup more?

[bitweedx64]

@bitweedx64 what was the problem? I assume you figured it out since you closed this issue

It’s just me being dumb. I thought headless UI is packed with default styles just like other UI Frameworks, but the short example in the documentation is only the minimal setup. Which means it is behaving as expected. Sorry for the worthless issue.