A refined React Router starter template with improved defaults for building full-stack web applications.

Why · Features · Development · Deployment

When I first started using Remix, the predecessor to React Router 7, I worked with the official Remix template with Vite. However, it lacked built-in support for Tailwind CSS, requiring me to manually install and configure it for every new project. To simplify this setup, I created my own starter template: ReTail (Remix/React Router + Tailwind CSS).

Since then, the official Remix template has added Tailwind CSS support, and React Router 7 has been released. Despite these updates, I continue to maintain ReTail because I think it provides better defaults than the default template, includes ESLint 9, and integrates useful utilities that improve the development experience.

• Automatic class name wrapping – Keeps long class names readable using prettier-plugin-classnames.
• Automatic class sorting – Ensures consistent class order with prettier-plugin-tailwindcss.
• ESLint 9 – Maintains code quality with ESLint and the ESLint Config Inspector.
• Font optimization – Preloads local fonts efficiently with Fontsource.
• React Router 7 – The latest version of React Router, paired with Vite for instant server start, fast HMR, and optimized full-stack builds.
• Remove unused code – Detect and remove unused code with Knip.
• Tailwind CSS 4 – Build UIs faster with the utility-first CSS framework and its new CSS-first configuration.
• TypeScript – Provides type safety and autocompletion for a better developer experience.
• Vite 6 – A pretty fast frontend build tool that delivers instant code serving and optimized bundling.

• pnpm check:unused: Find unused code in your project with Knip.
• pnpm clean: Remove the node_modules directory.
• pnpm format: Format all your files with Prettier.
• pnpm lint: Lint your code with ESLint.
• pnpm lint:inspect: Inspect your ESLint configuration with the ESLint Config Inspector.
• pnpm start: Run the app locally in production mode.
• pnpm typecheck: Generate TypeScript types for your app.

Run the Vite dev server:

pnpm dev

This will automatically open the app in your default browser and expose the host IP to your network, enabling better testing on devices like smartphones.

First, build your app for production:

pnpm build

Then run the app in production mode:

pnpm start

Now you'll need to pick a host to deploy it to.