2手で完了!? Astroフレームワークにtailwindcssを追加する方法

web制作

※本記事はプロモーションを含みます

目次
  1. はじめに
  2. 土台の構築 – Astroプロジェクトの作り方
  3. インテグレーションの追加 – tailwindcssの追加
  4. 確認と公開用ファイル生成の流れ – プレビューとデプロイ
  5. まとめ

はじめに

静的サイトジェネレーターAstroフレームワークにCSSフレームtailwindcssを導入する方法を記します。

tailwindcssの導入によってクラス名に悩んだりメディアクエリを無駄に増やすことを避けられて制作がスムーズに進められます。

前提

  • node.jsは既にインストールされている状態を想定しています。
    ※node.jsって何？な人は「node.js インストール」でGoogle検索するか今ならChatGPTに質問すると環境構築の方法を知ることができます。
  • 検証はWindowsのwsl2内で行っています。

土台の構築 – Astroプロジェクトの作り方

プロジェクトのルートディレクトリで下記コマンドを実行します。

npm create astro@latest

# 以下の質問が出されるので答えるとプロジェクトが生成されます    
# 1.プロジェクトの設置場所をどこにするか？
# 2.Typescriptは使用するか？
# 3.テンプレートは使用するか？
# 4.依存ファイルはインストールするか？
# 5.Gitレポジトリを作成するか？

これでAstroにプロジェクトを生成することができました。

インテグレーションの追加 – tailwindcssの追加

npx astro add tailwind

# 以下の質問がだされるので全てyesと答えるとtailwindcssが導入されます   
# 1.astroがコマンドを実行してもよいですか？
# 2.tailwind.config.mjsファイルを生成してもよいですか？
# 3.コンフィグファイルに追記してもよいですか？

上記コマンドでtailwind.config.mjsが生成されます。

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
        extend: {},
    },
    plugins: [],
}

また、astro.conifg.mjsファイルが以下のように更新されます。

import { defineConfig } from 'astro/config';

import tailwind from '@astrojs/tailwind';

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind()]
});

これだけでtailwindcssの導入は完了です！

あとはHTMLのクラスにtailwindcssのクラスを追加するだけでtailwindcssのスタイルが反映されます。

確認と公開用ファイル生成の流れ – プレビューとデプロイ

確認用に下記HTMLを書き込みました。

---

---

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <meta name="viewport" content="width=device-width" />
  <meta name="generator" content={Astro.generator} />
  <title>Astro</title>
</head>
<body>
  <div class="container mx-auto px-20">
    <h1 class="font-mono text-8xl mb-4">Astro</h1>
    <p class="text-2xl mb-5 bg-slate-100 p-3">Tailwindcssの導入</p>

    <section>
      <h2 class="text-2xl bg-purple-300 p-3 mb-4">Astroインテグレーションとは</h2>
      <p class="mb-4">
Astro.jsは、静的サイトジェネレーターであり、最新のフロントエンド技術を活用しながら、高速で最適化されたWebサイトを構築するためのツールです。その中で「インテグレーション」とは、Astroに外部ライブラリやフレームワークを組み込むことで、追加の機能や柔軟性を提供する仕組みを指します。
      </p>
      <p class="mb-4">
Astro.jsのインテグレーションは、開発者が必要なツールやフレームワークを簡単に組み込む方法を提供します。これにより、軽量で高性能なWebサイトを短期間で構築できるのが大きな魅力です。
      </p>
    </section>

    <section class="mb-5">
      <h2 class="text-2xl bg-purple-300 p-3 mb-4">Tailwindcssとは</h2>
      <p class="mb-4">
Tailwind CSS は、ユーティリティクラスベースのモダンなCSSフレームワークで、フロントエンド開発者が迅速かつ柔軟にスタイリングを行えるように設計されています。カスタムデザインや複雑なUI構築を効率化するために、直感的なクラスを提供する点が特徴です。
      </p>
      <p class="font-bold">メリット</p>
      <ul class="list-disc list-inside mb-4">
        <li>迅速な開発: ユーティリティクラスのおかげで、すぐにスタイリング可能。</li>
        <li>一貫性のあるデザイン: プリセットが統一されているため、デザインが統一されやすい。</li>
        <li>CSSファイルの管理が簡単: 外部CSSを書く必要が減り、クラス名の競合や冗長なスタイルシートを回避可能。</li>
        <li>レスポンシブデザインが簡単: 複雑なメディアクエリを使わずに設定可能。</li>
      </ul>

      <p class="font-bold">デメリット</p>
      <ul class="list-disc list-inside mb-4">
        <li>HTMLの肥大化</li>
        <li>学習コスト</li>
        <li>独自仕様</li>
      </ul>
    </section>
  </div>
</body>
</html>

dev状態で確認しているだけなのでbuildします。

npm run build

buildしたものをpreviewします。

npm run preview

previewで問題なければそれぞれの方法でデプロイします。

作成した簡単なページの見た目はこちら↓

補足：通常のtailwindcssの導入方法はどうなの？

Astro フレームワークではとても簡単に（なんと2手！）でtailwindcssを導入することができましたがAstoフレームワーク等を使用しない場合はどのように設定するか記しておきます。

前提は「はじめに」セクション内の前提と同じです。

  • node.jsはインストール済み
  • Windowsのwsl2で動かしている

プロジェクトディレクトで下記操作を行うとtailwindcssを導入することができます。

npmでパッケージをインストールしてtailwindcssコンフィグを生成後、postcss設定ファイルを作成する

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init
touch postcss.config.js

postcss.config.jsを設定する

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

tailwindcssを使用するcssファイルに読み込む

@tailwind base;
@tailwind components
@tailwind utilities

tailwind.cofig.jsの設定

module.exports = {
    content: [
        "./src/**/*.{html,js,ts,jsx,tsx}"
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

npm-scriptを設定

"scripts": {
  "build:css": "postcss styles.css -o dist/assets/css/style.css"
}

コマンドを実行してCSSファイルを生成

npm run build:css

生成されたCSSをHTMLから呼び出す

<link href="/assets/css/style.css" rel="stylsheet" />

astroフレームワークを使った場合と比較するとこちらのほうが大分手数がかかることがわかります。

補足2：インテグレーションって何？

インテグレーション・・・統一、統合、複数の異なるものを組み合わせてまとめること

Astroでいう「インテグレーション」はAstroプロジェクトに外部ツールやライブラリの機能を簡単に追加する仕組みを指します。これを利用するとプラグインのように簡単に機能を追加できるようになります。

Astroフレームワークを利用した制作では積極的に活用することで大幅な工期短縮が期待できます。

まとめ

Astroフレームワークでtailwindcssを導入したい場合、Astroの公式インテグレーションを利用すれば驚くほど簡単に利用することができます。

tailwindcssを導入してしまえばあとはHTMLにクラスを設定するだけで見た目を整えていけます。

tailwindcssの使いかたは公式ホームページを都度確認しながら進めていけばよいでしょう。

astroの他のインテグレーションにどんなものがあるか、またそれはどのように使うかは別の機会に記したいと思います。