An opinionated Vite/React/TypeScript/Tailwind starter according to my preferences
Create the project with pnpm and degit
pnpx degit wtoldt/vite-react-starter my-appIf the second argument is omitted (
my-app), the repo will be cloned to the current directory
- Replace "
vite-react-starter" with your repo name in key files:-
package.json -
vite.config.ts
-
- Update
index.htmlwith your project details- Update
<title>tag - Add your own favicon
- Update
- Replace this
README.mdfile with your own- Once you're familiar with what's included and how to get started, it's time to say goodbye
Install dependencies
pnpm installServe with hot reload at http://localhost:5173/<project-name>
pnpm run dev- Based off create vite --template react-swc-ts
- Vite v5
- TypeScript v5
- React v18
- Tailwind CSS
- CVA and CLSX
- Darkmode via selector strategy with small script that detects system preference
- Prettier
- @ianvs/prettier-plugin-sort-imports to sort imports in this order: react, built in modules,
@/, everything else, css - prettier-plugin-tailwindcss to sort tailwind classes
- prettier-plugin-classnames to break long tailwind strings into multi line strings
- prettier-plugin-merge to merge output of above plugins
- @ianvs/prettier-plugin-sort-imports to sort imports in this order: react, built in modules,
- Github pages deploy action
- Configured to use
pnpm
- Configured to use
- Disable React Devtools in production with a small script
- VsCode extensions
- VsCode workspace settings
- Use workspace TypeScript version
- Format on save/paste
- Tailwind CSS IntelliSense settings
- vite-tsconfig-paths
- so any defined paths in
tsconfig.jsonare usable in vite without having to copy them tovite.config.ts @/*path configured intsconfig.jsonandtsconfig.app.json
- so any defined paths in
- Why are there 3
tsconfigs?tsconfig.app.jsonconfigures your app (srcfolder) which runs in the browser environmenttsconfig.node.jsonconfigures Vite itself which is running on your computer in a Node environmenttsconfig.jsonis the main entry point- It contains configuration shared between the environments (like paths)
- It references the other two
tsconfigs
- Why is there a
safelist: ['dark']property in the Tailwind config?- If
darkclass is not mentioned anywhere in the codebase, Tailwind will inadvertently disable darkmode by removing thedarkclass as part of it's pruning process. Safelisting classes documentation
- If