Vite + Tailwind CSS + Prettier starter template

This starter template comes with:

• Vite for "Next Generation Frontend Tooling".
• Only HTML & CSS, no Javascript (to use JS, just uncomment the script tag inside src/index.html and create a main.js file inside the src/ directory).
• Tailwind CSS for rapid prototyping.
• Prettier + Tailwind CSS plugin for formatting & automatically sorting classes based on the recommended class order.
• Inter variable font included with optimizations to prevent layout shift.
• Sensible defaults in the tailwind.config.js to create a custom design system for your project.

Get started

First, download the template.

pnpx degit buhodev/vite-tailwind-starter my-tailwind-app

Then, go inside the folder and install dependencies.

cd my-tailwind-app
pnpm install

After installing your dependencies, start the development server. The --open option opens the link in your browser automatically.

pnpm dev --open

To sort your Tailwind CSS classes & format your HTML, run:

pnpm format

Build for production

When you are ready, upload the /dist folder generated by the build command. Do not use the preview command in production to serve your website (it's meant to be used to preview your build on development mode only).

pnpm build
pnpm preview

Credits

This template is inspired by vite-tailwind-nojs-starter.

Font optimization best practices by Lee Robinson's Web Fonts in 2021 blog post.