---
title: "Syntro"
description: "A sleek, minimal landing page template built with Astro and Tailwind CSS — perfect for SaaS and startups."
url: "https://vercel.com/templates/astro/syntro"
links:
  repository: "https://github.com/bekturaslan/syntro-astro"
  demo: "https://syntro-astro.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Syntro&demo-description=A+sleek%2C+minimal+landing+page+template+built+with+Astro+and+Tailwind+CSS+%E2%80%94+perfect+for+SaaS+and+startups.&demo-url=https%3A%2F%2Fsyntro-astro.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F6MHIFeCh5ro9Z3SKzJA86L%2F4d60126c1b331bcc3dc4ab96561a9cb4%2Fog-image.png&project-name=Syntro&repository-name=syntro&repository-url=https%3A%2F%2Fgithub.com%2Fbekturaslan%2Fsyntro-astro&from=templates&skippable-integrations=1"
---

# Syntro

A sleek, minimal landing page template built with Astro and Tailwind CSS — perfect for SaaS and startups.

# SaaS & Startup Astro & Tailwind CSS Template

## License

This template is open-source software licensed under the [GPL-3.0 license](https://opensource.org/licenses/GPL-3.0). You are free to fork, modify, and use it in your projects.

## Attribution

Originally created by Michael Andreuzza. Modified, extended, and redistributed by Bektur Aslan with added sections and updated UI/UX for broader usage.

## This template is using Tailwind CSS V4

Now we are using only a CSS file. It's called `global.css` and it's located in the src/styles folder. Now we are eimporting Tailwind CSS on the same file instead of using the `tailwind.config.cjs` file. Like this:

```css
// Importing Tailwind CSS
@import "tailwindcss";
// Importing Tailwind plugins
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
```

Then to add your styles you will use the @theme directive. Like this:

```css
@theme {
  /* Your CSS goes here, see how styles are written on the global.css file */
}
```

Remember this is just in Alpha version, so you can use it as you want. Just keep an eye on the changes that Tailwind CSS is going to make.

## Template Structure

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

```
/
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json
```

Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the `public/` directory.

## Commands

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

| Command                | Action                                           |
| :--------------------- | :----------------------------------------------- |
| `npm install`          | Installs dependencies                            |
| `npm run dev`          | Starts local dev server at `localhost:3000`      |
| `npm run build`        | Build your production site to `./dist/`          |
| `npm run preview`      | Preview your build locally, before deploying     |
| `npm run astro ...`    | Run CLI commands like `astro add`, `astro check` |
| `npm run astro --help` | Get help using the Astro CLI                     |

## Want to learn more?

Feel free to check Astro's [documentation](https://docs.astro.build)

### Deploy

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/bekturaslan/syntro-astro)

---
Maintained & updated by Bektur Aslan. Contributions welcome.

## Related Templates

### [Tailwind CSS Blog](https://vercel.com/templates/next.js/tailwind-css-starter-blog)

Next.js blog using Markdown for content.

### [Astro Boilerplate](https://vercel.com/templates/astro/astro-boilerplate)

An Astro site, using the basics starter kit.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.