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 of yarn
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-