https://github.com/dlarroder/vite-react-ts-tailwind-starter
React starter template powered by vite + typescript + tailwind
https://github.com/dlarroder/vite-react-ts-tailwind-starter
eslint prettier reactjs tailwindcss typescript vitejs
Last synced: 3 months ago
JSON representation
React starter template powered by vite + typescript + tailwind
- Host: GitHub
- URL: https://github.com/dlarroder/vite-react-ts-tailwind-starter
- Owner: dlarroder
- License: mit
- Created: 2022-04-30T02:56:26.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-27T11:32:17.000Z (almost 4 years ago)
- Last Synced: 2025-10-25T07:46:17.877Z (8 months ago)
- Topics: eslint, prettier, reactjs, tailwindcss, typescript, vitejs
- Language: TypeScript
- Homepage:
- Size: 235 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Features
- ⚡️ [Vite](https://vitejs.dev/)
- ⚛ [React 18](https://beta.reactjs.org/)
- 🦾 [TypeScript](https://www.typescriptlang.org/), of course
- 🫀 [Jest](https://jestjs.io/) - unitary testing made easy
- 🎨 [Tailwind with JIT](https://tailwindcss.com/) - next generation utility-first CSS
- 🪢 [CSS Modules](https://github.com/css-modules/css-modules)
- 👑 [Atomic Design organization](https://bradfrost.com/blog/post/atomic-web-design/)
- 🗂 [Absolute imports](https://github.com/vitejs/vite/issues/88#issuecomment-762415200)
- 😃 [Hero icons](https://heroicons.com/)
- ☁️ Deploy on Netlify, zero-config
### Coding Style
- [ESLint](https://eslint.org/) - configured for React/Hooks & TypeScript
- [Prettier](https://prettier.io/)
### Dev tools
- [TypeScript](https://www.typescriptlang.org/)
- [Commit lint](https://github.com/conventional-changelog/commitlint) - helps your team adhering to a commit convention
- [Netlify](https://www.netlify.com/) - zero-config deployment
## Try it now!
### GitHub Template
[Create a repo from this template on GitHub](https://github.com/dlarroder/vite-react-ts-tailwind-starter/generate).
## Checklist
When you use this template, try follow the checklist to update your info properly
- [ ] Rename `name` and `author` fields in `package.json`
- [ ] Change the author name in `LICENSE`
- [ ] Change the title in `index.html`
- [ ] Change the favicon in `public`
- [ ] Modify the manifest in `public`
- [ ] Clean up the README's
And, enjoy :)
## Usage
### Development
Just run and visit http://localhost:3000
```bash
yarn start
```
### Build
To build the App, run
```bash
yarn build
```
And you will see the generated file in `dist` that ready to be served.
### Deploy on Netlify
Go to [Netlify](https://app.netlify.com/start) and select your repository, `OK` along the way, and your App will be live in a minute.
### Issues
#### Husky
If pre-commit hooks are not working be sure that you have installed husky: `husky install`.
By default this command should be triggered after yarn/npm deps are installed.
## Why
I have created several React apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.
So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. Feel free to tweak it or even maintains your own forks.