A complete Astro setup: Svelte, Tailwind, Vercel

Astro has changed a lot 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 needs less work, and the old .astro module declaration is no longer necessary.

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

Prerequisites: Node.js 22.12 and VS Code

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

• Node.js 22.12.0 or higher. Odd-numbered releases such as v23 are not supported, according to the Astro install guide.
• 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 and type checks

From inside the newly created project folder, add Svelte and the tooling:

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

The astro add command registers the integration in astro.config.mjs and creates a svelte.config.js in your project root. Accept the defaults when prompted. If you install @astrojs/svelte by hand instead, create that file yourself, as the Astro Svelte integration guide describes. It lets you write TypeScript inside Svelte components:

import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
};

A Svelte component only ships JavaScript to the browser when you give it a client directive. Without one, Astro renders it to static HTML. For a component lower on the page, client:visible loads it when it scrolls into view:

---
import Counter from '../components/Counter.svelte';
---

<Counter client:visible />

Use client:load for a component that must work immediately, such as a menu toggle in the header.

Adding Tailwind CSS 4 to Astro

Tailwind CSS 4 runs as a Vite plugin in Astro, not as an Astro integration. The official Tailwind guide for Astro comes down to four steps:

1. Run npx astro add tailwind, or install the packages yourself with npm install tailwindcss @tailwindcss/vite.
2. Make sure tailwindcss() is in the vite.plugins array of astro.config.mjs. The astro add command does this for you; the full config is below.
3. Create src/styles/global.css with one line: @import "tailwindcss";. The command also scaffolds this file if it does not exist yet.
4. Import that stylesheet once in your shared layout frontmatter: import '../styles/global.css' (adjust the relative path).

Step 4 is the one people miss. The Vite plugin alone does not apply styles to a page, and astro add only reminds you to add the import.

If your classes still do not apply, check two things. Is global.css imported in the layout that renders the page? And is the old @astrojs/tailwind integration still listed under integrations? That wrapper belongs to Tailwind 3, so remove it when you use Tailwind 4.

Class sorting is a Prettier job. I cover that part, including what to do when classes stop sorting, in the guide to Prettier with Astro and Tailwind CSS.

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",
    "preview": "astro preview"
  }
}

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. 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:

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

To test the production build locally, build the site and serve the output:

npm run build
npm run preview

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

What you end up with

You now have an Astro project with Svelte, Tailwind CSS 4, Vercel, Prettier, and TypeScript. It is 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 see why a static site can beat a classic CMS setup for content-driven projects. Prefer to hand the build to someone else? You can work with an Astro specialist who starts from measurement rather than assumptions.