Tailwind CSSを導入した

Tailwind CSS を導入してみた。

ここ最近のWeb界隈ではCSSを自前で書くより、Tailwind CSSを使うことがデファクトスタンダードになりつつあるような気がしている。 正直、そんなに使ったこともないので、使ってみることで慣れておく。

導入手順

  1. AstroのTailwind CSSインテグレーションを追加
  2. Tailwind CSS向けにレイアウト・スタイルシートを整備

これらをやっていく。

AstroのTailwind CSSインテグレーションを追加

まずは Astroのドキュメント1 の手順通りに進めて、Astroにインテグレーションを追加する。

以下のコマンドを実行する。

pnpm astro add tailwind

すると以下のことをしてくれる。

  • AstroでTailwind CSSを利用するために必要なパッケージのインストール
  • astro.config.mjs にTailwind CSSを利用するための設定の追記

出力の最後に、自分でやらなきゃいけないことを指示してくれている。

  • 共通レイアウトにTailwindスタイルシートを追加する

今は src/styles/global.css がそれにあたるので、ここに追加する。

@import 'tailwindcss';

最後はレイアウトファイルでこのCSSをインポートすればよい。

---
import '../styles/global.css'
---

でも、Astroのブログテンプレートは全ページの共通レイアウトがなく、ブログの記事ページ向けのレイアウト しか存在しない。 index.astro などは <html> からすべて書かれている。

ちょっとイマイチな気がするので、全ページ共通のレイアウトを作っていく。

Tailwind CSS向けにレイアウト・スタイルシートを整備

というわけで、<RootLayout> コンポーネントを作る。

---
// src/layouts/RootLayout.astro
import BaseHead from '../components/BaseHead.astro'
import Footer from '../components/Footer.astro'
import Header from '../components/Header.astro'
import { SITE_DESCRIPTION, SITE_TITLE } from '../consts'
import '../styles/global.css'

const { title, description } = Astro.props
---

<!doctype html>
<html lang="ja">
  <head>
    <BaseHead
      title={title ? `${title} | ${SITE_TITLE}` : SITE_TITLE}
      description={description ?? SITE_DESCRIPTION}
    />
  </head>

  <body>
    <Header />
    <main>
      <slot />
    </main>
    <Footer />
  </body>
</html>

ベースは元々の index.astro で、h1とpがあったところを <slot /> にして、propsでtitleとdescriptionを受け取れるようにして、global.cssをインポートしている。

あとはすべてのページでこのRootLayoutを使うようにコードを書き換えていけば、完成。

実際のPull Request

上記の手順で行った変更の全容は daiksud/daiksud#4 で確認できる。

Footnotes

  1. ここではあえて英語のドキュメントのリンクにしている。というのも、英語版の方が明らかに充実していて、日本語版ではよく分からなかった。 ↩