Table of Contents

• How to create an Astro v6 project
  • Prerequisites
  • Create the project with the CLI wizard
  • Project structure
  • Start the development server
• Configure Tailwind CSS v4 in Astro
  • Installation
  • Configure the Vite plugin
  • Create the global styles file
  • Import styles in your project
  • Restart the server
• Generate the sitemap
  • Installation
  • Configuration
  • Additional options
    • Available options
  • Generate the sitemap
  • Useful commands
• Next steps

---

Prerequisites

Before starting, make sure you have:

• Node.js version 22.12.0 or higher (odd versions like Node 23 are not supported)
• A package manager: npm, pnpm or yarn

To check your Node version:

node -v

Create the project with the CLI wizard

The fastest way to create a new Astro project is using the interactive create astro wizard. Run the following command in your terminal:

npm create astro@latest

The wizard will guide you step by step:

1. Install create-astro: Confirm with y to install the package
2. Project location: Enter the folder name (e.g., ./my-project)
3. Starting template: Select Empty using the arrow keys
4. Install dependencies: Confirm with y
5. Initialize Git repository: Confirm with y (recommended)
6. TypeScript configuration: Select Relaxed or according to your preference

Once completed, navigate to your project directory:

cd my-project

Project structure

After installation, your directory will have the following structure:

├── node_modules/
├── public/
│   └── robots.txt
├── src/
│   └── pages/
│       └── index.astro
├── astro.config.mjs
├── package.json
├── tsconfig.json
└── package-lock.json

Start the development server

To view your project in the browser, run:

npm run dev

Astro will show a message confirming the server is running. By default, the project will be available at http://localhost:4321.

---

Configure Tailwind CSS v4 in Astro

Starting from Astro 5.2+, the recommended way to use Tailwind v4 is through the @tailwindcss/vite plugin. The old @astrojs/tailwind integration is deprecated for Tailwind v4.

Installation

From your project directory, install the required packages:

npm install tailwindcss @tailwindcss/vite

Configure the Vite plugin

Edit the astro.config.mjs file and add the Tailwind plugin:

// astro.config.mjs
// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";

// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

Create the global styles file

Create the directory and file src/styles/global.css:

@import "tailwindcss";

Import styles in your project

In your page or base layout, import the CSS file:

---
// src/pages/index.astro
import "../styles/global.css";
---

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

Alternatively, if you have a layout:

---
// src/layouts/Layout.astro
import "../styles/global.css";
---

Restart the server

After modifying the configuration, restart the development server:

npm run dev

---

Generate the sitemap

The sitemap is essential for your site’s SEO, allowing search engines to properly index all your pages.

Installation

Install the @astrojs/sitemap integration:

npm install @astrojs/sitemap

Configuration

Edit astro.config.mjs to add the integration:

// astro.config.mjs
// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
import sitemap from "@astrojs/sitemap";

// https://astro.build/config
export default defineConfig({
  site: "https://your-domain.com", // Required for sitemap
  vite: {
    plugins: [tailwindcss()],
  },
  integrations: [sitemap()],
});

Additional options

You can customize the sitemap with additional options:

integrations: [
  sitemap({
    changefreq: "weekly",
    priority: 0.7,
    lastmod: new Date(),
    entryLimit: 45000,
    filter: (page) => !page.includes("/admin"),
  }),
],

Available options

Option	Type	Description
changefreq	string	Change frequency: always, hourly, daily, weekly, monthly, yearly, never
priority	number	Priority from 0 to 1
lastmod	Date	Last modified date
entryLimit	number	Maximum entries per file (default: 45000)
filter	function	Function to filter pages
i18n	object	Configuration for multiple languages

Generate the sitemap

The sitemap is automatically generated when building:

npm run build

The files sitemap-index.xml and sitemap-0.xml will be generated in the output directory.

---

Useful commands

Command	Description
npm run dev	Start dev server with HMR
npm run build	Generate production build files
npm run preview	Preview the production build

---

Next steps

• Explore the official Astro documentation to learn more about components, layouts, and content
• Check the Tailwind CSS v4 upgrade guide to learn about changes from v3
• Learn about Content Collections for type-safe content management
• Configure i18n routing for multilingual sites