astro-tailwind-starter

by Ryota Hagihara

Minimal Setup for Astro Development

This is a starter kit pre-configured with Astro v6 + Tailwind CSS v4 + Prettier + ESLint. It eliminates the initial environment setup, allowing you to focus immediately on design and development.

Try Online

You can edit and preview the code instantly in your browser via the buttons below.

Features

Style-Agnostic: Contains no specific themes. However, Tailwind Typography is included for styled prose content, ensuring basic default styling without extra configuration.
Clean & Accessible: Pre-configured with Prettier and ESLint. Automatically maintains code quality and accessibility standards.
Standard Configuration: Uses mostly default settings. No complex custom rules; follows the official documentation.
Ready to Code: Includes only the essential configuration required to start development. Minimal setup time, ready to code.

Tech Stack

Tech	Description
Astro v6	The web framework for content-driven websites
Tailwind CSS v4	A utility-first CSS framework
Cloudflare Workers	Serverless platform running on a global network
Prettier	An opinionated code formatter
ESLint	A pluggable linting utility for JavaScript

Getting Started

1. Use as Astro Template

Create a project directly from your terminal using the Astro CLI.

npm create astro@latest -- --template ryotahagihara/astro-tailwind-starter

2. Use as GitHub Template

Click the "Use this template" button on the GitHub repository page to create a new repository.

3. Deploy via Services

Click the "Deploy" buttons below to automatically create a repository and deploy.

CLI Commands

Install Dependencies

npm install

Start Development Server

npm run dev

Build Production Site

npm run build

Preview Build Locally

npm run preview

Project Structure

Follows Astro's official directory structure conventions.

.
├── src/
│   ├── components/
│   │   ├── Header.astro    # Header component
│   │   └── Footer.astro    # Footer component
│   ├── layouts/
│   │   └── Layout.astro    # Base layout
│   ├── pages/
│   │   └── index.astro     # Home page
│   └── styles/
│       └── global.css      # Tailwind CSS settings
├── public/
│   └── favicon.svg         # Favicon
├── .prettierrc             # Prettier config
├── eslint.config.js        # ESLint config
├── astro.config.mjs        # Astro config
├── wrangler.jsonc          # Cloudflare Workers config
├── tsconfig.json           # TypeScript config
└── package.json            # Dependencies

Deployment

Automatically create a repository and deploy to hosting services via the buttons below.

Cloudflare Workers

Configured for Cloudflare Workers. Includes necessary configuration for deployment via Wrangler.

npm run build && npx wrangler deploy

Note: Requires Cloudflare authentication on first run.

Cloudflare recommends using Cloudflare Workers for new projects. See Deploy your Astro Site to Cloudflare | Docs for details.

Other Environments

Builds as a pure static site (SSG), compatible with Vercel, Netlify, GitHub Pages, or any standard server. See Deploy your Astro Site | Docs for details.

Resources

Contact

Please report issues or feature requests via GitHub Issues.

Credits

This template includes a "Built with astro-tailwind-starter" link in the footer. Keeping it is optional but greatly appreciated! It helps others discover this template and supports the project.

License

MIT License - See LICENSE for details.