Open3
Astro 導入
reference
プロジェクトの新規作成
$ yarn create astro
yarn create v1.22.18
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-astro@1.1.0" with binaries:
- create-astro
[#############################################] 58/58
Welcome to Astro! (create-astro v1.1.0)
Lets walk through setting up your new Astro project.
✔ Where would you like to create your new project? … ./my-astro-site
✔ Which template would you like to use? › Just the basics (recommended)
✔ Template copied!
✔ Would you like to install yarn dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … yes
✔ Git repository created!
✔ How would you like to setup TypeScript? › Strict (recommended)
✔ TypeScript settings applied!
✔ Setup complete.
✔ Ready for liftoff!
Next steps
You can now cd into the my-astro-site project directory.
Run yarn dev to start the Astro dev server. CTRL-C to close.
Add frameworks like react and tailwind to your project using astro add
Stuck? Come join us at https://astro.build/chat
Good luck out there, astronaut.
✨ Done in 106.72s.
開発サーバの起動
yarn dev
yarn run v1.22.18
$ astro dev
🚀 astro v1.4.7 started in 69ms
┃ Local http://localhost:3000/
┃ Network use --host to expose
23:56:31 [serve] 404 /favicon.ico
Tailwind CSS の導入
reference
npx astro add tailwind
✔ Resolving packages...
Astro will run the following command:
If you skip this step, you can always run it yourself later
╭─────────────────────────────────────────────────╮
│ yarn add @astrojs/tailwind tailwindcss@^3.0.24 │
╰─────────────────────────────────────────────────╯
✔ Continue? … yes
✔ Installing dependencies...
Astro will generate a minimal ./tailwind.config.cjs file.
✔ Continue? … yes
Astro will make the following changes to your config file:
╭ astro.config.mjs ─────────────────────────────╮
│ import { defineConfig } from 'astro/config'; │
│ │
│ // https://astro.build/config │
│ import tailwind from "@astrojs/tailwind"; │
│ │
│ // https://astro.build/config │
│ export default defineConfig({ │
│ integrations: [tailwind()] │
│ }); │
╰───────────────────────────────────────────────╯
✔ Continue? … yes
success Added the following integration to your project:
- @astrojs/tailwind
src
|--page
|-- test.astro
test.astro
---
---
<div class="flex">
<div class="basis-1/4 bg-green-200">01</div>
<div class="basis-1/4 bg-gray-500">02</div>
<div class="basis-1/2 bg-red-300">03</div>
</div>
設定
import alias