Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/RoyRao2333/template-vite-react-ts-tailwind
Starter Vite template for React + Typescript + TailwindCSS + Prettier + ESLint build-in.
https://github.com/RoyRao2333/template-vite-react-ts-tailwind
react tailwindcss typescript vitejs
Last synced: about 2 months ago
JSON representation
Starter Vite template for React + Typescript + TailwindCSS + Prettier + ESLint build-in.
- Host: GitHub
- URL: https://github.com/RoyRao2333/template-vite-react-ts-tailwind
- Owner: RoyRao2333
- License: unlicense
- Created: 2022-10-18T03:29:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-30T11:43:53.000Z (4 months ago)
- Last Synced: 2024-05-30T13:05:53.707Z (4 months ago)
- Topics: react, tailwindcss, typescript, vitejs
- Language: TypeScript
- Homepage:
- Size: 52.7 KB
- Stars: 30
- Watchers: 1
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - template-vite-react-ts-tailwind - React + TypeScript + Tailwind CSS + Eslint + Prettier. (Get Started / Templates)
- awesome-vite - template-vite-react-ts-tailwind - React + TypeScript + Tailwind CSS + Eslint + Prettier. (Get Started / Templates)
README
template-vite-react-ts-tailwind
## Introduction
A starter [Vite](https://vitejs.dev/) template having:
- React
- TypeScript
- Vite
- Tailwind CSS
- Multiple eslint & prettier plugins installed
> [!IMPORTANT]
>
> The latest code of this template has updated Vite to version 5.0+, which requires [Node.js](https://nodejs.org/) version 18+ or 20+. Please upgrade if your package manager warns about it. Or you can use [this release](https://github.com/RoyRao2333/template-vite-react-ts-tailwind/releases/tag/release-2024.01.15) which is Vite v4.x.
>
> 该模板的最新代码中，已经将 Vite 的版本更新到了 5.0+，需要 18+ 或 20+ 版本的 [Node.js](https://nodejs.org/)。当你的包管理器发出警告时，请注意升级你的 Node.js 版本。如果你需要 Vite v4.x，请使用[这个版本](https://github.com/RoyRao2333/template-vite-react-ts-tailwind/releases/tag/release-2024.01.15)。
> [!IMPORTANT]
>
> The latest code of this template has updated TypeScript to version 5.0+. If you need TypeScript v4.x, please use [this release](https://github.com/RoyRao2333/template-vite-react-ts-tailwind/releases/tag/release-2023.03.08).
>
> 该模板的最新代码中，已经将 TypeScript 的版本更新到了 5.0+。如果你需要 TypeScript v4.x，请使用[这个版本](https://github.com/RoyRao2333/template-vite-react-ts-tailwind/releases/tag/release-2023.03.08)。
> [!TIP]
>
> This code repository may occasionally update its dependency versions. If the dependency versions in the latest code do not meet your expectations, please go to [Tags](https://github.com/RoyRao2333/template-vite-react-ts-tailwind/tags) section to download a previous version of this template. I will display the dependencies used in each Tag, please choose the one you need.
>
> 这个代码仓库可能会不定期更新其依赖包的版本。如果最新代码中依赖的版本不符合你的期望，请移步[Tags](https://github.com/RoyRao2333/template-vite-react-ts-tailwind/tags)下载之前的模板。每个Tag中使用的依赖都会展示在Tag详情中，请选择你需要的版本。
## Install
> This project uses [node](http://nodejs.org) and a package manager ([npm](https://npmjs.com), [yarn](https://yarnpkg.com/) or [pnpm](https://pnpm.io/)). Go check them out if you don't have them locally installed.
Then you need a copy of this repository. You can [download](https://github.com/RoyRao2333/template-vite-react-ts-tailwind) a copy as zip but [degit](https://github.com/Rich-Harris/degit) is recommended.
After you installed degit, please excute the following commands:
```sh
$ cd path-to-save-your-project
$ degit royrao2333/template-vite-react-ts-tailwind your-project-name
```
After getting a copy of this repository, you can use your package manager to install dependecies:
```sh
$ cd path-to-your-project
$ pnpm install
# npm install
# yarn install
```
## Usage
Let's run!
```sh
$ pnpm run dev
# npm run dev
# yarn run dev
```
> We've already implemented some recommended configurations in `.eslintrc.cjs`, `.eslintignore`, `.prettierrc.json5` and `.prettierignore`. Feel free to edit them if you have your own preferences.
## Related Efforts
- [Vite](https://github.com/vitejs/vite)
- [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss)
## Contributing
Feel free to dive in! [Open an issue](https://github.com/RoyRao2333/template-vite-react-ts-tailwind) or submit PRs.
## License
[MIT](LICENSE) © Roy Rao