ReTail

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

Why · Features · Development · Deployment

Why

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, includes ESLint 9, and integrates useful utilities that improve the development experience with Tailwind CSS and other tools.

Features

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

Helpful Scripts

Tip

Use any package manager you prefer, such as npm or yarn, instead of pnpm.

• 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.
• pnpm clean: Remove the node_modules directory.

Development

Tip

Use any package manager you prefer, such as npm or yarn, instead of pnpm.

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.

Deployment

Tip

Use any package manager you prefer, such as npm or yarn, instead of pnpm.

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.