Astro Scaffolding: Svelte + Tailwind + Prettier

Create an Astro project with the basic template

pnpm create astro@latest -- --template basics

Add Svelte

pnpm astro add svelte

Add tailwindcss framework

pnpm astro add tailwind

Add prettier on devDependencies

pnpm install prettier prettier-plugin-astro prettier-plugin-svelte prettier-plugin-tailwindcss -D

Run the project

pnpm run dev

Configuring Prettier

See the .prettierrc file.

Configuring TypeScript

See the tsconfig.json file. Using aliases

{
 ...
    "@components/*": ["./src/components/*"],
 ...
}

Then import using the aliases in your project

import Button from '@components/controls/Button.astro';

📁 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src
│   ├── assets
│   │   └── astro.svg
│   ├── components
│   │   └── Welcome.astro
│   ├── layouts
│   │   └── Layout.astro
│   └── pages
│       └── index.astro
└── package.json

To learn more about the folder structure of an Astro project, refer to our guide on project structure.

💻 Commands

All commands are run from the root of the project, from a terminal: