The short version

Run npm create astro@latest, add Svelte and Tailwind with npx astro add, keep Astro’s default static output for Vercel, format everything with Prettier, and let astro check catch type errors in CI.

Starting a new Astro project? A good setup takes about half an hour: scaffold the project, add the integrations you need, and let the tooling catch mistakes early. This guide covers the stack I use: Astro with Svelte islands, Tailwind CSS, a static Vercel deployment, Prettier, and strict TypeScript, updated for Astro in 2026.

Astro has changed considerably since this guide was first written, mostly for the better. The npx astro add command still does the heavy lifting, Tailwind has moved from a first-party wrapper to a Vite plugin, and astro check is now a dependable type-checking step for CI. The TypeScript configuration also requires less work, and the old .astro module declaration is no longer necessary.

The sections below cover the initial setup, integrations, and configuration for Prettier, Astro, TypeScript, and Vercel. Every command and example reflects the current setup. Each code block also has a language label so editors can handle it correctly.

Getting started

Before you begin, make sure you have the following on your machine:

  • Node.js 22.12.0 or higher (odd-numbered releases are not supported)
  • Visual Studio Code with these extensions: astro-vscode, prettier-vscode, svelte-vscode, and tailwindcss-intellisense

That’s it. Astro needs no global CLI and no Docker container to get going.

Initial Astro project setup

Create a new Astro project with:

bash
npm create astro@latest

Astro asks for a project name, whether you want a template, and which TypeScript strictness level to use. Choose “Strict” TypeScript and a minimal template unless you already know you need a themed starter. That gives you a clean setup without demo files to remove later.

Adding Svelte, Tailwind CSS, Prettier, and type checks

From inside the newly created project folder, add the integrations:

bash
npx astro add svelte
npx astro add tailwind
npm install --save-dev @astrojs/check typescript prettier prettier-plugin-astro prettier-plugin-svelte prettier-plugin-tailwindcss

Tailwind’s integration has changed. The npx astro add tailwind command now installs the Tailwind Vite plugin (@tailwindcss/vite), which is the recommended path for Tailwind 4. The integration commands update astro.config.mjs where needed, so you rarely have to configure them by hand. Accept the defaults when prompted.

Why this stack? Astro renders pages to static HTML by default and only ships JavaScript where an island needs it. That helps keep a static website fast. I use Svelte 5 for interactive parts because it has a small runtime, runes-based reactivity, and a comfortable component model. Tailwind CSS provides utility classes and can encode the tokens from a design system, keeping the styling predictable.

Configuring Prettier

Create a .prettierrc file in the root of your project:

json
{
  "useTabs": true,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "printWidth": 100,
  "plugins": ["prettier-plugin-astro", "prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
}

Create a .prettierignore too:

node_modules/**
vercel.json

Two details matter in 2026. First, pluginSearchDirs is gone. Prettier 3 no longer discovers plugins implicitly, so you must list them in plugins. Second, prettier-plugin-tailwindcss sorts classes for both Tailwind 3 and 4 configurations. If you use many utility classes, also set "tailwindStylesheet": "./src/styles/global.css" so the sorter can read your theme tokens.

Configuring Astro

A typical astro.config.mjs for this stack:

js
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  site: 'https://yourdomain.com',
  integrations: [svelte()],
  vite: {
    plugins: [tailwindcss()],
  },
  trailingSlash: 'never',
  output: 'static',
});

Astro’s default output is static, and a fully static site can deploy to Vercel without an adapter. The platform serves the exported HTML and assets from its CDN without per-request rendering. Run npx astro add vercel only when you need on-demand routes or Vercel-specific services such as image optimization; current versions import the adapter from @astrojs/vercel.

The astro check command type-checks .astro files. It requires @astrojs/check and TypeScript, which the install command above adds. Run it in CI to catch type errors before they are merged or deployed:

json
{
  "scripts": {
    "dev": "astro dev",
    "check": "astro check",
    "build": "astro check && astro build"
  }
}

Configuring TypeScript

Edit tsconfig.json:

json
{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

The paths setting gives you path aliases: import components as @/components/Button.astro instead of ../../components/Button.astro. This repo uses the same trick with @blocks/* for its block registry.

The old advice to declare a *.astro module shim in src/env.d.ts is obsolete. Since version 3, Astro has generated typed references for .astro imports automatically. If you still have such a declaration lying around, you can delete it.

Configuring Vercel

A static deployment needs little configuration after you connect the repository in Vercel. Here is a minimal vercel.json for the project root:

json
{
  "regions": ["fra1"],
  "cleanUrls": true,
  "trailingSlash": false,
  "redirects": [
    { "source": "/old-slug", "destination": "/new-slug", "permanent": true }
  ]
}

trailingSlash: false makes Vercel redirect /old-slug/ to /old-slug with a 308, which keeps your URLs canonical. When you migrate slugs, account for both trailing-slash variants so every old incoming link reaches the intended page.

Running the project

Start the development server with:

bash
npm run dev

If the project behaves oddly after an Astro upgrade, reinstall the dependencies before rewriting your configuration. Stale dependency state is often the culprit.

Conclusion

You now have an Astro project with Svelte, Tailwind CSS, Vercel, Prettier, and TypeScript: strict where it matters, static by default, and formatted automatically. The setup takes about half an hour and prevents unnecessary configuration drift later.

For the next step, read how optimizing Astro HTML after the build trims the final output, or why a static site can beat a classic CMS setup for content-driven projects.