フロントエンドが苦手なデザイナーがAstroとTailwind.cssを使ってLPを作ったときのメモ

忘れそうなので書いておく。

Astro

画像置く場所

• cssで背景画像を指定する画像はsrc/assetsの中に入れると表示できないので、publicフォルダの中に入れてimagesなどもう１つフォルダを作ってそこに入れる（背景画像でもassetsの中に入れられる方法がいくつかあるようだが少々面倒）

• srcの中にあるファイルは最適化されてファイル名にhash値が含まれるようになるので、OG画像のファイルなど、ファイル名が変わってはいけないファイルはpublicに入れる

• public配下で相対パスを指定するとき、ルートにpublicは入れない　
  ダメ：/public/images/icon.png
  よい：/images/icon.png

• faviconはpublic直下で良さそう

js

• src配下にscripsフォルダ作ってそこに置く

Tailwind

• @applyは乱用せずボタンの汎用的なスタイルなどに部分的に使うと良さそう

• font-familyの指定はtailwind.config.jsで
  参考：https://tailwindcss.com/docs/font-family#customizing-your-theme

• 子孫セレクタの指定　
  &>　子要素
  &_　子孫要素
  例：flexboxを使用したカラムの指定

<div class="md:flex flex-wrap justify-center -mx-4 mt-12 [&>div]:px-4 [&>div]:mb-6 [&>div]:shrink-0 [&>div]:md:basis-1/2 [&>div]:xl:basis-1/3 [&>div]:md:w-1/2 [&>div]:xl:w-1/3">
 <div>カラム１</div>
 <div>カラム2</div>
</div>

参考：https://www.gaji.jp/blog/2022/10/19/11693/

---

ずっと業務でコードを書いてなくて久しぶりに書いたけど、嫌いではないんだけど相変わらず苦手だ。
Astroのコンポーネントはまだまだ使いこなせなさそう。ビルドするとassetsの画像を自動的にwebp形式にしてくれるのはとてもよい。