Vitersim is a robust CLI tool designed to streamline Vite React project setups by automating cleanup tasks and offering a Tailwind CSS integration option. With a single command, Vitersim
removes unnecessary files, resets styles, and sets up a clean, ready-to-code project. For developers who prefer Tailwind CSS, Vitersim
can quickly configure Tailwind CSS with essential files and settings, making it even easier to dive straight into custom styling.
-
Automatic Cleanup: Removes default files like
App.css
and theassets
folder. -
Component Reset: Rewrites
App.jsx
orApp.tsx
to a minimal "Hello World" component. - CSS Choice: Prompts for either vanilla CSS or Tailwind CSS setup.
-
Instant Setup: Directly runnable with
npx vitersim
—no installation required. - Improved Project Readiness: Ideal for developers looking for a clean, clutter-free start.
You can install vitersim
once globally using npm:
npm install -g vitersim
You can use Vitersim various vite
projects by using npx
:
npx vitersim
You can also install it locally in your project:
npm install vitersim --save-dev
Then, add a custom script in your package.json
:
"scripts": {
"clean": "vitersim"
}
Now, run the cleanup script with:
npm run clean
-
Start the Cleanup: Run
npx vitersim
ornpm run clean
. - Confirm Cleanup: When prompted, confirm if you'd like to proceed.
-
Choose Your CSS Setup: Select either
1
for Vanilla CSS or2
for Tailwind CSS. - Automatic Updates: Vitersim will delete unneeded files, reset the main component, and set up either vanilla or Tailwind CSS based on your choice.
To work effectively, your Vite React project should have this file structure:
project-root/
├── src/
│ ├── App.jsx (or App.tsx)
│ ├── App.css
│ ├── assets/
│ └── index.css
└── ...
After running Vitersim, your App.jsx
or App.tsx
will be reset to:
import React from 'react';
function App() {
return (
<div>
Hello World!
</div>
);
}
export default App;
If you selected Tailwind CSS during setup, index.css
will include Tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
Vitersim is a Node.js-based CLI tool that leverages fs
and path
modules for file management. It also uses chalk
for color-coded prompts and outputs, making the user interaction intuitive. For those opting for Tailwind CSS, Vitersim runs commands to initialize Tailwind and updates the tailwind.config.js
file with appropriate configurations.
Dependency | Version |
---|---|
Node.js | >= 14.0.0 |
Vite | >= 3.x |
React | >= 17.x |
If you run into issues:
- Ensure the required files and folders (
App.css
,assets
,App.jsx
orApp.tsx
, andindex.css
) are present. - Check that you have write permissions in your project directory.
For additional help, please visit the GitHub issues page.
We welcome contributions to improve Vitersim. To contribute:
- Fork the repository.
- Create a branch with your feature or bug fix.
- Submit a pull request with a description of your changes.
This project is licensed under the MIT License. For details, see the LICENSE file.
Developed by Selvin PaulRaj K. For feedback and contributions, feel free to connect!