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:
parent
57ee2fc017
commit
538fbba331
|
|
@ -77,7 +77,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
|
||||||
</TabMarkdown>
|
</TabMarkdown>
|
||||||
</TabsMarkdown>
|
</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
|
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 CLI
|
||||||
|
|
||||||
Run the `shadcn-vue` init command to setup your project:
|
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
|
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
|
### That's it
|
||||||
|
|
||||||
You can now start adding components to your project.
|
You can now start adding components to your project.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user