My preferred Vite template for FE challenges

Vite starters have essentially replaced CRA - Create React App as a simple/standard way to setup a basic client-side rendering React App.

This is what I use for any kind of Frontend challenges thrown at me.

Tech choices and why

1. Tailwind - I've gotten very used to Tailwind at this point, I'm much faster with it compared to plain old CSS or any pre-processor. I've included clsx for combining classes and conditionally adding tw classes. Also, read my post on why Tailwind is Amazing: kashyapsuhas.com/blog/post/tailwind-supremacy
2. TS - Because ...TS.
3. Sass - For times when Tailwind cannot support some complex styles. Or I have to edit the tailwind config file - which isn't good (for our case).
4. Generouted - Adds NextJS-like file-based routing. Super handy when you are doing multiple versions of something. Just create a file or folder under pages and the library should handle the rest.

Setup options

Here's the repository github.com/kashyap07/vite-react-tailwind-sass-routes-starter/

3 ways to use this:

1. Stackblitz

Just click this button and fork!

2. Use as a Github template

This project is set up as a template. When creating a new project, select this as the template.

3. Local development

Instructions for npm:

1. Create empty directory.

mkdir <my-vite-app>

cd <my-vite-app>

1. Install a cloning tool like degit

npm install -g degit

1. Clone this template

npx degit kashyap07/vite-react-tailwind-sass-routes-starter

And to run:

npm install

npm run dev

This should start around localhost:5173. Enjoy!