[Bug]: Vite starter guide has errors and unstyled components

[JacksonBowe]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: v18.17.1
Package manager: npm@10.0.0
CSS framework: tailwindcss@3.3.3
Client OS: Windows 11
Browser: Chrome

Link to minimal reproduction

https://www.shadcn-vue.com/docs/installation/vite.html

Steps to reproduce

Follow the steps in the Vite starter guide.

Describe the bug

Unstyle dropdown component.

Expected behavior

Styled dropdown component

Conext & Screenshots (if applicable)

[sadeghbarati]

You are right, we should include more information in installation parts, will update documentation 👍

---

Vite already has postcss dependency so don't need to install postcss again in you package.json

And also there is no need to add another file like postcss.config.js you can add it in your vite.config.ts with css.postcss.plugins[]
like

import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

import tailwind from 'tailwindcss';

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
  css: {
    postcss: {
      plugins: [
          tailwind(),
          // any other postcss plugins like autoprefixer
      ],
    },
  },
  plugins: [vue()],
});

Here the live example

https://stackblitz.com/edit/vitejs-vite-ennds8?file=vite.config.ts

[JacksonBowe]

@sadeghbarati Here is a minimal repo with the issue: https://github.com/JacksonBowe/shadcn-quasar

Some context:

• I've prefixed all tailwind classes with tw- to avoid clashes with existing classes.
• I've changed the name of all components to be at least multi-word to comply with Vue essential rules.

As you can see, most of the styling works no problems. It's just the dropdown that is unhappy.
Let me know if you need more info.