Astro + TailwindCSS セットアップ

はじめに

サクッと環境構築してみたいよって方向けの記事になります

Astroとは？

https://docs.astro.build/ja/concepts/why-astro/

セットアップ

pnpmを使用します

$ pnpm create astro@latest
$ pnpm i
$ pnpx astro add tailwindcss

• src/styles/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

• src/layout/layout.astro

---
import "../styles/global.css"
---

• src/pages/index/astro

---
import Layout from "../layouts/Layout.astro";
---

<Layout title="Your website title">
	// ...
</Layout>