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
This commit is contained in:
chachew 2024-04-18 15:47:59 -05:00 committed by GitHub
parent 57ee2fc017
commit 538fbba331
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -77,7 +77,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
</TabMarkdown>
</TabsMarkdown>
### 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.