Open3

Astro 導入

soimyysoimyy

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

soimyysoimyy

Tailwind CSS の導入

reference
https://docs.astro.build/en/guides/integrations-guide/tailwind/

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>