VR2T Boilerplate Generator using Vite.js, React TypeScript, & Tailwind CSS

by React

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-