VR2T Boilerplate Generator
π¨
VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS
Why Use VR2T?
- Without VR2T, setting up a project would be:
$ yarn create vite my-project --template react-ts
$ cd my-project
$ yarn install
$ yarn add tailwindcss postcss autoprefixer
$ yarn tailwindcss init -p
# adding tailwind.css...
# @tailwind base;
# @tailwind components;
# @tailwind utilities;
# turning jit mode on tailwind.config.js...
# adding paths to purge...
# import './tailwind.css'
# deleting unnecessary files...
# etc...
- With VR2T Boilerplate Generator, it's simply:
npx vr2t
# installing dependencies, setting up tailwind with jit, etc...
# all of that is already configured with VR2T!
Installation
npx vr2t
- You can also directly specify the project name.
- Replace the
project-namewith the title of your project β
npx vr2t project-name
- VR2T uses
yarnas default to install dependencies. - If you want to use
npminstead ofyarnβ
npx vr2t project-name --npm
π your-project
ββ π src
β ββ π components
β ββ π types
β β ββ π main.d.ts
β ββ ββ π props.d.ts
ββ π .gitignore
ββ π .prettierrc
ββ π index.html
ββ π package.json
ββ π postcss.config.js
ββ π tailwind.config.js
ββ π tsconfig.json
ββ π vite.config.json
- Customize the
.prettierrcto your liking. - Delete the types &/ components folder if you don't need them.
15 Dec 29, 2022
26 Dec 4, 2022
141 Dec 29, 2022
43 Dec 14, 2022
1 Mar 22, 2022
8 Jul 14, 2022
20 Oct 27, 2022
66 Dec 22, 2022
247 Dec 29, 2022
6 Dec 31, 2022
16 Nov 12, 2022
299 Jan 5, 2023
81 Dec 24, 2022
25 Dec 18, 2022
11 Dec 13, 2022
239 Jan 4, 2023
7 Mar 14, 2022
22 Dec 18, 2022