Set up Astro with Svelte, Tailwind CSS, Vercel, Prettier, and TypeScript

I use Astro with Svelte for interactive components, Tailwind CSS for styling, and Prettier to keep formatting consistent. This guide walks through the project setup, strict TypeScript checks, and a static deployment to Vercel.

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:

npm create astro@latest

Astro asks where to create the project and which starter to use. Choose a minimal template unless you already need a themed starter, and keep the strict TypeScript configuration shown below. 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:

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.

Create src/styles/global.css with @import "tailwindcss"; if the command has not already created it. Import that stylesheet in your shared Astro layout frontmatter with import '../styles/global.css' (adjust the relative path). The Vite plugin alone does not apply styles to a page.

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:

{
  "useTabs": true,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "printWidth": 100,
  "tailwindStylesheet": "./src/styles/global.css",
  "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. With Tailwind 4, tailwindStylesheet is required: point it at your actual CSS entry file, here src/styles/global.css.

Configuring Astro

A typical astro.config.mjs for this stack:

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:

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

Configuring TypeScript

Edit tsconfig.json:

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

The paths setting gives you path aliases: import components as @/components/Button.astro instead of ../../components/Button.astro. My site 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:

{
  "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:

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.

---

Originally published on Straffe Sites.