DE-TEIUです。 今日はこのブログのソースのレイアウト微調整（というかほぼリファクタリング）を実施しました。 やったこととしては、単純にTailwindを導入してstyleタグ内に定義した諸々のCSSを消してTailwindのクラスをhtmlのclass属性に設定していっただけです。

AstroにTailwind導入

公式ドキュメントに書いてあるんですが、実質的には以下のコマンドを実行するだけ。

$ npx astro add tailwind

これを実行するだけで、Tailwindの導入が完了し、astro.config.mjsにそれっぽい設定が追記されます。以上。簡単。

ソース内に定義されているCSSをTailwindに置き換えてみる

変更前のトップページには、こんな感じでstyleタグの中にCSSがずらっと定義されていました。 （ほぼAstroのブログテンプレートにあったものをそのまま使ってました）

main {
  width: 960px;
}
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li {
  width: calc(50% - 1rem);
  margin-bottom: 1rem;
}
ul li * {
  text-decoration: none;
  transition: 0.2s ease;
}
ul li:first-child {
  width: 100%;
  margin-bottom: 1rem;
}
ul li:first-child img {
  width: 100%;
}
ul li:first-child .title {
  font-size: 2.369rem;
}
ul li img {
  margin-bottom: 0.5rem;
}
ul li a {
  display: block;
}
.title {
  margin: 0;
  color: rgb(var(--black));
  line-height: 1;
}
.date {
  margin: 0;
  color: rgb(var(--gray));
}
ul li a:hover h4,
ul li a:hover .date {
  color: rgb(var(--accent));
}
ul a:hover img {
  box-shadow: var(--box-shadow);
}
@media (max-width: 720px) {
  ul {
    gap: 0.5em;
  }
  ul li {
    width: 100%;
  }
  ul li:first-child {
    margin-bottom: 0;
  }
  ul li:first-child .title {
    font-size: 1.563em;
  }
}

ここに定義されているスタイルを少しずつ消して、対応するタグにTailwindのクラスを設定してきます。 （一気に消そうとすると「どこをどう直すんだっけ」って途中でわからなくなるので危険）

そして最終的にできたソースのhtml部分はこちら。

<main class="mx-auto">
  <section>
    <ul class="flex flex-wrap gap-8 list-none p-0 m-0 max-[720px]:gap-4">
      {
        posts.map((post, index) => (
          <li
            class={`mb-4 max-[720px]:w-full ${index === 0 ? "w-full" : "w-[calc(50%-1rem)]"}`}
          >
            <div class="window">
              <a href={`/blog/${post.id}/`} class="title-bar block">
                <div class="title-bar-text">{post.data.title}</div>
              </a>
              <a href={`/blog/${post.id}/`} class="window-body block">
                <img
                  class={`${index === 0 ? "w-full" : "mb-2"}`}
                  width={720}
                  height={360}
                  src={
                    post.data.heroImage === ""
                      ? "/default_eye_catch.png"
                      : post.data.heroImage
                  }
                  alt=""
                />
              </a>
              <div class="status-bar">
                <p class="status-bar-field text-gray-900">
                  <FormattedDate date={post.data.pubDate} />
                </p>
              </div>
            </div>
          </li>
        ))
      }
    </ul>
  </section>
</main>

…なんかまだリファクタリングの余地は全然ありそうだが、これでstyleタグを消してもほぼ同じレイアウトになった。ひとまず当初の目的は達成。 あとで他のページも同様に直していきます。以上。

---