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-name
with the title of your project —
npx vr2t project-name
- VR2T uses
yarn
as default to install dependencies. - If you want to use
npm
instead 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
.prettierrc
to your liking. - Delete the types &/ components folder if you don't need them.
GitHub
https://github.com/joshxfi/vr2t-generator#vr2t-boilerplate-generator-