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

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!


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.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Simple rule based matchmaking for your online game with support of Redcon(RESP) protocol

Fazendo ciΓͺncia de dados com docker