ReTail

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

Why · Features · Development · Deployment

Tip

If you want to try out this template with Tailwind CSS v4.0 Beta, you can do so by switching to the tailwind-v4 branch .

Why

When I first started using the official Remix template with Vite, it lacked built-in support for Tailwind CSS. Setting up a new project meant repeatedly installing and configuring it manually. To streamline this process, I created my own starter template: ReTail (Remix + Tailwind).

Since then, the official Remix template has added Tailwind CSS support. However, I continue to use ReTail to define better defaults, include ESLint 9, and integrate helpful utilities that make working with Tailwind CSS and other packages more efficient.

Features

• Remix with Vite: The latest version of Remix with Vite as the build tool. That means, instant server start, fast HMR, and optimized builds for your full-stack app.
• Tailwind CSS: Build your UI faster with the utility-first CSS framework.
• Automatic wrapping of long class names: This template enables automatic wrapping for long class names with prettier-plugin-classnames.
• Automatic class sorting: This template enables automatic class sorting with prettier-plugin-tailwindcss.
• Font optimization: Preloaded local fonts with Fontsource.
• Format script: Format all your files with npm run format.
• ESLint Inspector: Ensure consistent code with ESLint 9 and the ESLint Config Inspector.

Development

Run the Vite dev server:

npm run 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

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

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