From 538fbba33131a18a7108cd0698b1130962ce9805 Mon Sep 17 00:00:00 2001 From: chachew Date: Thu, 18 Apr 2024 15:47:59 -0500 Subject: [PATCH] Update vite.md There was some missing steps that update the main.ts file to add references to the Tailwind css file. This would then break the Shadcn UI when the project was run with npm run dev. I went through the docs half a dozen times and could never get the project to work correctly until referencing some stackblitz examples that had the correct configuration for Vite --- .../www/src/content/docs/installation/vite.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md index e4f1747b..b46ded0e 100644 --- a/apps/www/src/content/docs/installation/vite.md +++ b/apps/www/src/content/docs/installation/vite.md @@ -77,7 +77,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co -### Edit tsconfig.json +### Update tsconfig.json Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error @@ -126,6 +126,10 @@ export default defineConfig({ }) ``` +### Delete default Vite styles + +Delete the default Vite stylesheet `./src/style.css` + ### Run the CLI Run the `shadcn-vue` init command to setup your project: @@ -150,6 +154,19 @@ Configure the import alias for components: › @/components Configure the import alias for utils: › @/lib/utils ``` +### Update main.ts + +Remove import for style.css and add add tailwind style import `import './assets/index.css'` + +```typescript {4} +import { createApp } from 'vue' +~~import './style.css'~~ +import App from './App.vue' +import './assets/index.css' + +createApp(App).mount('#app') +``` + ### That's it You can now start adding components to your project.