Astro + Tailwind Starter

A minimal Astro starter with Tailwind, TypeScript, and a clean file structure for marketing sites.

astrotailwindtypescript

Targets: Markdown

Code

Astro + Tailwind Starter

Quick start

bun create astro@latest my-site
cd my-site
bun add -d tailwindcss
bunx tailwindcss init -p

Suggested structure

src/
  components/
    Nav.astro
    Hero.astro
    FeatureGrid.astro
  layouts/
    Base.astro
  pages/
    index.astro
  styles/
    global.css

Tailwind setup (astro.config.mjs)

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";

export default defineConfig({
  integrations: [tailwind()],
});

Notes

Keep components small and composable.
Use Base.astro to centralize metadata and layout.

# Astro + Tailwind Starter

## Quick start

```bash
bun create astro@latest my-site
cd my-site
bun add -d tailwindcss
bunx tailwindcss init -p
```

## Suggested structure

```
src/
  components/
    Nav.astro
    Hero.astro
    FeatureGrid.astro
  layouts/
    Base.astro
  pages/
    index.astro
  styles/
    global.css
```

## Tailwind setup (astro.config.mjs)

```js
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";

export default defineConfig({
  integrations: [tailwind()],
});
```

## Notes

- Keep components small and composable.
- Use `Base.astro` to centralize metadata and layout.

A simple boilerplate to kick off a marketing or product site. Ships with Tailwind, TypeScript, and a basic layout structure.

Includes

Astro + Tailwind setup
/src/layouts/Base.astro scaffold
/src/pages/index.astro starter content
/src/components folder for UI blocks