Astro Setup: Svelte, Tailwind CSS, Vercel, Prettier and TypeScript

Building a stellar Astro project with Svelte, Tailwind CSS, Vercel, Prettier and TypeScript

Seppe Gadeyne

Freelance web developer

Welcome to this guide on setting up an Astro project that utilizes Svelte, Tailwind CSS, Vercel, Prettier, and TypeScript. By the end of this post, you'll have a fully configured and efficient Astro project that follows best practices and is ready for production. Let's get started!

Astro setup: Svelte, TailwindCSS, Vercel, Prettier and TypeScript
Astro setup: Svelte, TailwindCSS, Vercel, Prettier and TypeScript


  1. Getting started

  2. Initial Astro project Setup

  3. Adding Svelte, Tailwind CSS, Vercel, and Prettier

  4. Configuring Prettier

  5. Configuring Astro

  6. Configuring TypeScript

  7. Configuring Vercel

  8. Running the project

  9. Conclusion

Getting started

Before you can begin, ensure that you have the following prerequisites installed on your system:

Initial Astro project Setup

To begin, let's create a new Astro project with the following command:

npm create astro@latest

Astro will prompt you for specific details. Follow the instructions and choose the options that best align with your requirements. Selecting TypeScript and retaining the default settings for a coherent setup is essential.

Adding Svelte, Tailwind CSS, Vercel, and Prettier

Next, we will incorporate the desired integrations into our project. Execute the following commands from within the newly-created Astro folder, opting for the default choices when prompted:

npx astro add svelte
npx astro add tailwindcss
npx astro add vercel
npm install prettier prettier-plugin-astro prettier-plugin-svelte prettier-plugin-tailwindcss

Configuring Prettier

To set up Prettier, create a .prettierrc file in the root directory of your project and add the following configuration:

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

Also, create a .prettierignore file with the following content:


Configuring Astro

To configure Astro, modify the astro.config.mjs file as follows:

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
import tailwind from '@astrojs/tailwind';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  integrations: [svelte(), tailwind()],
  // output: ‘server’,
  adapter: vercel(),

By default, the adapter @astrojs/vercel is set up to utilize server-side rendering. However, for optimal performance, it is advisable to configure it for static output, which allows you to serve only exported HTML files.

Starting from version 2.1, Astro includes a built-in CLI command, astro check which performs TypeScript type checking on your project's .astro files. This command is utilized to identify bugs and type errors in CI before merging changes or deploying your site. To set this up, modify your package.json file as shown below. This configuration will notify you of any errors during development, resulting in a more seamless workflow and dependable code.

	"scripts": {
		"dev": "astro check --watch & astro dev"

Configuring TypeScript

To configure TypeScript, edit the tsconfig.json file and add the following settings:

   "compilerOptions": {
    "module": "esnext",
   	"baseUrl": ".",
   	"paths": {
       	"$lib/*": ["src/*"]
   "extends": "astro/tsconfigs/strict"

A helpful feature in this configuration is the paths setting, making importing components easier. For instance, you can import components using $lib/path/component.astro rather than ../../path/component.astro. This technique is known as Aliases.

Also, add the following declaration to src/env.d.ts file:

declare module '*.astro' {
  const Component: any;
  export default Component;

Configuring Vercel

For Vercel configuration, create a vercel.json file in your project's root directory. The following template can be used as a starting point:

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

Running the project

With everything set up, it's time to start the development server. Run the following command:

npm run dev

If you encounter any issues, try removing the node_modules and package-lock.json files, then run npm install followed by npm run dev.


Congratulations, you now have a fully configured Astro project with Svelte, Tailwind CSS, Vercel, Prettier, and TypeScript! This setup will help you create efficient and high-performing web applications. Best of luck with your project, and feel free to reach out if you need assistance.

Frequently asked questions


Let's dive deeper into some frequently asked questions.

Can I use other JavaScript frameworks like React or Vue with Astro?

Absolutely! Astro supports several popular JavaScript frameworks, including React and Vue. To add them to your project, follow the same steps as we did for Svelte but with the appropriate framework integration.

How can I deploy my Astro project on other platforms besides Vercel?

Astro projects can be deployed to platforms like Netlify, GitHub Pages, or Deno Deploy. The deployment process might differ slightly depending on the platform, but Astro's documentation guides deploying to various platforms.

Can I use other CSS frameworks with Astro?

Yes, Astro supports various CSS frameworks, and you can easily integrate them into your project using the same approach as we did with Tailwind CSS.

Is it possible to use other formatting tools besides Prettier?

Yes, you can use other formatting tools like ESLint or Stylelint. However, Prettier is a popular choice due to its extensive support for various languages and ability to integrate with most code editors.